国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

在小程序中集成redux/immutable/thunk第三方庫的方法

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 22:10:12
文檔

在小程序中集成redux/immutable/thunk第三方庫的方法

在小程序中集成redux/immutable/thunk第三方庫的方法:一、前言 小程序給我們暴露了兩個參數(shù) require 和 module , require 用來在模塊中加載其他模塊, module 用來將模塊中的方法暴露出去 module.exports = function(){} 所以只要需要讓第三方庫的代碼使用這種形式的 export 就可以了 二、構建Red
推薦度:
導讀在小程序中集成redux/immutable/thunk第三方庫的方法:一、前言 小程序給我們暴露了兩個參數(shù) require 和 module , require 用來在模塊中加載其他模塊, module 用來將模塊中的方法暴露出去 module.exports = function(){} 所以只要需要讓第三方庫的代碼使用這種形式的 export 就可以了 二、構建Red

一、前言

小程序給我們暴露了兩個參數(shù) require 和 module , require 用來在模塊中加載其他模塊, module 用來將模塊中的方法暴露出去

module.exports = function(){}

所以只要需要讓第三方庫的代碼使用這種形式的 export 就可以了

二、構建Redux的微信小程序包

打一個 Redux 包,讓它可以兼容微信小城的加載方式

git clone https://github.com/reactjs/redux.git

npm install

# 詳細內容可以到redux項目的package.json中查看
# 這些命令是是使用webpack構建UMD模式的包。也就是說所有的代碼,包括依賴的庫都會被打包到一個文件中,并且自帶一段模塊加載代碼,文件可以在dist目錄下找到
npm run build:umd && npm run build:umd

用編輯器打開 dist 目錄下的 redux.js 文件

(function webpackUniversalModuleDefinition(root, factory) {
 if(typeof exports === 'object' && typeof module === 'object')
 module.exports = factory();
 else if(typeof define === 'function' && define.amd)
 define([], factory);
 else if(typeof exports === 'object')
 exports["Redux"] = factory();
 else
 root["Redux"] = factory();
})(this, function() {
... 
})

這段代碼是用來加載模塊的,里面的factory函數(shù)的返回的內容是用webpack提供的loader組織起來的redux的代碼和第三方依賴。

  • 如果我們把這個文件拷貝到小程序中,只需要讓程序能正常進入第三行代碼,就能把Redux加載進來
  • 將第二行代碼: if(typeof exports === 'object' && typeof module === 'object') 修改成: if(typeof module === 'object')
  • 這樣修改的原因是,在微信小程序的環(huán)境中是沒有exports變量的,所以就沒辦法正確進入這個分支,刪除之后就可以正確進入
  • 我們拷貝到 libs 目錄下,那么我們在程序中使用時,只要當做是一個本地模塊去 require 就可以了 var redux = require('./libs/redux.js')
  • 我們可以通過類似的方法,使用 Webpack 打包第三方庫,就可以集成任何庫了
  • 三、集成Redux-devtools

    因為微信小程序的開發(fā)環(huán)境是定制的,暫時沒有發(fā)現(xiàn)辦法直接安裝 redux-devtool 的插件

    安裝remote-redux-devtools

    原版的 remote-redux-devtools 使用的一個 websocket 的依賴會使用原生的 WebSocket ,小程序是不支持的,所以需要改成小程序的 websocket 實現(xiàn),修改好的代碼 https://github.com/poetries/wx-redux-immutable-template/blob/master/wx-redux-immutable-template/public/libs/remote-redux-devtools.js

    把代碼下載到工程目錄里面就可以用了

    安裝和啟動remotedev-server

    npm install -g remotedev-server
    remotedev --hostname=localhost --port=5678
    

    因為沒辦法用 npm 安裝到本地(微信小程序會嘗試去加載項目目錄中的所有js),所以這里使用全局安裝,第二條命令是啟動 remotedev-server , hostname 和 port 分別指定為 localhost 和 5678

    集成devtool

    在 store 下集成 devtool

    const {createStore, compose} = require('./libs/redux.js');
    const devTools = require('./libs/remote-redux-devtools.js').default;
    const reducer = require('./reducers/index.js')
    
    function configureStore() {
     return createStore(reducer, compose(devTools({
     hostname: 'localhost',
     port: 5678,
     secure: false
     })));
    }
    
    module.exports = configureStore;
    
    

    把 devtool 使用 redux 的 compose 加到 store 中去。 hostname 和 port 是指定為之前啟動 remotedev-server 啟動時候指定的參數(shù)。保存之后重啟一下小程序,如果沒有報錯的話就OK了

    可以在瀏覽器中訪問 localhost:5678

    四、小程序中集成immutable

    Immutable 是 Facebook 開發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改,是的應用開發(fā)更簡單,允許使用函數(shù)式編程技術,比如惰性評估。微信小程序無法直接使用 Immutable.js ,下面就來說說微信小程序如何使用第三方庫 Immutable.js

    Immutable使用了UMD模塊化規(guī)范

    (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
     (global.Immutable = factory());
    }(this, function () { 'use strict';var SLICE$0 = Array.prototype.slice;
    
    ....
    
    }));
    
    

    修改 Immutable 代碼,注釋原有模塊導出語句,使用 module.exports = factory() 強制導出

    (function(global, factory) {
     /*
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
     (global.Immutable = factory());
     */
    
     module.exports = factory();
    
    }(this, function() {
    

    導入修改好的 immutable 到小程序中即可 https://github.com/poetries/wx-redux-immutable-template/blob/master/wx-redux-immutable-template/public/libs/immutable.js

    聲明:本網(wǎng)頁內容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    在小程序中集成redux/immutable/thunk第三方庫的方法

    在小程序中集成redux/immutable/thunk第三方庫的方法:一、前言 小程序給我們暴露了兩個參數(shù) require 和 module , require 用來在模塊中加載其他模塊, module 用來將模塊中的方法暴露出去 module.exports = function(){} 所以只要需要讓第三方庫的代碼使用這種形式的 export 就可以了 二、構建Red
    推薦度:
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 国产视频资源在线观看 | 一区二区三区精品 | 精品一区二区三区五区六区 | 欧美日韩中字 | 在线中文 | 先锋影音制服丝袜 | 国产成人欧美一区二区三区的 | 精品一区二区三区四区在线 | a级毛片在线播放 | 亚洲一区二区欧美 | 国产成人精品一区二区免费视频 | 久久艹精品 | 亚洲一区二区久久 | 日韩欧美在线视频 | 91精品一区二区三区在线 | 日韩精品一区二区三区不卡 | 国产女同一区二区三区五区 | 欧洲日韩视频二区在线 | 五月婷婷中文字幕 | 欧美喷水 | 精品国产一级在线观看 | 精品国产一区二区三区久久久狼 | 麻豆精品一区 | 欧美专区在线观看 | 欧美日韩亚洲国产一区二区三区 | 影音先锋亚洲综合小说在线 | 亚洲欧美在线免费观看 | 国产成人无精品久久久久国语 | 国产一在线精品一区在线观看 | 国产成人在线看 | 精品综合一区二区三区 | 国产一区二区三区日韩欧美 | 国产成人不卡亚洲精品91 | 欧美日韩第一页 | 成人国产一区二区三区精品 | 久久久久久夜精品精品免费啦 | 一区二区免费播放 | 欧美成人看片一区二区三区尤物 | 亚洲精品美女久久777777 | 欧美日韩网 | 精品一区二区三区免费毛片爱 |