taro-script 0.4 发布,了解基于Taro v3的js解释器组件

发布时间:2024-06-07
相关学习推荐:js视频教程
github地址
基于taro v3开发,支持多端小程序动态加载远程 javascript 脚本并执行,支持 es5 语法
最近更新内容新增usescriptcontext获取当前执行上下文参数名称调整:usecache-> cache缓存策略调整新增text属性,可直接传入js字符串src支持数组,解决多层taroscript嵌套问题usage
npm install --save taro-script复制代码import taroscript from "taro-script";<taroscript text="console.log(100 200)" />;复制代码import taroscript from "taro-script";<taroscript src="https://xxxxx/xx.js"> <view>hello taroscript</view></taroscript>;复制代码注 1:同一taro-script只会执行一次,也就是在componentdidmount后执行,后续改变属性是无效的。示例
function app({ url }) { // 只会在第一次创建后加载并执行,后续组件的更新会忽略所有属性变动 return <taroscript src={url} />;}复制代码注 2:多个taro-script会并行加载及无序执行,无法保证顺序。如:
// 并行加载及无序执行<taroscript src="path1" /><taroscript src="path2" /><taroscript src="path3" />复制代码如需要确保执行顺序,应该使用数组或嵌套,例如:
数组方式(建议)
<taroscript src={["path1", "path2", "path3"]} />复制代码或 嵌套方式
<taroscript src="path1"> <taroscript src="path2"> <taroscript src="path3"></taroscript> </taroscript></taroscript>复制代码globalcontext
内置的全局执行上下文
import taroscript, { globalcontext } from "taro-script";<taroscript text="var value = 100" />;复制代码此时 globalcontext.value 的值为 100
自定义context示例
import taroscript from "taro-script";const app = getapp();<taroscript context={app} text="var value = 100" />;复制代码此时 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
import taroscript, { usescriptcontext } from "taro-script";<taroscript text="var a= 100"> <test /></taroscript>;function test() { const ctx = usescriptcontext(); return ctx.a; // 100}复制代码evalscript(code: string, context?: {})
动态执行给定的字符串脚本,并返回最后一个表达式的值
import { evalscript } from "taro-script";const value = evalscript("100 200"); // 300复制代码其他
该组件使用eval5来解析javascript语法,支持 es5
上生产环境前别忘记给需要加载的地址配置合法域名
taroscript 内置类型及方法:
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,复制代码内置类型和当前运行 javascript 环境相关,如环境本身不支持则不支持!
导入自定义方法或类型示例:
import taroscript, { globalcontext } from "taro-script";globalcontext.hello = function(){ console.log('hello taro-script')}<taroscript text="hello()"></taroscript>;复制代码或自定义上下文
import taroscript from "taro-script";const ctx = { hello(){ console.log('hello taro-script') }}<taroscript context={ctx} text="hello()"></taroscript>;复制代码想了解更多编程学习,敬请关注php培训栏目!
上一个:迅尔仪表|燃气公司商业户预付费计量应用案例
下一个:2022年农历八月的结婚领证好日子一览

苹果在12是什么时候发布和发售的(iphone12什么时间正式发售)
如何正确使用颗粒过滤性测试仪
东京浅草购物攻略
液晶显示器黑屏怎么回事(液晶显示器黑屏故障的维修方法)
RTT25R210FTE现货库存,最新价格
高速离心喷雾干燥机相关疑问
身份证的注销需要哪些手续
海参雪耳核桃汤怎么做 海参雪耳核桃汤做法
高低频长途对称电缆,HEYFLT23
何谓枣树顶端优势