微信小程序開發一週總結

編輯器

我直接用 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`等頁面事件
}

組件裏使用能夠 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);
  // Object.assign 須要添加 polyfill 兼容 Android（不支持數組參數展開）
  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;
}

Object.assign Android 上兼容問題

小程序裏在 Android 上沒有 Object.assign 這個，除了上面的 mergePage，其它地方也會常常用到。
咱們能夠到 app.js 裏檢測是否支持，而後添加 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;
};

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 特性

請參考：https://uedsky.com/2016-06/es6/

其它注意

• 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")

參考

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

原文地址：https://uedsky.com/2016-11/weixin-app/
獲取最佳閱讀體驗並參與討論，請訪問原文