基于Taro v3中js解释器组件的案例分析

这篇文章主要介绍基于Taro v3中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="path2" />
<TaroScript  src="path3" />
<TaroScript  src="path4" />复制代码

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

数组方式(建议)

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

或 嵌套方式

<TaroScript src="path2">
    <TaroScript src="path3">
        <TaroScript src="path4"></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>;复制代码

以上是基于Taro v3中js解释器组件的案例分析的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！