小編這次要給大家分享的是微信小程序如何轉(zhuǎn)化為uni-app項(xiàng)目,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
站在用戶的角度思考問題,與客戶深入溝通,找到石臺(tái)網(wǎng)站設(shè)計(jì)與石臺(tái)網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋石臺(tái)地區(qū)。
前言:
之前自己做一個(gè)uni-app的項(xiàng)目的時(shí)候前端需要實(shí)現(xiàn)一個(gè)比較復(fù)雜的動(dòng)態(tài)tab和swiper切換的功能,但是由于自己前端摳腳的原因沒有寫出來,然后自己在網(wǎng)上搜索的時(shí)候發(fā)現(xiàn)了有個(gè)微信小程序里面的頁(yè)面及極其的符合我的需求。那么問題來了我該如何將微信小程序轉(zhuǎn)為為uni-app項(xiàng)目呢?搜索了下網(wǎng)上的相關(guān)解決方案還真有個(gè)將微信小程序轉(zhuǎn)化為uni-app的項(xiàng)目,該項(xiàng)目名稱叫做【miniprogram-to-uniapp】,接下來就看看如何實(shí)操吧!
miniprogram-to-uniapp項(xiàng)目介紹:
概要介紹:是一個(gè)能夠?qū)⑽⑿彭?xiàng)目轉(zhuǎn)化為Uni-app項(xiàng)目的開源項(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一起安裝的包管理工具,所以接下來我們只需要把node.js安裝配置好即可。
Node.js 安裝配置詳細(xì)教程:https://www.jb51.net/article/97801.htm
第二步、初始化一個(gè)NPM模塊:首先查看NPM版本:
在任意盤中新建一個(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è)后綴為_uni的目錄,即轉(zhuǎn)換成功。如下圖所示:
大功告成,順利轉(zhuǎn)化為uni-app項(xiàng)目結(jié)構(gòu):
看完這篇關(guān)于微信小程序如何轉(zhuǎn)化為uni-app項(xiàng)目的文章,如果覺得文章內(nèi)容寫得不錯(cuò)的話,可以把它分享出去給更多人看到。