1.ページファイル
- アプレットのページファイルは4つに分かれています。
index.wxml、index.wxss、index.js和 index.json
index.wxmlはレイアウトファイル、index.wxssはスタイルファイル、index.jsはロジックファイル、index.jsonは構成ファイルです- ページレベルの構成は、グローバルレベルの構成を上書きします
- アプレットのグローバル一般構成ファイルには、、およびファイルのみ
app.wxssがapp.jsありapp.jsonますが、ファイルはありapp.wxmlません
- アプレットページレベルの構成ファイルにはあり
index.js、index.json、index.wxmlおよびindex.wxssファイル
- WeChatアプレットのレイヤリング、構成レイヤ
(.json)、ビューレイヤ(.wxml、.wxss)、およびロジックレイヤ(.js)
次に、tabBarコンポーネント
tabBarコンポーネントを構成する必要がありますlist。数は少なくとも2つで、最大は5つです。これlistはアレイです。listこれが設定されているpagePathとtext、pagePathページ・パスのためtextにtabボタンのテキスト、iconPathデフォルトの画像パス、selectedIconPath画像パスを選択します- ときに
positionされてtop表示されていないicon、それが表示されていないiconPath、とselectedIconPath
positionデフォルトはbottom、下部にありますcolor同様にtabBarデフォルトの色selectedColorをtabBar選択した色- サンプルコードは次のとおりです。
"tabBar":{
"backgroundColor": "#030",
"position": "top",
"color": "#ccc",
"selectedColor": "#f00",
"list": [
{
"selectedIconPath": "",
"iconPath": "",
"pagePath": "pages/test/test",
"text": "首页"
},
{
"selectedIconPath": "",
"iconPath": "",
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
3.ミニプログラムフレームワークMINA
- ベースの
react nativeレスポンシブ開発フレームワーク、コンポーネントベースの開発、データドライバー
- ビューレイヤーとロジックレイヤーに分かれて、データが変化し、ロジックも変化します
- 補間式によるデータバインディング、
{
{}}
- 条件付きレンダリング、
wx:if、wx:elif、wx:else
- リストのレンダリング
wx:for、トラバースする時間がwx:key必要です。必要に応じて名前を変更し、ループ内でダブルループを実行してループから抜け出します。変更item、比較wx:for-item="user"、
変更index、比較wx:for-index="idx"
- サンプルコード
data: {
"msg": 'hello word',
"list": [
"vue",
"react",
"node"
],
"show": true,
"list2": [
{
name: "张三", city: "上海", course: ["vue", "react", "node"]},
{
name: "李四", city: "北京", course: ["vue", "react", "node"]},
{
name: "王五", city: "深圳", course: ["vue", "react", "node"]}
]
},
<text wx:if="{
{ show }}">
{
{ msg }}
{
{ list }}
</text>
<view wx:for="{
{ list }}" wx:key="{
{ index}}">
{
{ item }} {
{ index }}
</view>
<view wx:for="{
{ list2 }}" wx:key="{
{index}}" wx:for-item="user" wx:for-index="{
{idx}}">
{
{user.name}} {
{ user.city}} {
{ idx }}
<view wx:for="{
{ user.course }}" wx:key="{
{ index }}">
{
{ item}} {
{ index }}
</view>
</view>
第四に、アプレットのページ構成
dataこれは、ページの最初のレンダリングに使用される初期データです。ページがロードされると、dataそれはになりJSON、論理層レベルによってレンダリングに渡される文字列の形式、従ってdataデータをに変換しなければならないJSONタイプ：文字列、数値、ブール値、オブジェクト配列。- ライフサイクル機能
-
onLoad(Object query) ページの読み込み時にトリガーされ、1回だけ呼び出されます
-
onShow() ページが前面に表示/切り取られたときにトリガーされます
-
onReady() ページの最初のレンダリングが完了するとトリガーされ、ページは1回だけ呼び出されます。これは、ページがビューレイヤーと対話する準備ができていることを意味します。
-
onHide() ページが非表示/背景に切り取られたときにトリガーされます
-
onUnload() ページがアンロードされるとトリガーされます
- ページイベントハンドラ
-
onPullDownRefresh() ユーザーのプルダウン更新イベントを監視する
-
onReachBottom() ユーザーのプルアップボトミングイベントを監視する
-
onPageScroll(Object object) ユーザーのスライドページイベントを監視する
-
onShareAppMessage(Object object) ページの進むボタン（ボタンコンポーネントopen-type = "share"）または右上隅のメニューの[進む]ボタンに対するユーザーのクリックを監視し、転送コンテンツをカスタマイズします
-
onResize(Object object) アプレット画面が回転するとトリガーされます
-
onTabItemTap(Object object) タブがクリックされるとトリガーされます
5、アプレットのグローバル構成
- グローバル構成アプレットを
pagesページパスリスト、windowグローバルデフォルトウィンドウパフォーマンス、パフォーマンスバーのtabBar下部tab、networkTimeoutネットワークタイムアウト、debugオープンdebugモードなどに追加します。
- グローバルアプレット構成
app.jsonファイル
- サンプルコード
app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#0f0",
"navigationBarTitleText": "Dell",
"navigationBarTextStyle": "white",
"backgroundColor": "pink",
"enablePullDownRefresh": true
},
"tabBar": {
"color": "purple",
"selectedColor": "red",
"position": "bottom",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "resources/buy.png",
"selectedIconPath": "resources/sell.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "resources/buy.png",
"selectedIconPath": "resources/sell.png"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": false,
"style": "v2",
"sitemapLocation": "sitemap.json"
}
6、アプレットのロジックレイヤー
- app.js
App({
onLaunch: function () {
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
wx.login({
success: res => {
}
})
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: res => {
this.globalData.userInfo = res.userInfo
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
- index.js
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {
},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
- logs.js
const util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(log => {
return util.formatTime(new Date(log))
})
})
}
})
- index.wxml
<view class="userinfo">
<button wx:if="{
{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{
{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{
{motto}}</text>
</view>