前言：

　　之前自己做一個(gè)uni-app的項(xiàng)目的時(shí)候前端需要實(shí)現(xiàn)一個(gè)比較復(fù)雜的動(dòng)態(tài)tab和swiper切換的功能，但是由于自己前端摳腳的原因沒(méi)有寫(xiě)出來(lái)，然后自己在網(wǎng)上搜索的時(shí)候發(fā)現(xiàn)了有個(gè)微信小程序里面的頁(yè)面及極其的符合我的需求。那么問(wèn)題來(lái)了我該如何將微信小程序轉(zhuǎn)為為uni-app項(xiàng)目呢？搜索了下網(wǎng)上的相關(guān)解決方案還真有個(gè)將微信小程序轉(zhuǎn)化為uni-app的項(xiàng)目，該項(xiàng)目名稱叫做【miniprogram-to-uniapp】，接下來(lái)就看看如何實(shí)操吧！

miniprogram-to-uniapp項(xiàng)目介紹：

概要介紹：是一個(gè)能夠?qū)⑽⑿彭?xiàng)目轉(zhuǎn)化為Uni-app項(xiàng)目的開(kāi)源項(xiàng)目

github地址：https://github.com/zhangdaren/miniprogram-to-uniapp

使用指南：https://ask.dcloud.net.cn/article/36037

第一步、在window上安裝NPM包管理工具：

　　由于該項(xiàng)目需要使用NPM包管理工具安裝對(duì)應(yīng)的項(xiàng)目包，而NPM是隨同NodeJS一起安裝的包管理工具，所以接下來(lái)我們只需要把node.js安裝配置好即可。

Node.js 安裝配置詳細(xì)教程：http://www.dbjr.com.cn/article/97801.htm

第二步、初始化一個(gè)NPM模塊：首先查看NPM版本：

在任意盤(pán)中新建一個(gè)空白文件夾，用于存放NPM初始化模塊配置：

第三步、使用miniprogram-to-uniapp將微信小程序轉(zhuǎn)化uni-app實(shí)例：

首先下載需要轉(zhuǎn)化的微信小程序：

為了示范隨便下載了一個(gè)微信小程序商城，項(xiàng)目地址為：https://github.com/hanxue10180/shangcheng

下圖為微信小程序的基本結(jié)構(gòu)：

安裝miniprogram-to-uniapp，并將小程序轉(zhuǎn)化為uni-app項(xiàng)目：

因?yàn)檫@個(gè)包是工具，要求全局都能使用，所以需要-g進(jìn)行全局安裝，運(yùn)行以下命令進(jìn)行安裝：

npm install miniprogram-to-uniapp -g

安裝完成，執(zhí)行以下命令查看工具版本：

（wtu -> 取自wx to uni之意，后面都用這個(gè)全局命令）

wtu -V

運(yùn)行以下命令將微信小程序轉(zhuǎn)化為uni-app項(xiàng)目：

在命令行里，輸入【wtu -i "你的小程序項(xiàng)目路徑"】，注意-i后面有個(gè)空格?。?！如：【wtu -i "G:\shangcheng"】 ；

回車后即可以在源項(xiàng)目同及目錄得到一個(gè)后綴為_(kāi)uni的目錄，即轉(zhuǎn)換成功。如下圖所示：

大功告成，順利轉(zhuǎn)化為uni-app項(xiàng)目結(jié)構(gòu)：

到此這篇關(guān)于微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例的文章就介紹到這了,更多相關(guān)小程序轉(zhuǎn)化為uni-app內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論