摘要：編輯器我直接用其它編輯器同理，預(yù)覽還是用的微信開發(fā)工具，語(yǔ)法高亮將設(shè)置成設(shè)置成也可以安裝小程序相關(guān)插件開始寫代碼首先需要完整看完微信小程序文檔框架，組件和，方便后面用到時(shí)查找。

我直接用 vscode（其它編輯器同理，預(yù)覽還是用的微信開發(fā)工具），語(yǔ)法高亮將 wxml 設(shè)置成 html, wxss 設(shè)置成 css

"files.associations": {
  "*.wxss": "css",
  "*.wxml": "html"
}

也可以安裝小程序相關(guān)插件

首先需要完整看完微信小程序文檔（框架，組件和 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ì)象中。

組件的加載

const ErrorMsg = require("../../../components/error-msg/error-msg");
Page(util.mergePage({
  // 頁(yè)面 Page 方法...
  onLoad() {
    // 可以直接在頁(yè)面方法中調(diào)用 showErrorMsg 方法
  }
}, ErrorMsg/* 更多組件也可以*/));

使用mergePage方法的優(yōu)點(diǎn)是可以將所有組件方法及頁(yè)面事件注冊(cè)到頁(yè)面對(duì)象

組件的編寫方式

var errorTimer;

module.exports = {
  showErrorMsg(msg, cb) {
    clearTimeout(errorTimer);
    this.setData({
      errorMsg: msg
    });
    errorTimer = setTimeout( () => {
      this.setData({
        errorMsg: false
      });
      cb && cb();
    }, 2000);
  }
  // 可以在這里注冊(cè) `onLoad`，`onShow`等頁(yè)面事件
}

組件里使用可以 this.setData 來(lái)更新頁(yè)面數(shù)據(jù)，或者注冊(cè) onLoad，onShow等頁(yè)面事件，mergePage 的最后一個(gè)參數(shù)的事件會(huì)最先調(diào)用。

mergePage 的源碼

/**
 * 合并 Page 對(duì)象所有的方法及事件
 * 子對(duì)象不能使用 data 屬性，請(qǐng)?jiān)?onLoad 中使用 setData 方法設(shè)置
 */
function mergePage(dest, ...src) {
  let args = arguments;
  let eventsStack = {
    onLoad: [],
    onReady: [],
    onShow: [],
    onHide: [],
    onUnload: [],
    onPullDownRefresh: [],
    onReachBottom: [],
  };
  // 保存所有的事件，最后一個(gè)參數(shù)的事件會(huì)最先調(diào)用。
  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);
  // Object.assign 需要添加 polyfill 兼容 Android（不支持?jǐn)?shù)組參數(shù)展開）
  Object.assign.apply(null, 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;
}

小程序里在 Android 上沒有 Object.assign 這個(gè)，除了上面的 mergePage，其它地方也會(huì)經(jīng)常用到。
我們可以到 app.js 里檢測(cè)是否支持，然后添加 polyfill

// polyfill for Android before app starts
if(!Object.assign) {
  Object.assign = require("./utils/object-assign")
}

utils/object-assign.js 源碼

// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
module.exports = function (target) {
  // We must check against these specific cases.
  if (target === undefined || target === null) {
    throw new TypeError("Cannot convert undefined or null to object");
  }

  var output = Object(target);
  for (var index = 1; index < arguments.length; index++) {
    var source = arguments[index];
    if (source !== undefined && source !== null) {
      for (var nextKey in source) {
        if (source.hasOwnProperty(nextKey)) {
          output[nextKey] = source[nextKey];
        }
      }
    }
  }
  return output;
};

wx.request({
  complete: ({data= {}}) => {
    // 1. 因?yàn)?wx.request 返回的接口數(shù)據(jù)是在 data 屬性里，這里我們只要 data 屬性就行了，所以直接參數(shù)解析構(gòu)
    // 2. 如果 failed，無(wú) data 時(shí)，data 將為默認(rèn)值 {}
    if(data.code !== 0) {
      // do something if request failed
      return;
    }
    // 請(qǐng)求正常處理代碼
    // 3. 因?yàn)橛玫募^函數(shù)，回調(diào)里可以正常使用 this, 訪問 Page 對(duì)象的方法
    // 比如 this.setData(...)
  }
})

一些函數(shù)參數(shù)也可以直接使用默認(rèn)參數(shù)。

在給 template 傳 data 參數(shù)時(shí)，可以使用對(duì)象屬性簡(jiǎn)寫，如

這樣 template 中可以使用變量為 obj 對(duì)象的所有 key，以及 id 和 name

小程序里可以直接方便的使用 es 6 模板字符串

let url = `${app.globalData.API_PREFIX}/cart/add`;

請(qǐng)參考：https://uedsky.com/2016-06/es6/

wx.showToast 圖標(biāo)只支持"success"、"loading"，錯(cuò)誤提示得自定義

如果 template 里面的變量沒值，請(qǐng)看 data 傳進(jìn)來(lái)沒有。

開發(fā)工具（v0.10.102800）可以用下面方法添加接口請(qǐng)求域名，遺憾的是微信里不行。

// 放到 app.js 前面
 __wxConfig.projectConfig.Network.RequestDomain.push("https://weapp.juanpi.com");

所有頁(yè)面的 JS 會(huì)在啟動(dòng)時(shí)立即執(zhí)行，而不是打開頁(yè)面才執(zhí)行，所以一些寫在全局的代碼應(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")

https://mp.weixin.qq.com/debu...

原文地址：https://uedsky.com/2016-11/weixin-app/
獲取最佳閱讀體驗(yàn)并參與討論，請(qǐng)?jiān)L問原文