taro-script 0.4 發布，了解基於Taro v3的js解釋器元件

相關學習推薦：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="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

  語法，支援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>;复制代码

想了解更多程式設計學習，請關注

php培訓

專欄！
#

以上是taro-script 0.4 發布，了解基於Taro v3的js解釋器元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！