微信小程序開發一周總結
編輯器
我直接用 vscode（其它編輯器同理，預覽還是用的微信開發工具），語法高亮將 wxml 設置成 html, wxss 設置成 css
"files.associations": {
"*.wxss": "css",
"*.wxml": "html"
}
也可以安裝小程序相關插件
開始寫代碼
-
首先需要完整看完微信小程序文檔（框架，組件和 API），方便后面用到時查找。
-
view 組件對應 html 里的 div
-
text 對應 span
-
wxss 里選擇器只支持 element, #id, .className, ::after, ::before
公用組件
項目目錄里新建 components ，按類似 pages 目錄結構，將每個組件的模板，樣式和 js 文件放在同一個文件夾
-
模板可以直接 <include/> 或者需要傳值的使用 <import/> + <template></template>
-
樣式使用 @import 導入
-
js 使用 require 引入到頁面，然后使用下面的 mergePage 來加載到頁面對象中。
<!--more-->
mergePage
-
組件的加載
const ErrorMsg = require('../../../components/error-msg/error-msg');
Page(util.mergePage({
// 頁面 Page 方法...
onLoad() {
// 可以直接在頁面方法中調用 showErrorMsg 方法
}
}, ErrorMsg/* 更多組件也可以*/));
使用 mergePage 方法將所有組件方法及頁面事件注冊到頁面對象
-
組件的編寫方式
var errorTimer;
module.exports = {
showErrorMsg(msg, cb) {
clearTimeout(errorTimer);
this.setData({
errorMsg: msg
});
errorTimer = setTimeout( () => {
this.setData({
errorMsg: false
});
cb && cb();
}, 2000);
}
// 可以在這里注冊 onLoad，onShow等頁面事件
}</code></pre>
組件里使用可以 this.setData 來更新頁面數據，或者注冊 onLoad ， onShow 等頁面事件， mergePage 的最后一個參數的事件會最先調用。
-
mergePage 的源碼
/**
- 合并 Page 對象所有的方法及事件
- 子對象不能使用 data 屬性，請在 onLoad 中使用 setData 方法設置
*/
function mergePage(dest, ...src) {
let args = arguments;
let eventsStack = {
onLoad: [],
onReady: [],
onShow: [],
onHide: [],
onUnload: [],
onPullDownRefresh: [],
onReachBottom: [],
};
// 保存所有的事件，最后一個參數的事件會最先調用。
for(let name in eventsStack) {
for(let i = args.length - 1; i >= 0; i--) {
args[i][name] && eventsStack[name].push(args[i][name])
}
}
Object.assign(...args);
for(let name in eventsStack) {
dest[name] = function() {
for(let i = 0; i < eventsStack[name].length; i++) {
eventsStack[name][i].apply(this, arguments);
}
}
}
return dest;
}</code></pre>
es 6
箭頭函數，函數參數默認值及解析構
wx.request({
complete: ({data= {}}) => {
// 1. 因為 wx.request 返回的接口數據是在 data 屬性里，這里我們只要 data 屬性就行了，所以直接參數解析構
// 2. 如果 failed，無 data 時，data 將為默認值 {}
if(data.code !== 0) {
// do something if request failed
return;
}
// 請求正常處理代碼
// 3. 因為用的箭頭函數，回調里可以正常使用 this, 訪問 Page 對象的方法
// 比如 this.setData(...)
}
})
一些函數參數也可以直接使用默認參數。
拓展運算符 和 對象屬性簡寫
在給 template 傳 data 參數時，可以使用對象屬性簡寫，如
<template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>
這樣 template 中可以使用變量為 obj 對象的所有 key，以及 id 和 name
模板字符串
小程序里可以直接方便的使用 es 6 模板字符串
let url = `${app.globalData.API_PREFIX}/cart/add`;
更多 es 6 特性
其它注意
-
wx.showToast 圖標只支持"success"、"loading"，錯誤提示得自定義
-
如果 template 里面的變量沒值，請看 data 傳進來沒有。
-
開發工具（v0.10.102800）可以用下面方法添加接口請求域名，遺憾的是微信里不行。
// 放到 app.js 前面
__wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');
-
所有頁面的 JS 會在啟動時立即執行，而不是打開頁面才執行，所以一些寫在全局的代碼應該盡量放到 onLoad 之后，下面是從調試 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({
// 頁面代碼省略
}, AddressPicker, ErrorMsg));
//# sourceMappingURL=data:application/json;...
});require("pages/index/index.js")</code></pre>
參考
來自：https://segmentfault.com/a/1190000007468931