taro-script
基于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>;