前端圈：微信小程序開(kāi)發(fā)一周總結(jié)
編輯器
我直接用 vscode（其它編輯器同理，預(yù)覽還是用的微信開(kāi)發(fā)工具），語(yǔ)法高亮將 wxml 設(shè)置成 html, wxss 設(shè)置成 css
- "files.associations": {
- "*.wxss": "css",
- "*.wxml": "html"
- }
也可以安裝小程序相關(guān)插件
開(kāi)始寫(xiě)代碼
-
首先需要完整看完微信小程序文檔（框架，組件和 API），方便后面用到時(shí)查找。
-
view 組件對(duì)應(yīng) html 里的 div
-
text 對(duì)應(yīng) span
-
wxss 里選擇器只支持 element, #id, .className, ::after, ::before
公用組件
項(xiàng)目目錄里新建 components ，按類似 pages 目錄結(jié)構(gòu)，將每個(gè)組件的模板，樣式和 js 文件放在同一個(gè)文件夾
-
模板可以直接
或者需要傳值的使用 + -
樣式使用 @import 導(dǎo)入
-
js 使用 require 引入到頁(yè)面，然后使用下面的 mergePage 來(lái)加載到頁(yè)面對(duì)象中。
mergePage
-
組件的加載
使用mergePage方法將所有組件方法及頁(yè)面事件注冊(cè)到頁(yè)面對(duì)象
-
組件的編寫(xiě)方式
組件里使用可以 this.setData 來(lái)更新頁(yè)面數(shù)據(jù)，或者注冊(cè) onLoad，onShow等頁(yè)面事件，mergePage 的最后一個(gè)參數(shù)的事件會(huì)最先調(diào)用。
-
mergePage 的源碼
es 6
箭頭函數(shù)，函數(shù)參數(shù)默認(rèn)值及解析構(gòu)
一些函數(shù)參數(shù)也可以直接使用默認(rèn)參數(shù)。
拓展運(yùn)算符 和 對(duì)象屬性簡(jiǎn)寫(xiě)
在給 template 傳 data 參數(shù)時(shí)，可以使用對(duì)象屬性簡(jiǎn)寫(xiě)，如
- <template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>
這樣 template 中可以使用變量為 obj 對(duì)象的所有 key，以及 id 和 name
模板字符串
小程序里可以直接方便的使用 es 6 模板字符串
let url = `${app.globalData.API_PREFIX}/cart/add`;
更多 es 6 特性
請(qǐng)參考：https://uedsky.com/2016-06/es6/ ，也可以參考下一篇es6語(yǔ)法簡(jiǎn)介
其它注意
-
wx.showToast 圖標(biāo)只支持"success"、"loading"，錯(cuò)誤提示得自定義
-
如果 template 里面的變量沒(méi)值，請(qǐng)看 data 傳進(jìn)來(lái)沒(méi)有。
-
開(kāi)發(fā)工具（v0.10.102800）可以用下面方法添加接口請(qǐng)求域名，遺憾的是微信里不行。
-
所有頁(yè)面的 JS 會(huì)在啟動(dòng)時(shí)立即執(zhí)行，而不是打開(kāi)頁(yè)面才執(zhí)行，所以一些寫(xiě)在全局的代碼應(yīng)該盡量放到 onLoad 之后，下面是從調(diào)試 source 里看到加載的代碼：
- define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){
- 'use strict';
- var app = getApp();
- var util = require('../../../utils/util');
- var ErrorMsg = require('../../../components/error-msg/error-msg');
- var AddressPicker = require('../../../components/address-picker/address-picker');
- Page(util.mergePage({
- // 頁(yè)面代碼省略
- }, AddressPicker, ErrorMsg));
- //# sourceMappingURL=data:application/json;...});
- require("pages/index/index.js")
參考
