本文摘自PHP中文网,作者coldplay.xixi,侵删。
相关学习推荐:js视频教程
Github地址
基于Taro v3
开发,支持多端小程序动态加载远程 JavaScript 脚本并执行,支持 ES5 语法
最近更新内容
- 新增
useScriptContext
获取当前执行上下文 - 参数名称调整:useCache-> cache
- 缓存策略调整
- 新增
text
属性,可直接传入js字符串 src
支持数组,解决多层TaroScript嵌套问题
Usage
1 |
|
1 2 3 |
|
1 2 3 4 5 |
|
注 1:同一taro-script
只会执行一次,也就是在componentDidMount
后执行,后续改变属性是无效的。示例
1 2 3 4 |
|
注 2:多个taro-script
会并行加载及无序执行,无法保证顺序。如:
1 2 3 4 |
|
如需要确保执行顺序,应该使用数组或嵌套,例如:
数组方式(建议)
1 |
|
或 嵌套方式
1 2 3 4 5 |
|
globalContext
内置的全局执行上下文
1 2 3 |
|
此时 globalContext.value
的值为 100
自定义context
示例
1 2 3 4 5 |
|
此时 app.value
的值为 100
TaroScript
属性
src
类型:string | string[]
要加载的远程脚本
text
类型:string | string[]
需要执行的 JavaScript 脚本字符串,text
优先级高于 src
context
类型:object
默认值:globalContext = {}
执行上下文,默认为globalContext
timeout
类型:number
默认值:10000
毫秒
设置每个远程脚本加载超时时间
onExecSuccess
类型:()=> void
脚本执行成功后回调
onExecError
类型:(err:Error)=> void
脚本执行错误后回调
onLoad
类型:() => void
脚本加载完且执行成功后回调,text
存在时无效
onError
类型:(err: Error) => void
脚本加载失败或脚本执行错误后回调,text
存在时无效
fallback
类型:React.ReactNode
脚本加载中、加载失败、执行失败的显示内容
cache
类型:boolean
默认值:true
是否启用加载缓存,缓存策略是已当前请求地址作为key
,缓存周期为当前用户在使用应用程序的生命周期。
children
类型:React.ReactNode | ((context: T) => React.ReactNode)
加载完成后显示的内容,支持传入函数
第一个参数为脚本执行的上下文
useScriptContext()
获取当前执行上下文 hook
1 2 3 4 5 6 7 8 9 10 |
|
evalScript(code: string, context?: {})
动态执行给定的字符串脚本,并返回最后一个表达式的值
1 2 3 |
|
其他
该组件使用eval5来解析
JavaScript
语法,支持ES5
上生产环境前别忘记给需要加载的地址配置合法域名
TaroScript 内置类型及方法:
1 2 3 4 5 |
|
内置类型和当前运行 JavaScript 环境相关,如环境本身不支持则不支持!
导入自定义方法或类型示例:
1 2 3 4 5 6 7 |
|
或自定义上下文
1 2 3 4 5 6 7 8 9 |
|
想了解更多编程学习,敬请关注php培训栏目!
以上就是taro-script 0.4 发布,了解基于Taro v3的js解释器组件的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Taro-script 0.4 发布,了解基于Taro v3的js解释器组件
更多相关阅读请进入《Taro》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者