taro-script 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
taro-script 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript TypeScript
操作系统: 跨平台
收录时间: 2020-09-07
提 交 者: 随心_

TaroScript

taro-script

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

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

Interface

interface TaroScriptProps<T = Record<any, any>> {
	/** 脚本执行根作用域及上下文环境 */
	context?: T;
	/** 脚本路径 */
	src?: string | string[];
	/** JavaScript字符串代码 */
	text?: string;
	/** 脚本加载并执行完后回调 */
	onLoad?: () => void;
	/** 脚本加载失败后回调 */
	onError?: (err: Error) => void;
	onExecSuccess?: () => void;
	onExecError?: (err: Error) => void;
	/** 加载脚本超时时间 */
	timeout?: number;
	/** 脚本加载中显示内容 */
	fallback?: React.ReactNode;
	/** 启用缓存 */
	cache?: boolean;
	children?: React.ReactNode | ((context: T) => React.ReactNode);
}

declare function evalScript<T extends Record<any, any>>(code: string, context?: T): any;

declare const globalContext: {};
declare function useScriptContext<T = Record<any, any>>(): T;
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

taro-script 的相关博客

【taro】-------------- Taro学习笔录(初识taro)-------------【劉】

一、taro介绍 Taro 是一套遵循 React 语法规范的 多端开发 解决方案。从web、小程序、React-Native... 当业务要求同时在不同的...

Taro

感谢支持ayqy个人订阅号,每周义务推送1篇(only unique one)原创精品博文,话题包括但不限于前端、Node、Android、数学(W...

【taro】--------------taro学习笔录{taro的不同(一)}-------------【劉】

(1)(H5中)taro设置元素高度不继承外部高度100%    taro自带元素设置过高度100%,但是通过自己书写元素的高度100%不继承...

[Taro] Taro 环境安装 (一)

Taro 环境安装 Taro是一个前端小程序框架,通过这个框架写一套代码,再通过 Taro 的编译工具,就可以将源代码分别编译出可以在...

Taro:使用taro完成小程序开发

前言:taro是一个可以很好实现一次开发,多端统一的框架,本文只介绍它小程序端开发的一些内容。 小程序项目搭建 gitup已经有...

[Taro] taro中定义以及使用全局变量

taro中定义以及使用全局变量 错误的姿势 // app.tsx文件中 class App extends Component { componentDidMount() { this.user...

Taro 常用 API

<style> table th:first-of-type { width: 300px; } </style> Taro 常用 API 说明 网址 Taro.getSystemInfoSync() 获取系统信...

taro http封装

taro http封装 src目录下新建service 创建api.js config.js http.js http.js import Taro from '@tarojs/taro' let token = ...

taro-script 的相关问答

还没有任何问答,马上提问

评论 (0)

加载中
更多评论
0 评论
6 收藏
分享
返回顶部
顶部