用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

:小程序的一些小知識總結

巴黎彩票计划 www.hknsi.icu Rolan 2019-5-9 00:51

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

巴黎彩票计划很多方法都是異步的原因

剛接觸小程序的時候,發現很多微信提供的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,但是目前沒有發現,要是有問題的話歡迎交流一下

var 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);
      }
      pubCache[key] = undefined;
    }
  };
  pub = function () {
    var key = Array.prototype.shift.call(arguments);
    var fns = subCache[key];
    // 沒有訂閱過,則將參數緩存,待訂閱的時候直接執行
    if (!fns || fns.length === 0) {
      pubCache[key] = true;
      paramCache[key] = Array.prototype.slice.call(arguments, 0);
      return;
    }
    // 有訂閱記錄,則直接執行
    for (let fn of fns) {
      fn.apply(null, arguments);
    }
  };
  remove = function (key) {
    // 把所有的緩存全部清除
    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里用到了閉包,訂閱的函數和參數都有保存在內存里,所以能實現訂閱和發布的功能。

目前事件訂閱是用的數組存儲,可實現同一個事件訂閱多次,如果不需要的話可自行修改成只能訂閱一次的方法。

用法:

一般用于跨頁面的操作,比如在某個頁面訂閱某個事件,在另一份頁面執行了某項操作之后,發布該事件,會直接執行訂閱的事件,實現頁面間的一些數據傳遞。

還有也可用于異步請求,先訂閱某個事件,異步請求數據,請求數據回來之后,再發布。

待補充......

分享至 : QQ空間
收藏
原作者: 上帝遺忘之子 來自: segmentfault
pk10计划软件免费下载 玩北京pk10有人赢吗 5分快三讲座视频 重庆时时彩20分钟一期 多赢软件免费 pk10冠军四码规律破解 mg藏分不让出款 梦册网七星彩解码 手机二人斗地主 在澳门赌博玩什么项目 北京pk下载安装 3肖主6码期期准 双色球基本技巧 pt游戏交易平台 蓝球杀号必赢 欢乐生肖开奖平台