taro-script 0.4 がリリースされました。Taro v3 に基づく JS インタープリター コンポーネントについて学習します。

関連する学習の推奨事項: js ビデオ チュートリアル

Github アドレス

ベース Taro v3 開発、リモート JavaScript スクリプトを動的にロードして実行するマルチターミナルの小規模プログラムをサポート、 ES5 構文をサポート

最新の更新

• 新規追加 useScriptContext現在の実行コンテキストの取得
• パラメータ名の調整:useCache->cache
• キャッシュ戦略の調整
• New text 属性、js 文字列で直接渡すことができます
• src多層の TaroScript ネスト問題を解決するための配列をサポート

使用法

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 は 1 回だけ、つまり componentDidMount の後、実行されます。プロパティは無効になります。例

function App({ url }) {
    // 只会在第一次创建后加载并执行，后续组件的更新会忽略所有属性变动
    return <TaroScript src={url} />;
}复制代码

注 2: 複数の taro-script が並行してロードされ、順不同で実行されますが、順序は保証されません。例:

// 并行加载及无序执行
<TaroScript  src="path1" />
<TaroScript  src="path2" />
<TaroScript  src="path3" />复制代码

実行順序を保証する必要がある場合は、次のように配列またはネストを使用する必要があります。

Array メソッド (推奨) )

<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

CustomcontextExample

import TaroScript from "taro-script";

const app = getApp();

<TaroScript context={app} text="var value = 100" />;复制代码

this app.value の値が 100

TaroScript 属性

##src

string | string[]

text

string | string[]

text は ## よりも優先されます。 #src

タイプ:

デフォルト値:

実行コンテキスト、デフォルトは

##timeout

タイプ: number

10000 ミリ秒各リモート スクリプトの読み込みタイムアウトを設定します

onExecSuccess

タイプ: ()=> void

スクリプト実行成功後のコールバック

onExecError

タイプ: (err:Error)=> void

スクリプト実行エラー後のコールバック

onLoad

Type: () => void

スクリプトがロードされ、正常に実行された後のコールバック。 text

onError

Type: (err: Error ) => void

スクリプトの読み込み失敗またはスクリプト実行エラー後のコールバック、text

fallback

型: React.ReactNode

スクリプト読み込み、読み込み失敗、実行失敗の内容を表示

キャッシュ

タイプ: boolean

デフォルト値: true

ロード キャッシュを有効にするかどうか、キャッシュ ポリシーは現在のリクエスト アドレスを使用します。 key

children

タイプ: React.ReactNode | ((context: T) => React.ReactNode)

読み込み完了後に表示されるコンテンツは、 関数

useScriptContext()

現在の実行コンテキストフックを取得します<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import TaroScript, { useScriptContext } from &quot;taro-script&quot;; &lt;TaroScript text=&quot;var a= 100&quot;&gt;     &lt;Test /&gt; &lt;/TaroScript&gt;; function Test() {     const ctx = useScriptContext();     return ctx.a; // 100 }复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div>

指定された文字列スクリプトを動的に実行し、最後の式 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import { evalScript } from &quot;taro-script&quot;; const value = evalScript(&quot;100+200&quot;); // 300复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div>Others

このコンポーネントは eval5 を使用して

構文を解析し、
• 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,复制代码

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-script 0.4 がリリースされました。Taro v3 に基づく JS インタープリター コンポーネントについて学習します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。