摘要：小程序很多方法都是異步的原因官方說法天生異步剛接觸小程序的時候，發現很多微信提供的都是異步的，如路由跳轉，設置和讀取緩存，還有獲取節點信息等微信的，都是異步的，需要傳入回調函數才能獲得結果，在我們正常的前端開發中，這些都不是異步的，當時很奇

剛接觸小程序的時候，發現很多微信提供的api都是異步的，如路由跳轉，設置和讀取緩存，還有獲取節點信息等微信的api，都是異步的，需要傳入回調函數才能獲得結果，在我們正常的前端開發中，這些都不是異步的，當時很奇怪為什么是這樣的，最近看了微信的一個開發教程之后，總算是明白了。微信小程序開發教程

小程序的底層架構是雙線程模式，邏輯層和渲染層是分開的兩個線程，渲染層指的就是渲染wxml和wxss，邏輯層指的是執行js文件，兩個線程分開運行，通過微信客戶端進行通信，調用微信的api的時候其實就是執行js的線程和微信客戶端通信。
下圖是微信官方文檔里渲染頁面的一個流程圖

注意事項：
上述說了，小程序的渲染層和邏輯層是分開的兩個線程，執行js邏輯的只有一個線程，所以在js里聲明了的函數，只要有調用，就算頁面卸載了，最終都會執行，所以要注意的是，一些interval，或者一些注冊的其他函數，如果不想在頁面離開后繼續執行的話，在頁面卸載的時候要注銷掉。

先補充一個知識點：在小程序的appjs的onLaunch里，給全局變量wx添加的屬性，是全局有效的，能在其他頁面中調用，比如：

onLaunch: function () {
    wx.aaa = "123456"; 
    wx.bbb = function () { console.log("541521") }
}


onLoad: function () {
    console.log(wx.aaa);
    wx.bbb();
}

之前對發布和訂閱一直沒什么概念，但是多學點東西總沒壞處，近期自己花了點時間專門看了一下，大概明白了一點。

訂閱：訂閱就是在某個地方注冊一個自定義的事件，供其他地方調用
發布：觸發已經訂閱的函數

下面是我寫的一個方法，可能會有一些bug，但是目前沒有發現，要是有問題的話歡迎交流一下

const myEvent = (function() {
  // 聲明方法
  var pub, sub, remove;

  // 訂閱緩存記錄
  var subCache = {};
  // 發布緩存記錄
  var pubCache = {};
  // 參數緩存
  var paramCache = {};

  // 訂閱事件
  sub = function(key, fn) {
    if (!subCache[key]) {
      subCache[key] = [];
    }
    // 添加到訂閱緩存中

    subCache[key].push(fn);
    // 如果有發布記錄，則直接執行函數
    if (pubCache[key]) {
      if (paramCache[key]) {
        fn.apply(null, paramCache[key]);
      } else {
        fn.apply(null);
      }
      // 如果把參數和發布緩存清除的話，就是只允許單次執行
      // paramCache[key] = [];
      // pubCache[key] = undefined;
    }
  };
  pub = function() {
    var key = Array.prototype.shift.call(arguments);
    var fns = subCache[key];
    var args = Array.prototype.slice.call(arguments, 0);
    pubCache[key] = true;
    paramCache[key] = args;
    if (!fns || fns.length === 0) {
      return;
    }
    // 有訂閱記錄，則直接執行
    for (let fn of fns) {
      fn.apply(null, args);
    }
  };
  remove = function(key, fn) {
    if (subCache[key]) {
      if (fn) {
        for(let i = 0, len = subCache[key].length; i < len; i++) {
          if (fn == subCache[key][i]) {
            subCache[key].splice(i, 1);
            break;
          }
        }
      } else {
        // 把所有的緩存全部清除
        subCache[key] = undefined;
        pubCache[key] = undefined;
        paramCache[key] = undefined;
      }
    }
  };
  return {
    pub: pub,
    sub: sub,
    remove: remove
  };
})();

module.exports = myEvent;

使用方法如下：
在appjs里引入MyEvent，并掛載在wx對象上

App({
  onLaunch: function () {
    const MyEvent = require("myEvent的路徑");
    wx.myEvent = MyEvent;
  }
})

在其中頁面頁面1的onShow里訂閱test1事件，發布test2事件

onLoad: function(){
    wx.myEvent.sub("test1", function () {
        console.log("test1");
    });
},
onShow: function () {
    wx.myEvent.pub("test2", "test2" + new Date().getTime());
}

在頁面2的onLoad事件里，發布test1事件，訂閱test2事件

onLoad: function(options) {
    wx.myEvent.pub("test1");
    wx.myEvent.sub("test2", function(a){
      console.log(a);
    });
}

一. 在頁面1的時候，執行了訂閱test1事件，發布了test2事件，但是test1沒有發布，訂閱的事件不會執行，test2事件沒有訂閱，也不會執行。

二. 從頁面1跳轉到頁面2，發布了test1事件，直接執行之前已經注冊好的test1事件，訂閱test2事件，因為有test2的發布事件，訂閱之后直接執行，結果是打印一次test1，打印一次test2。

三. 從頁面2返回到頁面1，執行onShow事件，再次發布test2事件，打印一次test2

四. 從頁面1到頁面2，發布了test1事件，事件test2重復訂閱了，訂閱了兩次，打印一次test1。

五. 從頁面2返回頁面1，發布test2，因為test2事件訂閱了兩次，所以打印了兩次test2，所以要注意在不需要的地方把事件注銷。

在頁面2的onUnload事件里把事件test2注銷掉，在從頁面2回到頁面1的時候，事件test2已經注銷了，不會再執行。

onUnload: function() {
    wx.myEvent.remove("test2");
}

原理和用法說明：
原理：
全局只有一個wx對象，將myEvent掛載在wx上，所以全局也只有一個wx.myEvent對象，myEvent里用到了閉包，訂閱的函數和參數都有保存在內存里，所以能實現訂閱和發布的功能。
目前事件訂閱是用的數組存儲，可實現同一個事件訂閱多次，如果不需要的話可自行修改成只能訂閱一次的方法。
用法：
一般用于跨頁面的操作，比如在某個頁面訂閱某個事件，在另一份頁面執行了某項操作之后，發布該事件，會直接執行訂閱的事件，實現頁面間的一些數據傳遞。
還有也可用于異步請求，先訂閱某個事件，異步請求數據，請求數據回來之后，再發布。

使用例子
在使用發布和訂閱的方法之前，比如新增地址，從列表頁面跳轉到新增頁面，在新增頁面新增地址成功之后，將新增的地址放到緩存，接著返回列表頁面，使用navigateBack，在列表頁面的onShow里檢測是否有緩存，有緩存，則重新加載地址列表
使用發布訂閱的方法之后，可以在列表頁面的onLoad里訂閱新增地址的事件，在新增地址頁面，新增之后，發布一個新增地址事件，列表頁面監聽到有新增地址事件，則新增一個地址，瞬間感覺高大上了

用別人的源碼可以加快開發速度，而且可以學習別人的源碼
We UI WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。這個是一個樣式庫，只提供樣式。
vant-weapp 這個是一個組件庫，里面封裝了一些常用的組件，是有贊的vant組件庫的小程序版本，個人感覺用起來還是挺好用的。

待補充......