小程式-基礎表達篇
- 2019 年 10 月 9 日
- 筆記
/約定/ 讓我們輕裝上陣
一個功能頁（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）參考官方開發文檔。
