Parlons de la façon de convertir un petit projet de programme en un projet uni-app

Comment convertir un projet de mini-programme en projet uni-app ? L'article suivant vous présentera la méthode de conversion de l'applet WeChat en projet uni-app. J'espère qu'il vous sera utile !

Avant, lorsque je travaillais sur un projet d'uni-app, le front-end devait implémenter une fonction de commutation d'onglets et de swiper dynamique relativement complexe, mais en raison de ma propre boiterie frontale, je ne l'ai pas écrit puis j'ai cherché sur Internet et j'ai trouvé une page dans une applet WeChat qui répondait parfaitement à mes besoins. La question est donc : comment convertir l’applet WeChat en un projet uni-app ? Après avoir recherché des solutions pertinentes sur Internet, il existe bel et bien un projet visant à convertir les mini-programmes WeChat en uni-apps. Le nom du projet est [miniprogram-to-uniapp].

Introduction au projet miniprogram-to-uniapp :

Vue d'ensemble : Il s'agit d'un projet open source qui peut convertir des projets WeChat en projets Uni-app

Adresse github : https://github.com/zhangdaren/miniprogram-to-uniapp

Guide d'utilisation : https://ask.dcloud.net.cn/article/36037

La première étape consiste à installer l'outil de gestion de packages NPM sur la fenêtre :

Puisque ce projet doit utiliser l'outil de gestion de packages NPM pour installer le package de projet correspondant, et NPM est un outil de gestion de packages installé avec NodeJS, il nous suffit donc ensuite d'installer et de configurer node.js.

Tutoriel détaillé d'installation et de configuration de Node.js : https://www.runoob.com/nodejs/nodejs-install-setup.html

Deuxième étape, initialiser un module NPM :

Vérifiez d'abord la version NPM :

Créez un nouveau dossier vierge sur n'importe quel disque pour stocker la configuration du module d'initialisation NPM :

Utilisez CMD pour entrer dans le dossier correspondant et entrez : La commande npm init est Ouinpm init命令即可

第三步、使用miniprogram-to-uniapp将微信小程序转化uni-app实例：

首先下载需要转化的微信小程序：

为了示范随便下载了一个微信小程序商城，项目地址为：https://github.com/hanxue10180/shangcheng

下图为微信小程序的基本结构：

安装miniprogram-to-uniapp，并将小程序转化为uni-app项目：

因为这个包是工具，要求全局都能使用，所以需要-g进行全局安装，运行以下命令进行安装：

npm install miniprogram-to-uniapp -g

 安装完成，执行以下命令查看工具版本：

（wtu -> 取自wx to uni之意，后面都用这个全局命令）

wtu -V

运行以下命令将微信小程序转化为uni-app项目：

在命令行里，输入【wtu -i "你的小程序项目路径"】，注意-i后面有个空格！！！如：【wtu -i "G:shangcheng"

Étape 3, utilisez le miniprogramme pour - uniapp Convertir l'applet WeChat en uni-app Exemple :

Téléchargez d'abord l'applet WeChat qui doit être convertie :

À des fins de démonstration, j'ai téléchargé un centre commercial d'applets WeChat avec désinvolture L'adresse du projet est : https://. github.com/hanxue10180/shangcheng

L'image ci-dessous montre la structure de base de l'applet WeChat :

Installez le miniprogramme-en-uniapp et convertissez le mini-programme en un projet uni-app :

🎜🎜🎜🎜Parce que ce package est un outil et nécessite une utilisation globale, donc - g est requis. Pour installer globalement, exécutez la commande suivante pour installer : 🎜🎜rrreee🎜 🎜🎜🎜 Une fois l'installation terminée, exécutez la commande suivante pour afficher la version de l'outil : 🎜🎜🎜 (wtu -> est extrait de wx vers uni, cette commande globale sera utilisée plus tard) 🎜rrreee 🎜🎜🎜🎜Exécutez la commande suivante pour convertir l'applet WeChat dans un projet uni-app : 🎜🎜🎜Dans la ligne de commande, saisissez [wtu -i "votre chemin de projet d'applet"], notez qu'il y a un espace après -i! ! ! Par exemple : [wtu -i "G:shangcheng"] ; 🎜🎜Après avoir appuyé sur Entrée, vous pouvez obtenir un répertoire avec le suffixe _uni dans le projet et le répertoire source, c'est-à-dire que la conversion est réussie. . Comme le montre l'image ci-dessous : 🎜🎜🎜🎜🎜🎜🎜🎜🎜 C'est fait et transformé avec succès en structure de projet uni-app : 🎜🎜🎜🎜🎜🎜Recommandé : "🎜tutoriel uniapp🎜"🎜

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!