基于Tarov3中js解釋器組件的案例分析-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、網(wǎng)站建設(shè)與策劃設(shè)計,塔什庫爾干塔吉克網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:塔什庫爾干塔吉克等地區(qū)。塔什庫爾干塔吉克做網(wǎng)站價格咨詢:028-86922220

Github地址

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

最近更新內(nèi)容

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

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只會執(zhí)行一次，也就是在componentDidMount后執(zhí)行，后續(xù)改變屬性是無效的。示例

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

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

// 并行加載及無序執(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ù)制代碼

此時 globalContext.value 的值為 100

自定義context示例

import TaroScript from "taro-script";

const app = getApp();

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

此時 app.value 的值為 100

TaroScript 屬性

src

類型：string | string[]

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

text

類型：string | string[]

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

context

類型：object

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

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

timeout

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

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

onExecSuccess

類型：()=> void

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

onExecError

類型：(err:Error)=> void

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

onLoad

類型：() => void

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

onError

類型：(err: Error) => void

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

fallback

類型：React.ReactNode

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

cache

類型：boolean

默認(rèn)值：true

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

children

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

加載完成后顯示的內(nèi)容，支持傳入函數(shù)第一個參數(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?: {})

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

import { evalScript } from "taro-script";

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

其他

• 該組件使用eval5來解析JavaScript語法，支持 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)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

分享文章：基于Tarov3中js解釋器組件的案例分析-創(chuàng)新互聯(lián)
文章位置：http://muchs.cn/article48/dhgdep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、品牌網(wǎng)站制作、網(wǎng)站維護(hù)、網(wǎng)站制作、自適應(yīng)網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)