Comment développer un plug - in d'applet

En général, chaque plate - forme ouverte d'applet a certaines limites à la portée ouverte du développement de plug - ins,Par exemple, la plate - forme d'applet Wechat est ouverte22Développement de plug - ins liés à l'industrie,Dont services médicaux、Secteur financier、Loisirs、Il existe d'autres restrictions particulières dans des secteurs tels que les réseaux sociaux.

Après avoir appris les spécifications de développement du plug - in applet,Comment commencer le développement du plug - in applet de la bonne façon？En fait, toutes les grandes plateformes ont des outils de développement réactifs et des guides de développement.

Nous prenons également Wechat et Alipay comme exemple,Utilisez Wechat Developer Tools et AlipayIDEOutils pour compléter efficacement la création et le développement d'un plug - in applet,Des guides de développement spécifiques sont disponibles à：

Développement de plug - ins d'applet Wechat：

https://developers.weixin.qq.com/miniprogram/dev/devtools/plugin.html

Développement du plug - in d'applet Alipay：

https://opendocs.alipay.com/mini/plugin/plugin-development

1、Introduction du plug - in applet

Pour plus d'utilisateurs, nous pourrions avoir besoin d'introduire des plug - ins,Comment introduire un plug - in dans une applet？Ici, nous prenonsFinClip L'applet est un exemple de pratique.

Les développeurs peuvent introduire une déclaration de code plug - in dans le Code applet,Et en utilisant FIDE Quand les outils de développement sont compilés, FIDE Le Code du plug - in est obtenu du côté du serveur pour la compilation des paquets.

Votre attention, s'il vous plaît.

La fonctionnalité plug - in doit être dans la version de base de la Bibliothèque ≥2.11.1,SDKVersion≥2.34.0 Ne peut être utilisé que dans l'environnement de

2 Ajouter un plug - in

Avant d'utiliser le plug - in , Les développeurs peuvent se connecter 「Applet Open Platform-Gestion des applets-Plug - in applet」,Par plug - in ID  Trouvez le plugin et ajoutez .

3  Introduire un paquet de code plug - in

Avant d'utiliser le plug - in, L'utilisateur doit  app.json  Le plug - in à utiliser est déclaré dans ,Par exemple：

Exemple de code

{
 "plugins": {
 "myPlugin": {
 "version": "1.0.0",
 "provider": "Plug - in id"
 }
 }
}

Comme le montre l'exemple ci - dessus, plugins  Un segment de définition peut contenir plusieurs déclarations de plug - in , Chaque déclaration de plug - in est identifiée par un nom de référence de plug - in personnalisé par le consommateur , Et indique  ID  Et le numéro de version à utiliser .

Parmi eux,Nom de la référence（Comme dans l'exemple précédent myPlugin）Personnalisé par l'utilisateur, Il n'est pas nécessaire d'être cohérent avec les développeurs de plug - ins ou de coordonner avec eux . Lors de l'utilisation ultérieure du plug - in , Ce nom de référence sera utilisé pour représenter le plug - in .

4 Introduction d'un paquet de codes plug - in dans la Sous - traitance

Si le plug - in n'est utilisé que dans le cadre d'une seule sous - traitance , Les plug - ins peuvent être placés uniquement dans ce sous - contrat ,Par exemple：

{
 "subpackages": [
 {
 "root": "packageA",
 "pages": [
 "pages/cat",
 "pages/dog"
 ],
 "plugins": {
 "myPlugin": {
 "version": "1.0.0",
 "provider": "Plug - in id"
 }
 }
 }
 ]
}

L'utilisation de plug - ins dans le cadre de la Sous - traitance est limitée comme suit ：

• Ce plug - in ne peut être utilisé que dans le cadre de ce sous - contrat ;

• Le même plug - in ne peut pas être référencé simultanément par plusieurs sous - traitants ;

5Utilisation du plug - in

Lors de l'utilisation du plug - in, Le Code du plug - in n'est pas visible pour l'utilisateur . Pour une utilisation correcte du plug - in , L'utilisateur doit consulter la page détails du plug - in “Documents de développement”Une section, Lire la documentation de développement de plug - in fournie par le développeur de plug - in , Documenter les composants personnalisés fournis par le plug - in 、 Nom de la page et  js Spécification de l'interface, etc..

6Composants personnalisés

Utilisez les composants personnalisés fournis par le plug - in ,Et  Utiliser des composants personnalisés normaux   De la même façon .In json  Lorsque le fichier définit les composants personnalisés qui doivent être introduits ,Utiliser plugin://  Le Protocole indique le nom de référence du plug - in et le nom du composant personnalisé ,Par exemple：

Exemple de code

{
 "usingComponents": {
 "hello-component": "plugin://myPlugin/hello-component"
 }
}

Pour la protection des plug - ins , Les composants personnalisés fournis par le plug - in sont limités dans leur utilisation ：

• Par défaut,Dans la page this.selectComponent  L'interface n'a pas pu obtenir l'objet d'instance de composant personnalisé du plug - in ;

• ft.createSelectorQuery  Attendez l'interface  >>>  Le sélecteur ne peut pas être sélectionné à l'intérieur du plug - in .

7Page

Quand vous avez besoin de sauter à la page du plug - in ,url Utiliser plugin:// Préfixe,Shadow! 

plugin://PLUGIN_NAME/PLUGIN_PAGE,

 Par exemple:：

Exemple de code

<navigator url=&quot;plugin://myPlugin/hello-page&quot;>
 Go to pages/hello-page!
</navigator>

8 js Interface

Utilisation du plug - in js À l'interface,Peut être utilisé requirePlugin Méthodes.Par exemple, Le plugin offre un  hello Et une méthode appelée world Variable de, Peut être appelé comme ci - dessous ：

var myPluginInterface = requirePlugin('myPlugin');

myPluginInterface.hello();
var myWorld = myPluginInterface.world;

Vous pouvez également utiliser le plug - in  id  Pour obtenir l'interface ,Par exemple:：

var myPluginInterface = requirePlugin('Plug - in id');

9 Exporter vers le plug - in

Les applets qui utilisent des plug - ins peuvent exporter du contenu , Pour le plugin .Plus précisément,, Lorsque vous déclarez utiliser un plug - in ,Peut passer export  Champ pour spécifier un fichier ,Par exemple:：

{
 "myPlugin": {
 "version": "1.0.0",
 "provider": "Plug - in id",
 "export": "index.js"
 }
}

Alors ce fichier （ Dans l'exemple ci - dessus  index.js） Le contenu exporté peut être obtenu par ce plugin en utilisant une fonction globale .Par exemple,Dans le dossier ci - dessus, L'applet utilisant le plug - in a fait l'exportation suivante ：

// index.js
module.exports = { whoami: 'MiniProgram' }

Le plugin obtient alors le contenu exporté ci - dessus ：

// plugin
requireMiniProgram().whoami // 'MiniProgram'

Quelles sont les exportations spécifiques , Vous pouvez lire la documentation de développement du plug - in , Rendez - vous avec le développeur du plug - in .

Lorsque le plug - in est sous - Traité , Cette fonctionnalité peut également être utilisée avec , .Mais le chemin du fichier spécifié est relatif à la Sous - traitance .Par exemple, dans root: packageA  Spécifié dans le contrat de sous - traitance pour  export: exports/plugin.js, Le fichier spécifié sur le système de fichiers devrait être  /packageA/exports/plugin.js.

L'exportation de plusieurs plug - ins utilisés n'affecte pas l'autre , Deux plug - ins peuvent exporter le même fichier , Peut également être un fichier différent . Mais lors de l'exportation du même fichier , Si un plug - in modifie le contenu exporté , Alors l'autre plug - in sera affecté ,Notez ceci.

10 Fournir des composants personnalisés pour le plug - in

Parfois, Le plug - in peut être dans une page ou un composant personnalisé , Donne une partie de la zone à l'applet utilisé pour rendre , Donc l'applet que vous devez utiliser fournit un composant personnalisé . Mais comme le chemin des composants personnalisés de l'applet ne peut pas être spécifié directement dans le plug - in , Il est donc nécessaire de spécifier  Noeud abstrait（generics） Pour fournir.

.Si un composant personnalisé d'un plug - in nécessite une implémentation de noeud abstrait spécifiée , Vous pouvez spécifier ：

<!-- miniprogram/page/index.fxml -->
<plugin-view generic:mp-view=&quot;comp-from-miniprogram&quot; />

.Une implémentation de composant abstrait peut être spécifiée pour la page plug - in via l'élément de configuration .Par exemple, Pour nommer le plug - in  plugin-index  Noeud abstrait dans la page de  mp-view  Spécifiez les composants personnalisés de l'applet  components/comp-from-miniprogram  En tant que réalisation ：

{
 "myPlugin": {
 "provider": "Plug - in id",
 "version": "1.0.0",
 "genericsImplementation": {
 "plugin-index": {
 "mp-view": "components/comp-from-miniprogram"
 }
 }
 }
}

Félicitations pour le développement réussi d'un plug - in ou l'introduction d'une application , Vous pouvez fournir un service plus riche aux utilisateurs via le plug - in applet .

Je viens de passer de la Chine open source à une bonne activité de développement de plug - ins d'applet ,Et c'est exactement

FinClip

Tenue, Ce concours a beaucoup de sens pour compenser l'écologie des plug - ins applet , Et partagé 10Le pool d'or de 10 000 yuans,Les petits partenaires intéressés peuvent essayer～