
让微信小程序支持加载远程 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事件自定义上下文。
示例:
src
类型:string | string[]
要加载的远程脚本
text
类型:string | string[]
需要执行的 Javascript 脚本字符串,text 优先级高于 src (互斥)
timeout
类型:number 默认值:60000 毫秒
设置每个远程脚本加载超时时间
cache
类型:boolean
默认值:
是否启用加载缓存,缓存策略是以当前请求地址作为key,缓存周期为当前用户在使用期间的生命周期。
once
类型:boolean
默认值:true
相同上下文及相同地址的脚本只执行一次。
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 环境相关,如环境本身不支持则不支持!
1 puzzle9 2020 年 9 月 29 日 道理我都懂 可是这个可以干嘛用呢 |
2 w88975 2020 年 9 月 30 日 via iPhone 同问 远程执行代码的场景有哪些呢,毕竟不是动态渲染,难道是远程加密函数?动态 api 升级? |
3 stevezhang 2020 年 9 月 30 日 无需审核即可发布 这还不 bug 么。。。 |