總結一個微信開發的過程實例

編輯器

我直接用vscode（其它編輯器同理，預覽還是用的微信開發工具），語法高亮將wxml 設為html, wxss 設定成css

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

也可以安裝小程式相關外掛程式

開始寫程式碼

• 首先需要完整看完微信小程式文件（框架，元件和API），方便後面用到時找。

• view 元件對應html 裡的p

• text 對應span

• wxss 裡選擇器只支援element, #id, .className, ::after, ::before

公用元件

專案目錄里新建components ，按類似pages 目錄結構，將每個元件的模板，樣式和js 檔案放在同一個資料夾

• #模板可以直接0bc68e57bb27aaa30e943ff047d67717 或需要傳值的使用de3db5173ba162146856f74f89e5f81e + d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2

• 樣式使用@import 匯入

• #js 使用require 引入到頁面，然後使用下面的mergePage 來載入到頁面物件中。

  fc430c7db1eecf4621f4fc8a5479f894

#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);
  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;
}

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

【相關推薦】

1.

微信公眾號平台原始碼下載

2. 

總結微信小程式開發UI佈局技術

3. 

微信開發之微信支付

4. 

值得一看的微信小程式開發經驗摘要

#

以上是總結一個微信開發的過程實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！