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


本文摘自PHP中文网,作者coldplay.xixi,侵删。

相关学习推荐:js视频教程

Github地址

基于Taro v3开发,支持多端小程序动态加载远程 JavaScript 脚本并执行,支持 ES5 语法

最近更新内容

  • 新增useScriptContext获取当前执行上下文
  • 参数名称调整:useCache-> cache
  • 缓存策略调整
  • 新增text属性,可直接传入js字符串
  • src支持数组,解决多层TaroScript嵌套问题

Usage

1

npm install --save taro-script复制代码

1

2

3

import TaroScript from "taro-script";

 

<TaroScript text="console.log(100+200)" />;复制代码

1

2

3

4

5

import TaroScript from "taro-script";

 

<TaroScript src="https://xxxxx/xx.js">

    <View>Hello TaroScript</View>

</TaroScript>;复制代码

注 1:同一taro-script只会执行一次,也就是在componentDidMount后执行,后续改变属性是无效的。示例

1

2

3

4

function App({ url }) {

    // 只会在第一次创建后加载并执行,后续组件的更新会忽略所有属性变动

    return <TaroScript src={url} />;

}复制代码

注 2:多个taro-script会并行加载及无序执行,无法保证顺序。如:

1

2

3

4

// 并行加载及无序执行

<TaroScript  src="path1" />

<TaroScript  src="path2" />

<TaroScript  src="path3" />复制代码

如需要确保执行顺序,应该使用数组或嵌套,例如:

数组方式(建议)

1

<TaroScript src={["path1", "path2", "path3"]} />复制代码

或 嵌套方式

1

2

3

4

5

<TaroScript src="path1">

    <TaroScript src="path2">

        <TaroScript src="path3"></TaroScript>

    </TaroScript>

</TaroScript>复制代码

globalContext

内置的全局执行上下文

1

2

3

import TaroScript, { globalContext } from "taro-script";

 

<TaroScript text="var value = 100" />;复制代码

此时 globalContext.value 的值为 100

自定义context示例

1

2

3

4

5

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

1

2

3

4

5

6

7

8

9

10

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?: {})

动态执行给定的字符串脚本,并返回最后一个表达式的值

1

2

3

import { evalScript } from "taro-script";

 

const value = evalScript("100+200"); // 300复制代码

其他

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

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

  • TaroScript 内置类型及方法:

1

2

3

4

5

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 环境相关,如环境本身不支持则不支持!

导入自定义方法或类型示例:

1

2

3

4

5

6

7

import TaroScript, { globalContext } from "taro-script";

 

globalContext.hello = function(){

  console.log('hello taro-script')

}

 

<TaroScript text="hello()"></TaroScript>;复制代码

或自定义上下文

1

2

3

4

5

6

7

8

9

import TaroScript from "taro-script";

 

const ctx = {

  hello(){

    console.log('hello taro-script')

  }

}

 

<TaroScript context={ctx} text="hello()"></TaroScript>;复制代码

想了解更多编程学习,敬请关注php培训栏目!

以上就是taro-script 0.4 发布,了解基于Taro v3的js解释器组件的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

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

更多相关阅读请进入《Taro》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...