/約定/ 讓我們輕裝上陣 一個功能頁（Page）的開發通常需要四大塊：配置、代碼、佈局、樣式。 這四大塊承載不同的方面，要獨立不混雜，又要整體融合。於是有了以下約定： 每一塊 獨立的文件、相同的文件名、不同的擴展名。 按約定行事，自動融合。 於是，一個小程式的功能頁 Page，就這樣形成了。 ind ...
/約定/ 讓我們輕裝上陣
一個功能頁（Page）的開發通常需要四大塊：配置、代碼、佈局、樣式。
這四大塊承載不同的方面，要獨立不混雜，又要整體融合。於是有了以下約定：
每一塊 --> 獨立的文件、相同的文件名、不同的擴展名。
按約定行事，自動融合。
於是，一個小程式的功能頁 Page，就這樣形成了。
- index.json
- index.js
- index.wxml
- index.wxss
而 app.js，app.json，app.wxss 則作為全局定義。
再繼續來看代碼部分
它少不了這三大塊：數據、生命周期、功能過程。
不需要額外的配置，約定一種結構方式即可。
Page({ data, on階段, func... })再來看四大塊中的交互
通過約定之後，可謂我中有你，你中有我，wxss 定義的名稱，wxml 可以根據需要使用，js 定義的數據，wxml 可以靈活呈現，數據變，呈現自動變。
常用表達
1.點擊事件
通過 bindtap 屬性指定一個功能函數名稱即可。以下示例中，{{ msg }} 綁定代碼中定義的數據屬性 msg，按鈕點擊事件，執行代碼中的 clickMe 功能函數，它改變了 msg 的值，則頁面也會相應的呈現新的值。
<view>{{ msg }}</view>
<button bindtap="clickMe">點擊我</button>
Page({
data: { msg : null },
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})2.頁面跳轉
wx.navigateTo({
url: '../mypage',
})當存在參數時，如：
/mypage?id=123
可通過 onLoad 里 options 可取得參數，如 options.id
Page({
onLoad: function (options) {
console.log(options.id);
},3.獲取輸入值
輸入控制項 bindinput 指定輸入事件，在傳遞的參數（如參數名為 e）中通過 e.detail.value 可以取到值。
<input id="ipt" bindinput='iptInput'></input>
iptInput: function(e){
this.setData({ iptValue : e.detail.value});
}4.JSON轉換
stringify(object): 將 object 對象轉換為 JSON 字元串，並返回該字元串。
parse(string): 將 JSON 字元串轉化成對象，並返回該對象。
5.WEB 請求
普通請求
在調試階段，項目可以設置：開發環境不校驗安全功能變數名稱TLS版本與HTTPS證書。這樣可以使用 http 做測試，正式環境要求使用 https。
wx.request({
url: 'http://.../test.php',
data: {
x: ''
},
header: {
'content-type': 'application/json' // 預設值
},
success: function(res) {
console.log(res.data)
}
})文件上傳
wx.uploadFile({
url: 'http://.../upload',
filePath: this.data.fileinfo.path,
name: 'myfile',
formData: {
id: "busiid",
},
success: function (resu) {
console.log(resu);
wx.showToast({
title: '請求成功',
})
},
fail: function(err){
wx.showToast({
title: '錯誤' + err.errMsg
})
console.log(err);
}
})6.消息提示
wx.showModal({
title: '消息',
content: '您點擊了',
showCancel: false
})
wx.showToast({
title: '錯誤' + err.errMsg
})7.引入weui-wxss
兩個步驟
7.1下載
https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss
7.2引用
將weui.wxss 放在與 app.wxss 同一目錄下。在app.wxss 中最前邊引用即可。
@import 'weui.wxss';文檔：https://github.com/Tencent/weui/wiki
8.其它
當非同步方法中要更新數據時，不能直接使用 this.setData，此時，可以在非同步發起代碼前加上 let that = this;，然後使用 that.setData 來操作。
在 app.json 配置 tabBar 可以直接定義底部導航。
{
"tabBar": {
"color": "#ddd",
"selectedColor": "#3cc51f",
"backgroundColor": "#fff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"pagePath": "pages/profile/profile",
"text": "我的"
}
]
}
}其它組件、模板，WXS（WeiXin Script）參考官方開發文檔。
