we-script微信小程序加載遠程 JavaScript 腳本

讓微信小程序支持加載遠程 JavaScript 腳本并執(zhí)行組件，支持 ES5 語法。

Github地址：https://github.com/bplok20010/we-script

使用

小程序如何使用 npm 包，官方文檔：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

npm install --save we-script

step1 安裝完成后，點擊開發(fā)者工具中的菜單欄：工具 --> 構(gòu)建 npm

step2 安裝完成后，點擊開發(fā)者工具中的菜單欄：工具 --> 項目詳情 --> 本地設置 --> [勾選] 使用 npm 模塊

在需要用的頁面或組件的json文件添加聲明，示例：

index.json

{
  "usingComponents": {
    "we-script": "we-script"
  }
}

index.wxml

<we-script src="url">
  <view>hello we-script<view>
</we-script>

注：多個we-script會并行加載及無序執(zhí)行，無法保證執(zhí)行順序。如：

// 并行加載及無序執(zhí)行
<we-script src="url1" />
<we-script src="url2" />
<we-script src="url3" />

如需要確保執(zhí)行順序，應該使用數(shù)組，例如：

數(shù)組方式

<we-script src="{{[url1,url2,url3]}}">
  <view>hello we-script<view>
</we-script>

we-script也支持嵌套，如：

<we-script  src="url1">
  <we-script src="url2">
    <view>hello we-script<view>
  </we-script>
</we-script>

注意： 在嵌套的情況下we-script加載和執(zhí)行也是并行且無序的，因為小程序生命周期觸發(fā)機制(BUG?)導致，如果想在嵌套模式下保證順序，需要自己手動控制，示例：

<we-script bind:onLoad="loadScript" src="url1">
  <we-script wx:if="url1_load_success" src="url2">
    <view>hello we-script<view>
  </we-script>
</we-script>

重要： 遠程加載執(zhí)行的代碼所生成的函數(shù)，變量等數(shù)據(jù)存儲在we-script默認的上下文中，可通過onLoad事件獲取默認上下文，或通過onInit事件自定義上下文。

示例：

we-script-demo

we-script 屬性

• src

  類型：string | string[]

  要加載的遠程腳本

• text

  類型：string | string[]

  需要執(zhí)行的 JavaScript 腳本字符串，text 優(yōu)先級高于 src (互斥)

• timeout

  類型：number
  默認值：60000 毫秒

  設置每個遠程腳本加載超時時間

• cache

  類型：boolean

  默認值：true

  是否啟用加載緩存，緩存策略是以當前請求地址作為key，緩存周期為當前用戶在使用期間的生命周期。

• once

  類型：boolean

  默認值：true

  相同上下文及相同地址的腳本只執(zhí)行一次。

we-script 事件

• onInit

  類型：(e) => void

  interface OnInitDetail {
  	getContext: () => {};
  	setContext: (context: {}) => void;
  }
  

  初始事件，監(jiān)聽該事件可獲取當前執(zhí)行上下文或自定義執(zhí)行上下文。

  示例：

  // index.js
  {
    onInit(e){
      // 自定義執(zhí)行上下文
      e.detail.setContext({
        value: 100
      })
    }
  }
  // index.wxml
  <we-script src="url" bind:onInit="onInit" />
  

• onLoad

  類型：(e) => void

  interface onLoadDetail {
  	context: {};
  }
  

  加載并執(zhí)行成功后觸發(fā)

• onError

  類型：(e) => void

  interface onErrorDetail {
  	error: any;
  }
  

  加載失敗或執(zhí)行錯誤后觸發(fā)

其他

• 該組件使用eval5來解析JavaScript語法，支持 ES5

• 上生產(chǎn)環(huán)境前別忘記給需要加載的地址配置合法域名

• we-script 內(nèi)置類型及方法：

NaN;
Infinity;
undefined;
null;
Object;
Array;
String;
Boolean;
Number;
Date;
RegExp;
Error;
URIError;
TypeError;
RangeError;
SyntaxError;
ReferenceError;
Math;
parseInt;
parseFloat;
isNaN;
isFinite;
decodeURI;
decodeURIComponent;
encodeURI;
encodeURIComponent;
escape;
unescape;
eval;
Function;
console;
setTimeout;
clearTimeout;
setInterval;
clearInterval;
wx;

內(nèi)置類型和當前運行 JavaScript 環(huán)境相關，如環(huán)境本身不支持則不支持！