1. 程式人生 > >微信小程式使用第三方庫(第三方js)問題

微信小程式使用第三方庫(第三方js)問題

  原文:https://blog.csdn.net/u012421719/article/details/56676801          

比如很多人會有這樣的問題:

小程式怎樣引用第三方js呢?
第三方js是封裝好的類庫 想引用進來例項化使用

這個帖子就綜合一下所有相關的知識,做一個整合,以便大家能夠集中了了解;我覺得這個還是應該讓大家瞭解的知識;

提示:小程式不支援 window物件和document物件;

一:rpn.js:使用rpn.js實現eval函式功能

http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1513

二: @guyoung 系列文章
使用Underscore.js: http://www.wxapp-union.com/portal.php?mod=view&aid=145
使用Immutable.js: http://www.wxapp-union.com/portal.php?mod=view&aid=155
使用UUID、Base64、Chance: http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1198

擴充套件微信小程式框架功能(1)——Promise
ES6 對 Promise 有了原生的支援,但微信開發者工具更新版本(0.11.112200)後, 移除了開發者工具對 ES6 中Promise 特性原生的支援, 需要引入第三方的 Promise 庫。

擴充套件微信小程式框架功能(2)——Generator
Generator函式是ES6提供的一種非同步程式設計解決方案,語法行為與傳統函式完全不同。

擴充套件微信小程式框架功能(3)——函式功能增強
Underscore.js 和 Lodash 是最常用的JavaScript庫。

擴充套件微信小程式框架功能(4)——Immutable.js
Immutable.js 是 Facebook 開發的不可變資料集合。Immutable
Data(不可變資料)一旦建立就不能被修改。通過使用Immutable
Data,可以更容易的處理快取、回退、資料變化檢測等問題,應用開發更簡單。

擴充套件微信小程式框架功能(5)——Redux
​Redux 是 JavaScript 狀態容器,提供可預測化的狀態管理。

擴充套件微信小程式框架功能(6)—日期時間
Moment.js是一個JavaScript的日期、時間處理工具類,其對於JavaScript的日期時間處理功能非常強悍和全面。可以用在瀏覽器環境中使用,也可以在Node.js中。

擴充套件微信小程式框架功能(7)——正則表示式
XRegExp 是一個開源的 JavaScript庫,提供一個引數化、可擴充套件的支援各種瀏覽器的正則表示式的實現庫,支援附加語法、標誌以及方法。

擴充套件微信小程式框架功能(8)——Xml處理
x2js是一個 實現 XML 與 JavaScript 物件之間相互轉換的工具庫。

擴充套件微信小程式框架功能(9)——加解密
node-uuid可以快速地生成符合規範 的 UUID。js-base64可以實現Base64編碼和解碼。crypto-js可以非常方便地在 JavaScript 進行加解密。

擴充套件微信小程式框架功能(10)——測試輔助
Chance是一個 JavaScript 隨機數生成工具。Mock.js可以生成隨機資料,攔截 Ajax 請求。

三:moment
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2268


四:相關討論
相關討論一: 微信小程式使用第三方庫問題?
專案中需要使用base4,克隆了一個下來https://github.com/dankogai/j...
因為小程式目前不支援直接引入 node_modules 所以我寫的是路徑
我在app.js里根據路徑寫
require ( './node_module/js-base64/base64.js' ); 但是報錯 WAService. js : 3   TypeError : Cannot read property  'Base64'   of  undefined答:@jayzou
因為原始碼裡面並沒有exports Base64物件出來,自己手動exports就可以了
目前來說,我也沒找到好的方法,只能修改原始碼強制匯出 小程式的執行時環境既不是Node.js也不是瀏覽器,也沒有暴露全域性物件。。。
在Base64原始碼的最開始
global = {}; //在最開始加上這個
var _Base64 = global.Base64;
在最後
// that's it!
if (global['Meteor']) {
   Base64 = global.Base64; // for normal export in Meteor.js
}

module.exports = global.Base64; //最後加上這個
這樣就能用了
import base64 from './node_module/js-base64/base64.js'

相關討論二: 如何引入第三方外掛(網上的方法已經試過) 引入第三方外掛,網上有人說需要進行UMD打包,打包之後引入還是不行。有的說需要暴露介面,對外掛程式碼進行改造,加入了 module.exports = function ,然後通過 require 引入,但是引入後還是報錯。
個人引用的是strophe.js檔案,求大神告知解決辦法
 
去看了一下Strophe的原始碼。不知道你用的什麼版本的。我看原始碼最後是這樣的
function (Strophe, build, msg, iq, pres) {
    window.Strophe = Strophe;
    window.$build = build;
    window.$msg = msg;
    window.$iq = iq;
    window.$pres = pres;
};
小程式中宿主環境不是瀏覽器,所以沒有window。這樣寫當然是不行的。你可以嘗試修改為

function (Strophe, build, msg, iq, pres) {
    var global = {}
    global.Strophe = Strophe;
    global.$build = build;
    global.$msg = msg;
    global.$iq = iq;
    global.$pres = pres;
    module.exports = global
};
使用的時候:
var Strophe = require('./pathStrophe.js').Strophe
注:小程式和web程式設計是有區別的。我看了一下這個庫的原始碼,使用了很多document, xhr之類的,這些是不支援的哦。可以查閱官方文件。
Storophe原始碼

相關討論三: 小程式模組化只支援exports和module.exports嗎? CMD模式 
require("test.js"); a();//可以直接使用
小程式報錯 WAService.js:1 thirdScriptError setMaxDigits is not defined;at "pages/index/index" 
page onRequest function ReferenceError: a is not defined

test.js function a(){ .......
}
function b(){ .......
}
目前是在微信小程式使用第三方的test.js,在之前的H5專案是可以使用test.js的?目前就是不想去用exports和module.exports改變test.js。
需要加上從當前頁面到該檔案的完整路由 如:../../common/test.js -----當前頁面位置的前一個前一個資料夾的common資料夾的test.js 檔案 var test = require("test.js"); test.a();
test.js  中 module.exports = {a:a}


相關討論四: 問題: 小程式如何匯入第三方的JS工具庫 怎樣匯入一個第三方的JS工具庫 fontKit
使用require函式
var util = require('../../utils/util.js')



簡易教程:
引用其他js裡的方法: http://www.wxapp-union.com/portal.php?mod=view&aid=1339


相關文章:
微信小程式require 引用 BASE64.JS 失敗問題的分析解決
微信小程式的require機制淺析

微信小程式元件化方案示例