we-script

让微信小程序支持加载远程 JavaScript 脚本并执行组件，支持 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 安装完成后，点击开发者工具中的菜单栏：工具 –> 构建 npm

step2 安装完成后，点击开发者工具中的菜单栏：工具 –> 项目详情 –> 本地设置 –> [勾选] 使用 npm 模块

在需要用的页面或组件的json文件添加声明，示例：

index.json

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

index.wxml

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

注：多个we-script会并行加载及无序执行，无法保证执行顺序。如：

// 并行加载及无序执行 <we-script src="url1" /> <we-script src="url2" /> <we-script src="url3" /> 

如需要确保执行顺序，应该使用数组，例如：

数组方式

<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加载和执行也是并行且无序的，因为小程序生命周期触发机制(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> 

重要： 远程加载执行的代码所生成的函数，变量等数据存储在we-script默认的上下文中，可通过onLoad事件获取默认上下文，或通过onInit事件自定义上下文。

示例：

we-script-demo

we-script 属性

• src

  类型：string | string[]

  要加载的远程脚本

• text

  类型：string | string[]

  需要执行的 JavaScript 脚本字符串，text 优先级高于 src (互斥)

• timeout

  类型：number 默认值：60000 毫秒

  设置每个远程脚本加载超时时间

• cache

  类型：boolean

  默认值：true

  是否启用加载缓存，缓存策略是以当前请求地址作为key，缓存周期为当前用户在使用期间的生命周期。

• once

  类型：boolean

  默认值：true

  相同上下文及相同地址的脚本只执行一次。

we-script 事件

• onInit

  类型：(e) => void

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

  初始事件，监听该事件可获取当前执行上下文或自定义执行上下文。

  示例：

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

• onLoad

  类型：(e) => void

  interface onLoadDetail {  context: {}; } 

  加载并执行成功后触发

• onError

  类型：(e) => void

  interface onErrorDetail {  error: any; } 

  加载失败或执行错误后触发

其他

• 该组件使用eval5来解析JavaScript语法，支持 ES5

• 上生产环境前别忘记给需要加载的地址配置合法域名

• we-script 内置类型及方法：

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; 

内置类型和当前运行 JavaScript 环境相关，如环境本身不支持则不支持！