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

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

Github地址

基于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="path2" />
<TaroScript  src="path3" />
<TaroScript  src="path4" />復制代碼

如需要確保執行順序，應該使用數組或嵌套，例如：

數組方式(建議)

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

或 嵌套方式

<TaroScript src="path2">
    <TaroScript src="path3">
        <TaroScript src="path4"></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>;復制代碼

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