taro-script

Github地址

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

最近更新内容

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

Usage

  1. npm install --save taro-script
  1. import TaroScript from "taro-script";
  2. <TaroScript text="console.log(100+200)" />;
  1. import TaroScript from "taro-script";
  2. <TaroScript src="https://xxxxx/xx.js">
  3. <View>Hello TaroScript</View>
  4. </TaroScript>;

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

  1. function App({ url }) {
  2. // 只会在第一次创建后加载并执行,后续组件的更新会忽略所有属性变动
  3. return <TaroScript src={url} />;
  4. }

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

  1. // 并行加载及无序执行
  2. <TaroScript src="path1" />
  3. <TaroScript src="path2" />
  4. <TaroScript src="path3" />

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

数组方式(建议)

  1. <TaroScript src={["path1", "path2", "path3"]} />

或 嵌套方式

  1. <TaroScript src="path1">
  2. <TaroScript src="path2">
  3. <TaroScript src="path3"></TaroScript>
  4. </TaroScript>
  5. </TaroScript>

globalContext

内置的全局执行上下文

  1. import TaroScript, { globalContext } from "taro-script";
  2. <TaroScript text="var value = 100" />;

此时 globalContext.value 的值为 100

自定义context示例

  1. import TaroScript from "taro-script";
  2. const app = getApp();
  3. <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. import TaroScript, { useScriptContext } from "taro-script";
  2. <TaroScript text="var a= 100">
  3. <Test />
  4. </TaroScript>;
  5. function Test() {
  6. const ctx = useScriptContext();
  7. return ctx.a; // 100
  8. }

evalScript(code: string, context?: {})

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

  1. import { evalScript } from "taro-script";
  2. const value = evalScript("100+200"); // 300

其他

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

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

  • TaroScript 内置类型及方法:

  1. NaN,
  2. Infinity,
  3. undefined,
  4. null,
  5. Object,
  6. Array,
  7. String,
  8. Boolean,
  9. Number,
  10. Date,
  11. RegExp,
  12. Error,
  13. URIError,
  14. TypeError,
  15. RangeError,
  16. SyntaxError,
  17. ReferenceError,
  18. Math,
  19. parseInt,
  20. parseFloat,
  21. isNaN,
  22. isFinite,
  23. decodeURI,
  24. decodeURIComponent,
  25. encodeURI,
  26. encodeURIComponent,
  27. escape,
  28. unescape,
  29. eval,
  30. Function,
  31. console,
  32. setTimeout,
  33. clearTimeout,
  34. setInterval,
  35. clearInterval,

内置类型和当前运行 JavaScript 环境相关,如环境本身不支持则不支持!

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

  1. import TaroScript, { globalContext } from "taro-script";
  2. globalContext.hello = function(){
  3. console.log('hello taro-script')
  4. }
  5. <TaroScript text="hello()"></TaroScript>;

或自定义上下文

  1. import TaroScript from "taro-script";
  2. const ctx = {
  3. hello(){
  4. console.log('hello taro-script')
  5. }
  6. }
  7. <TaroScript context={ctx} text="hello()"></TaroScript>;

taro-script 0.4 发布,基于Taro v3的js解释器组件的更多相关文章

  1. Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间

    项目体积是困扰小程序开发者的一大问题,如果开发者使用 Taro React 进行开发,更是不得不引入接近 100K 的 React 相关依赖,这让项目体积变得更加捉襟见肘.因此,Taro v3.4 的 ...

  2. Taro 3 正式版发布:开放式跨端跨框架解决方案

    作者:凹凸曼 - yuche 从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验.今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望 Tar ...

  3. 用 React 编写的基于Taro + Dva构建的适配不同端(微信小程序、H5、React-Native 等)的时装衣橱

    前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...

  4. Taro 3.5 canary 发布:支持适配 鸿蒙

    一.背景 鸿蒙作为华为自研开发的一款可以实现万物互联的操作系统,一经推出就受到了很大的关注,被国人寄予了厚望.而鸿蒙也没让人失望,今年 Harmony2.0 正式推出供用户进行升级之后,在短短的三个月 ...

  5. Apache Kylin v3.0.0-alpha 发布

    Apache Kylin v3.0.0-alpha 发布 Apr 19, 2019 • Shaofeng Shi 近日 Apache Kylin 社区很高兴地宣布,Apache Kylin v3.0. ...

  6. 基于Taro与Typescript开发的网易云音乐小程序

    基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...

  7. 基于Taro与typescript开发的网易云音乐小程序(持续更新)

    基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...

  8. 前后端分离后台管理系统 Gfast v3.0 全新发布

    GFast V3.0 平台简介 基于全新Go Frame 2.0+Vue3+Element Plus开发的全栈前后端分离的管理系统 前端采用vue-next-admin .Vue.Element UI ...

  9. 迷你MVVM框架 avalonjs 0.85发布

    迷你MVVM框架 avalonjs 0.85发布 本版本对循环绑定做了巨大改进,感谢@soom, @limodou, @ztz, @Gaubee 提供的大量测试文件. fix scanNodes, 在 ...

随机推荐

  1. NodeJs nrm 和 nvm

    nrm 和 nvm nrm (npm registry manager)是npm的镜像源管理工具 nvm (node version manager)是nodejs的版本管理工具 nrm # nrm ...

  2. Java基于SSM的个人博客系统(源码 包含前后台)

    @ 目录 系统简介 系统运行截图 核心代码 写在最后 系统简介 技术点:Java.JSP.SSM框架,实现了个人博客系统 用户角色分为:普通用户.管理员.系统管理员 功能:发博客.博客分类.博客删除. ...

  3. 为 Eureka 添加 Http Basic 认证

    简介 在网络世界中,任何网络中的服务都是不安全的,为了使我们的 Eureka 服务更加安全,我们可以添加各种各样的认证方式,以使客户端在提供相应的证明之后才能够注册到 Eureka 中.而这次我们就添 ...

  4. IOS 崩溃原因统计 2014-07-12 10:13

    注意: 1,释放自己的autorelease对象,app会crash: 2,释放系统的autorelease对象,app会crash:   第一种 情况有现象如下: 声明一个 对象 A* obj:把o ...

  5. 【算法•日更•第四十三期】QQ for linux

    废话不多说,直接看一张图: 没错,这是QQ,但是这有什么稀奇的?但是在Linux上使用QQ就很稀奇了. 众所周知,腾讯早就已经对Linux下的QQ和微信停止了服务,即便是网页版也不能用,通信这一直是小 ...

  6. Salesforce学习笔记之lwc

    1.在Flow中使用Lightning Web Component(lwc)时,发现一个问题.给这个组件设置了一个输入参数,其值取自前一个Screen.第一次运行时,参数的值正确,但是如果这时退回前一 ...

  7. python 3.7 jupyter中安装 docx报错

    from docx import Document报错: Import Error: No module named ‘exceptions‘ 解决办法: 使用下面的命令重新安装docx !pip i ...

  8. python字典的增删改查

    字典dict 知识点: {}括起来,以键值对形式存储的容器性数据类型: 键-必须是不可变数据类型,且是唯一的: -值可以是任意数据类型.对象. 优点:关联性强,查询速度快. 缺点:以空间换时间. 字典 ...

  9. C++ 2的幂次方表示

    [题目描述] 任何一个正整数都可以用2的幂次方表示.例如: 137=27+23+20 同时约定方次用括号来表示,即ab可表示为a(b).由此可知,137可表示为: 2(7)+2(3)+2(0) 进一步 ...

  10. 笔记:安装VM Tools、vim编辑器、压缩包、Linux用户管理

    一.VM Tools安装 1.作用:方便我们在虚拟机和宿主机之间复制数据或移动文件等. 2.安装步骤: step1:在菜单栏找到虚拟机---->找到安装vm tools ,点击: step2:进 ...