1. Conversion de mini-programmes WeChat en projets uni-app

1.1 Installation du plugin miniprogram-to-uniapp

Ouvrez le terminal et exécutez 【 npm installer miniprogram-to-uniapp -g 】 pour installer, car ce paquet est un outil qui doit être accessible globalement, donc l'installation avec -g est nécessaire.

npm installer miniprogram-to-uniapp -g

Si une erreur npm se produit, veuillez d'abord installer Node.js depuis : https://nodejs.org/zh-cn/

1.2 Vérification de l'installation réussie

verif -V

1.3 Autres méthodes et documentation

1. Adresse GitHub open source : https://github.com/zhangdaren/miniprogram-to-uniapp
2. Site officiel uni-app : https://uniapp.dcloud.net.cn/
3. Marché de plugins DCLOUD à utiliser avec HBuilderX : https://ext.dcloud.net.cn/plugin?id=2656
4. Introduction à l'utilisation du plugin miniprogram-to-uniapp : https://ask.dcloud.net.cn/article/36037
5. Utilisation du plugin pour la conversion (après conversion, un dossier : nom_projet_uni sera créé dans le même répertoire)

2.1 Précautions

Chaque conversion vide le répertoire de sortie, ce qui peut entraîner une perte de code, veuillez sauvegarder vos codes !!!!!

Cette conversion n'étant pas à 100%, des modifications manuelles seront nécessaires après conversion !!!

2.2 Commencer la conversion

Ouvrez le terminal et entrez 【conv -i "chemin_vers_votre_projet_mini"】

conv -i "chemin_vers_votre_projet_mini"

2.3 Zones pouvant nécessiter des modifications après conversion

1. Partie js

1. Supprimer const app = getApp();

2. Remplacer les méthodes commençant par wx. par uni.

3. Changer la liaison de données this.setData({ valeur : 1 }) en this.valeur = 1

4. Modifier la navigation wx.navigateTo() en uni.navigateTo()

5. onLoad(options)
Utiliser options ou this.$Route.query pour obtenir les paramètres de page

6. Pour certaines explications des cycles de vie de page, voir les cycles de vie de page
onPullDownRefresh : écoute l'action de tirage vers le bas de l'utilisateur, généralement utilisé pour le rafraîchissement
onReachBottom : événement lorsque la page atteint le bas (pas pour scroll-view), souvent utilisé pour charger la page suivante
onShareAppMessage : lorsque l'utilisateur partage via le bouton en haut à droite
onPageScroll : écoute le défilement de la page

2. Templete

Les points suivants n'affectent pas l'utilisation, vous pouvez les modifier ou non

Les balises <block> peuvent provenir de la conversion des balises <block> de mini-programmes ou des modèles <template>. Après conversion, certaines pages peuvent avoir des emboîtements multiples de <block>, ce qui n'affecte pas le fonctionnement mais peut rendre le code moins lisible. Pour l'amélioration, remplacez <block> par <template> et ajustez le style si nécessaire.
Événements de page
Par exemple <view @tap="actionClic" data-id="identifiant">Cliquez</view> fonctionne après conversion, mais diffère du développement Vue habituel.
Pour une mise à jour, vous pouvez modifier en <view @click="actionClic(identifiant)"> et ajuster la méthode correspondante.
Pour les pages utilisant wxx <script module="outils" lang="wxs" src="./outils.wxs"></script>, la plupart des méthodes peuvent être converties en computed ou watch.

3. Partie css

La conversion CSS peut échouer, principalement à cause des unités. Convertissez généralement les px en rpx en multipliant par 2.
Problème de modèle de boîte (mini-programme utilise content-box par défaut, uni-app utilise border-box). Modifiez box-sizing si nécessaire.