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

[nobo]

taro-script

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>;

[bertonzh]

搞出 ES5 解释器了吗？这个厉害了啊！

[nobo]

@bertonzh ES5 解释器 https://github.com/bplok20010/eval5