數字化終端小程序開發文檔
一．目錄結構
1. 小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：
2. 一個小程序頁面由四個文件組成，分別是：
*注意：為了方便開發者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。
二．配置小程序
- app.json小程序全局配置文件
{
"pages":[//用於描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。
"pages/index/index",
...
],
"window":{//定義小程序所有頁面的頂部背景顏色，文字顏色定義等
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#388bff",
"navigationBarTitleText": "數字化終端",
"navigationBarTextStyle":"white",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
}
- 頁面配置
每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
例如：
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "頁面標題名稱",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"}
三．小程序框架
- 注冊頁面
對於小程序中的每個頁面，都需要在頁面對應的 js 文件中進行注冊，指定頁面的初始數據、生命周期回調、事件處理函數等。
//index.jsPage({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 頁面創建時執行
},
onShow: function() {
// 頁面出現在前台時執行
},
onReady: function() {
// 頁面首次渲染完畢時執行
},
onHide: function() {
// 頁面從前台變為后台時執行
},
onUnload: function() {
// 頁面銷毀時執行
},
onPullDownRefresh: function() {
// 觸發下拉刷新時執行
},
onReachBottom: function() {
// 頁面觸底時執行
},
onShareAppMessage: function () {
// 頁面被用戶分享時執行
},
onPageScroll: function() {
// 頁面滾動時執行
},
onResize: function() {
// 頁面尺寸變化時執行
},
onTabItemTap(item) {
// tab 點擊時執行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件響應函數
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由數據
customData: {
hi: 'MINA'
}})
- 頁面生命周期
- 數據的綁定
WXML 中的動態數據均來自對應 Page 的 data。
簡單綁定
數據綁定使用 Mustache 語法（雙大括號）將變量包起來，可以作用於：
內容
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}})
組件屬性(需要在雙引號之內)
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}})
控制屬性(需要在雙引號之內)
<view wx:if="{{condition}}"> </view>
Page({
data: {
condition: true
}})
- 網絡發起發起 HTTPS 網絡請求請求
wx.request({
url: app.globalData.ip + '/Ashx/CheckAssetHandler.ashx?cmd=3&checkid='+this.data.pddid+'&userid='+user[0].SYSCODE,
header: {
'content-type': 'application/json'
},
success (res) {
wx.hideLoading()
if(res.data.code==0){
_this.setData({
details:res.data.data[0]
})
} else {
wx.showToast({
title: res.data.message,
icon: 'none',
duration:3000
})
}
},
fail: function(e) { //網絡請求錯誤
wx.showToast({
title: '網絡請求錯誤',
icon: 'none'
})
}
})