溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序如何轉(zhuǎn)化為uni-app項目

發(fā)布時間:2020-07-22 15:31:07 來源:億速云 閱讀:251 作者:小豬 欄目:web開發(fā)

小編這次要給大家分享的是微信小程序如何轉(zhuǎn)化為uni-app項目,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。

前言:

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

miniprogram-to-uniapp項目介紹:

概要介紹:是一個能夠?qū)⑽⑿彭椖哭D(zhuǎn)化為Uni-app項目的開源項目

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

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

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

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

Node.js 安裝配置詳細教程:https://www.jb51.net/article/97801.htm

第二步、初始化一個NPM模塊:首先查看NPM版本:

微信小程序如何轉(zhuǎn)化為uni-app項目

在任意盤中新建一個空白文件夾,用于存放NPM初始化模塊配置:

微信小程序如何轉(zhuǎn)化為uni-app項目

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

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

為了示范隨便下載了一個微信小程序商城,項目地址為:https://github.com/hanxue10180/shangcheng

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

微信小程序如何轉(zhuǎn)化為uni-app項目

安裝miniprogram-to-uniapp,并將小程序轉(zhuǎn)化為uni-app項目:

因為這個包是工具,要求全局都能使用,所以需要-g進行全局安裝,運行以下命令進行安裝:

npm install miniprogram-to-uniapp -g

微信小程序如何轉(zhuǎn)化為uni-app項目

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

(wtu -> 取自wx to uni之意,后面都用這個全局命令)

wtu -V

微信小程序如何轉(zhuǎn)化為uni-app項目

運行以下命令將微信小程序轉(zhuǎn)化為uni-app項目:

在命令行里,輸入【wtu -i "你的小程序項目路徑"】,注意-i后面有個空格!?。∪纾骸緒tu -i "G:\shangcheng"】 ;

回車后即可以在源項目同及目錄得到一個后綴為_uni的目錄,即轉(zhuǎn)換成功。如下圖所示:

微信小程序如何轉(zhuǎn)化為uni-app項目

微信小程序如何轉(zhuǎn)化為uni-app項目

大功告成,順利轉(zhuǎn)化為uni-app項目結(jié)構(gòu):

微信小程序如何轉(zhuǎn)化為uni-app項目

看完這篇關(guān)于微信小程序如何轉(zhuǎn)化為uni-app項目的文章,如果覺得文章內(nèi)容寫得不錯的話,可以把它分享出去給更多人看到。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI