基于Taro v3中js解釋器組件的案例分析

這篇文章主要介紹基于Taro v3中js解釋器組件的案例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

Github地址

基于Taro v3開(kāi)發(fā)，支持多端小程序動(dòng)態(tài)加載遠(yuǎn)程 JavaScript 腳本并執(zhí)行，支持 ES5 語(yǔ)法

最近更新內(nèi)容

• 新增useScriptContext獲取當(dāng)前執(zhí)行上下文
• 參數(shù)名稱調(diào)整：useCache-> cache
• 緩存策略調(diào)整
• 新增text屬性，可直接傳入js字符串
• src支持?jǐn)?shù)組，解決多層TaroScript嵌套問(wèn)題

Usage

npm install --save taro-script復(fù)制代碼

import TaroScript from "taro-script";

<TaroScript text="console.log(100+200)" />;復(fù)制代碼

import TaroScript from "taro-script";

<TaroScript src="https://xxxxx/xx.js">
    <View>Hello TaroScript</View>
</TaroScript>;復(fù)制代碼

注 1：同一taro-script只會(huì)執(zhí)行一次，也就是在componentDidMount后執(zhí)行，后續(xù)改變屬性是無(wú)效的。示例

function App({ url }) {
    // 只會(huì)在第一次創(chuàng)建后加載并執(zhí)行，后續(xù)組件的更新會(huì)忽略所有屬性變動(dòng)
    return <TaroScript src={url} />;
}復(fù)制代碼

注 2：多個(gè)taro-script會(huì)并行加載及無(wú)序執(zhí)行，無(wú)法保證順序。如：

// 并行加載及無(wú)序執(zhí)行
<TaroScript  src="path2" />
<TaroScript  src="path3" />
<TaroScript  src="path4" />復(fù)制代碼

如需要確保執(zhí)行順序，應(yīng)該使用數(shù)組或嵌套，例如：

數(shù)組方式(建議)

<TaroScript src={["path2", "path3", "path4"]} />復(fù)制代碼

或 嵌套方式

<TaroScript src="path2">
    <TaroScript src="path3">
        <TaroScript src="path4"></TaroScript>
    </TaroScript>
</TaroScript>復(fù)制代碼

globalContext

內(nèi)置的全局執(zhí)行上下文

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

<TaroScript text="var value = 100" />;復(fù)制代碼

此時(shí) globalContext.value 的值為 100

自定義context示例

import TaroScript from "taro-script";

const app = getApp();

<TaroScript context={app} text="var value = 100" />;復(fù)制代碼

此時(shí) app.value 的值為 100

TaroScript 屬性

src

類型：string | string[]

要加載的遠(yuǎn)程腳本

text

類型：string | string[]

需要執(zhí)行的 JavaScript 腳本字符串，text 優(yōu)先級(jí)高于 src

context

類型：object

默認(rèn)值：globalContext = {}

執(zhí)行上下文，默認(rèn)為globalContext

timeout

類型：number默認(rèn)值：10000 毫秒

設(shè)置每個(gè)遠(yuǎn)程腳本加載超時(shí)時(shí)間

onExecSuccess

類型：()=> void

腳本執(zhí)行成功后回調(diào)

onExecError

類型：(err:Error)=> void

腳本執(zhí)行錯(cuò)誤后回調(diào)

onLoad

類型：() => void

腳本加載完且執(zhí)行成功后回調(diào)，text存在時(shí)無(wú)效

onError

類型：(err: Error) => void

腳本加載失敗或腳本執(zhí)行錯(cuò)誤后回調(diào)，text存在時(shí)無(wú)效

fallback

類型：React.ReactNode

腳本加載中、加載失敗、執(zhí)行失敗的顯示內(nèi)容

cache

類型：boolean

默認(rèn)值：true

是否啟用加載緩存，緩存策略是已當(dāng)前請(qǐng)求地址作為key，緩存周期為當(dāng)前用戶在使用應(yīng)用程序的生命周期。

children

類型：React.ReactNode | ((context: T) => React.ReactNode)

加載完成后顯示的內(nèi)容，支持傳入函數(shù)第一個(gè)參數(shù)為腳本執(zhí)行的上下文

useScriptContext()

獲取當(dāng)前執(zhí)行上下文 hook

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

<TaroScript text="var a= 100">
    <Test />
</TaroScript>;

function Test() {
    const ctx = useScriptContext();
    return ctx.a; // 100
}復(fù)制代碼

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

動(dòng)態(tài)執(zhí)行給定的字符串腳本，并返回最后一個(gè)表達(dá)式的值

import { evalScript } from "taro-script";

const value = evalScript("100+200"); // 300復(fù)制代碼

其他

• 該組件使用eval5來(lái)解析JavaScript語(yǔ)法，支持 ES5

• 上生產(chǎn)環(huán)境前別忘記給需要加載的地址配置合法域名

• TaroScript 內(nèi)置類型及方法：

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,復(fù)制代碼

內(nèi)置類型和當(dāng)前運(yùn)行 JavaScript 環(huán)境相關(guān)，如環(huán)境本身不支持則不支持！

導(dǎo)入自定義方法或類型示例：

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

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

<TaroScript text="hello()"></TaroScript>;復(fù)制代碼

或自定義上下文

import TaroScript from "taro-script";

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

<TaroScript context={ctx} text="hello()"></TaroScript>;復(fù)制代碼

以上是基于Taro v3中js解釋器組件的案例分析的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！