taro-script 0.4 출시, Taro v3 기반의 js 인터프리터 구성 요소에 대해 알아보세요.

관련 학습 권장 사항: js 비디오 튜토리얼

Github 주소

Taro v3를 기반으로 개발되었으며, 원격 JavaScript 스크립트를 동적으로 로드하고 실행할 수 있는 다중 터미널 소형 프로그램을 지원합니다. 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语法，支持 ES5ES5 구문 지원

최근 업데이트된 콘텐츠

• 현재 실행 컨텍스트를 가져오기 위해 useScriptContext를 추가했습니다

  매개변수 이름 조정: useCache-> 캐시

  캐시 전략 조정
• js 문자열을 직접 전달할 수 있는 새로운 text 속성
  src 다단계 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,复制代码

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

참고 1

: 와 동일 taro-scriptcomComponentDidMount 이후에 한 번만 실행되며 이후 속성 변경은 유효하지 않습니다. 예시

rrreee

참고 2

: 여러 taro-script가 병렬로 로드되어 순서 없이 실행되므로 순서를 보장할 수 없습니다. 예:

rrreee

실행 순서를 보장해야 하는 경우 배열 또는 중첩을 사용해야 합니다. 예:

배열 방법(권장)

🎜rrreee🎜또는 중첩 방법🎜rrreee

globalContext

🎜내장된 전역 실행 컨텍스트🎜rrreee🎜🎜이때, globalContext.value의 값은 100🎜🎜🎜 🎜맞춤형 context 예시🎜🎜rrreee🎜🎜이때 app.value의 값은 100입니다. >🎜🎜

TaroScript 속성

src h3>🎜Type: string | string []🎜🎜로드할 원격 스크립트🎜

text

🎜Type : string | string[]🎜🎜실행해야 하는 JavaScript 스크립트 문자열, <code>text는 src🎜

컨텍스트

🎜유형: 객체🎜🎜기본값: globalContext = {}🎜🎜실행 컨텍스트 , 기본값은 globalContext 🎜

timeout

🎜Type: number기본값: 10000 밀리초🎜🎜 각 원격 스크립트 로딩 시간 초과 설정 🎜

onExecSuccess

🎜Type: ()= > void🎜 🎜성공적인 스크립트 실행 후 콜백🎜

onExecError

🎜유형: (err:Error) => 무효 🎜🎜스크립트 실행 오류 후 콜백🎜

onLoad

🎜유형: () =&gt ; void🎜🎜 스크립트가 성공적으로 로드되고 실행된 후의 콜백은 text가 존재하는 경우 유효하지 않습니다🎜

onError code>

🎜유형: (err: Error) => void🎜🎜스크립트 로딩 실패 또는 스크립트 실행 오류 후 콜백, text가 존재하는 경우 유효하지 않음🎜 fallback 🎜Type: React.ReactNode🎜🎜스크립트 로딩, 로딩 실패, 실행 실패 내용 표시 🎜

캐시

🎜유형: 부울🎜🎜기본값: true🎜 🎜캐시 로드 활성화 여부는 현재 캐시 정책이 적용됩니다. 요청 주소는 키로 사용되며, 캐시 기간은 현재 사용자가 애플리케이션을 사용하는 라이프사이클입니다. 🎜

children

🎜Type: React.ReactNode | ((context: T) => React.ReactNode) code>🎜🎜로드가 완료된 후 표시되는 콘텐츠는 함수 전달을 지원합니다. 첫 번째 매개변수는 스크립트 실행의 context입니다. -16" >useScriptContext()🎜현재 실행 컨텍스트 후크 가져오기🎜rrreee

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

🎜주어진 문자열 스크립트를 동적으로 실행하고 마지막 표현식의 값을 반환합니다🎜rrreee

Other

🎜 🎜 이 구성 요소는 eval5를 사용하여 JavaScript 구문을 구문 분석하고 ES5🎜🎜🎜🎜🎜로드하기 전에 로드해야 하는 주소에 대한 법적 도메인 이름을 구성하는 것을 잊지 마세요. 프로덕션 환경으로 이동🎜🎜🎜🎜🎜TaroScript 내장 유형 및 메소드: 🎜🎜🎜rrreee🎜🎜 내장 유형은 현재 실행 중인 JavaScript 환경과 관련되어 있으며 환경 자체가 지원하지 않는 경우 지원되지 않습니다. ! 🎜🎜🎜사용자 정의 메서드 또는 유형 가져오기의 예: 🎜rrreee🎜또는 사용자 정의 컨텍스트🎜rrreee🎜🎜프로그래밍에 대해 자세히 알아보려면 🎜php training🎜 칼럼에 주목하세요! 🎜🎜🎜

위 내용은 taro-script 0.4 출시, Taro v3 기반의 js 인터프리터 구성 요소에 대해 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!