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

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

小程序的底層架構(gòu)是雙線程模式，邏輯層和渲染層是分開的兩個(gè)線程，渲染層指的就是渲染wxml和wxss，邏輯層指的是執(zhí)行js文件，兩個(gè)線程分開運(yùn)行，通過微信客戶端進(jìn)行通信，調(diào)用微信的api的時(shí)候其實(shí)就是執(zhí)行js的線程和微信客戶端通信。
下圖是微信官方文檔里渲染頁面的一個(gè)流程圖

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

先補(bǔ)充一個(gè)知識(shí)點(diǎn)：在小程序的appjs的onLaunch里，給全局變量wx添加的屬性，是全局有效的，能在其他頁面中調(diào)用，比如：

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


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

之前對(duì)發(fā)布和訂閱一直沒什么概念，但是多學(xué)點(diǎn)東西總沒壞處，近期自己花了點(diǎn)時(shí)間專門看了一下，大概明白了一點(diǎn)。

訂閱：訂閱就是在某個(gè)地方注冊(cè)一個(gè)自定義的事件，供其他地方調(diào)用
發(fā)布：觸發(fā)已經(jīng)訂閱的函數(shù)

下面是我寫的一個(gè)方法，可能會(huì)有一些bug，但是目前沒有發(fā)現(xiàn)，要是有問題的話歡迎交流一下

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

  // 訂閱緩存記錄
  var subCache = {};
  // 發(fā)布緩存記錄
  var pubCache = {};
  // 參數(shù)緩存
  var paramCache = {};

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

    subCache[key].push(fn);
    // 如果有發(fā)布記錄，則直接執(zhí)行函數(shù)
    if (pubCache[key]) {
      if (paramCache[key]) {
        fn.apply(null, paramCache[key]);
      } else {
        fn.apply(null);
      }
      // 如果把參數(shù)和發(fā)布緩存清除的話，就是只允許單次執(zhí)行
      // 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;
    }
    // 有訂閱記錄，則直接執(zhí)行
    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對(duì)象上

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

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

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

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

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

一. 在頁面1的時(shí)候，執(zhí)行了訂閱test1事件，發(fā)布了test2事件，但是test1沒有發(fā)布，訂閱的事件不會(huì)執(zhí)行，test2事件沒有訂閱，也不會(huì)執(zhí)行。

二. 從頁面1跳轉(zhuǎn)到頁面2，發(fā)布了test1事件，直接執(zhí)行之前已經(jīng)注冊(cè)好的test1事件，訂閱test2事件，因?yàn)橛衪est2的發(fā)布事件，訂閱之后直接執(zhí)行，結(jié)果是打印一次test1，打印一次test2。

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

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

五. 從頁面2返回頁面1，發(fā)布test2，因?yàn)閠est2事件訂閱了兩次，所以打印了兩次test2，所以要注意在不需要的地方把事件注銷。

在頁面2的onUnload事件里把事件test2注銷掉，在從頁面2回到頁面1的時(shí)候，事件test2已經(jīng)注銷了，不會(huì)再執(zhí)行。

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

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

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

用別人的源碼可以加快開發(fā)速度，而且可以學(xué)習(xí)別人的源碼
We UI WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。這個(gè)是一個(gè)樣式庫，只提供樣式。
vant-weapp 這個(gè)是一個(gè)組件庫，里面封裝了一些常用的組件，是有贊的vant組件庫的小程序版本，個(gè)人感覺用起來還是挺好用的。

待補(bǔ)充......