taro-script 0.4 est sorti, découvrez le composant interpréteur js basé sur Taro v3

Recommandations d'apprentissage associées : Tutoriel vidéo js

Adresse Github

Développé sur la base de Taro v3 , prend en charge les applets multiterminaux pour charger dynamiquement des scripts JavaScript distants et les exécuter, Prend en charge la syntaxe ES5

Dernières mises à jour

• Nouvellement ajoutéuseScriptContextObtenez le contexte d'exécution actuel
• Ajustement du nom du paramètre : useCache-> cache
• Ajustement de la stratégie de cache
• Nouvel text attribut, qui peut directement transmettre js string
• srcPrend en charge les tableaux pour résoudre les problèmes d'imbrication TaroScript à plusieurs niveaux

Utilisation

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>;复制代码

Note 1 : Le même taro-script ne sera exécuté qu'une seule fois, c'est-à-dire exécuté après componentDidMount, les modifications ultérieures des attributs seront invalides. Exemple

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

Remarque 2 : Plusieurs taro-script seront chargés en parallèle et exécutés dans le désordre, et la commande ne peut pas être garantie. Par exemple :

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

Si vous devez garantir l'ordre d'exécution, vous devez utiliser des tableaux ou de l'imbrication, par exemple :

Méthode Array (recommandée)

<TaroScript src={["path1", "path2", "path3"]} />复制代码

ou mode imbriqué

<TaroScript src="path1">
    <TaroScript src="path2">
        <TaroScript src="path3"></TaroScript>
    </TaroScript>
</TaroScript>复制代码

globalContext

Contexte d'exécution global intégré

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

<TaroScript text="var value = 100" />;复制代码

À ce stade, le la valeur de globalContext.value est 100

PersonnalisécontextExemple

import TaroScript from "taro-script";

const app = getApp();

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

À l'heure actuelle, la valeur de app.value est 100

TaroScript Attributs

src

Type : string | string[]

Script distant à charger

text

Type : string | string[]

Chaîne de script JavaScript qui doit être exécutée, text a une priorité plus élevée que src

context

Type : object

Valeur par défaut : globalContext = {}

Contexte d'exécution, la valeur par défaut est globalContext

timeout

Type : numberValeur par défaut : 10000 Millisecondes

Définir le délai d'expiration de chaque script à distance

onExecSuccess

Type : ()=> void

Rappel après exécution réussie du script

onExecError

Type : (err:Error)=> void

Rappel après erreur d'exécution du script

onLoad

Type : () => void

Rappel une fois le script chargé et exécuté avec succès, invalide lorsque text existe

onError

Type : (err: Error) => void

Échec du chargement du script ou erreur de rappel après exécution du script, invalide si text existe

fallback

Type : React.ReactNode

Afficher le contenu de chargement de script, échec de chargement, échec d'exécution

cache

Type : boolean

Valeur par défaut : true

S'il faut activer Lors du chargement du cache, la politique de cache est l'adresse actuellement demandée. Comme key, la période de cache est la durée de vie de l'utilisateur actuel utilisant l'application.

children

Type : React.ReactNode | ((context: T) => React.ReactNode)

Le contenu affiché une fois le chargement terminé, prend en charge la transmission 函数Le premier paramètre est l'exécution du script上下文

useScriptContext()

Obtenir le hook de contexte d'exécution actuel

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?: {})

Exécuter dynamiquement le script de chaîne donné et renvoyer la dernière expression La valeur du formule

import { evalScript } from "taro-script";

const value = evalScript("100+200"); // 300复制代码

Autre

• Ce composant utilise eval5 pour analyser la syntaxe JavaScript et prend en charge ES5

• N'oubliez pas de configurer le nom de domaine légal pour l'adresse qui doit être chargée avant d'accéder à l'environnement de production

• Types et méthodes intégrés de 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,复制代码

Les types intégrés sont liés à l'environnement JavaScript en cours d'exécution. Si l'environnement lui-même ne le prend pas en charge, il n'est pas pris en charge !

Importer une méthode personnalisée ou un exemple de type :

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

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

<TaroScript text="hello()"></TaroScript>;复制代码

ou un contexte personnalisé

import TaroScript from "taro-script";

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

<TaroScript context={ctx} text="hello()"></TaroScript>;复制代码

Pour plus d'apprentissage en programmation, veuillez prêter attentionformation phpcolonne !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!