taro-script 0.4 released, learn about the js interpreter component based on Taro v3

Related learning recommendations: js video tutorial

Github address

Based on Taro v3 development, supports multi-terminal small programs to dynamically load remote JavaScript scripts and execute them, supports ES5 syntax

Latest updates

• Newly added useScriptContextGet the current execution context
• Parameter name adjustment:useCache-> cache
• Cache strategy adjustment
• New text Attribute, you can directly pass in the js string
• srcSupports arrays to solve the multi-layer TaroScript nesting problem

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>;复制代码

Note 1: The same taro-script will only be executed once, that is, after componentDidMount. Subsequent changes to the properties will be invalid. Example

function App({ url }) {
    // 只会在第一次创建后加载并执行，后续组件的更新会忽略所有属性变动
    return <TaroScript src={url} />;
}复制代码

Note 2: Multiple taro-script will be loaded in parallel and executed out of order, and the order cannot be guaranteed. For example:

// 并行加载及无序执行
<TaroScript  src="path1" />
<TaroScript  src="path2" />
<TaroScript  src="path3" />复制代码

If you need to ensure the order of execution, you should use an array or nesting, for example:

Array method (recommended)

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

Or nested way

<TaroScript src="path1">
    <TaroScript src="path2">
        <TaroScript src="path3"></TaroScript>
    </TaroScript>
</TaroScript>复制代码

globalContext

Built-in global execution context

import TaroScript, { globalContext } from "taro-script";

<TaroScript text="var value = 100" />;复制代码

At this timeglobalContext. The value of value is 100

CustomcontextExample

import TaroScript from "taro-script";

const app = getApp();

<TaroScript context={app} text="var value = 100" />;复制代码

this When the value of app.value is 100

TaroScript attribute

src

Type: string | string[]

Remote script to load

text

Type ：string | string[]

The JavaScript script string that needs to be executed, text has a higher priority than src

context

Type: object

Default value: globalContext = {}

Execution context, Default is globalContext

##timeout

Type:

numberDefault value: 10000 milliseconds

Set each remote script loading timeout

onExecSuccess

Type:

()=> void

Callback after successful script execution

onExecError

Type:

(err:Error)=> void

Script execution Callback after error

onLoad

Type:

() => void

Callback after the script is loaded and executed successfully ,

text is invalid when it exists

onError

Type:

(err: Error) => void

Callback after script loading failure or script execution error,

text is invalid when it exists

fallback

Type:

React.ReactNode

Display content of script loading, loading failure, and execution failure

cache

Type:

boolean

Default value:

true

Whether to enable load caching, the caching policy is to use the current request address as

key, and the caching period is the current user using the application Program life cycle.

children

Type:

React.ReactNode | ((context: T) => React.ReactNode)

The content displayed after loading is completed, supports passing in

function The first parameter is the context of script execution

useScriptContext()

Get the current execution context 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?: {})

Dynamicly execute the given string script and return The value of the last expression

import { evalScript } from "taro-script";

const value = evalScript("100+200"); // 300复制代码

Others

This component uses eval5 to parse
• JavaScript

  syntax and supports ES5

• Don’t forget to configure the legal domain name for the address that needs to be loaded before going to the production environment

TaroScript built-in types and methods:

• 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,复制代码

The built-in types are related to the current running JavaScript environment. If the environment itself does not support it, it is not supported!

Import a custom method or type example:

import TaroScript, { globalContext } from "taro-script";

globalContext.hello = function(){
  console.log('hello taro-script')
}

<TaroScript text="hello()"></TaroScript>;复制代码

or custom context

import TaroScript from "taro-script";

const ctx = {
  hello(){
    console.log('hello taro-script')
  }
}

<TaroScript context={ctx} text="hello()"></TaroScript>;复制代码

If you want to learn more about programming, please stay tuned

phptraining

column!

The above is the detailed content of taro-script 0.4 released, learn about the js interpreter component based on Taro v3. For more information, please follow other related articles on the PHP Chinese website!