微信小程序轉化為uni-app項目


前言:

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

miniprogram-to-uniapp項目介紹:

概要介紹:是一個能夠將微信項目轉化為Uni-app項目的開源項目

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

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

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

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

Node.js 安裝配置詳細教程:https://www.runoob.com/nodejs/nodejs-install-setup.html

第二步、初始化一個NPM模塊:

首先查看NPM版本:

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

使用CMD進入對應的文件夾輸入:npm 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"】 ;
回車后即可以在源項目同及目錄得到一個后綴為_uni的目錄,即轉換成功。如下圖所示:

 

 

 

 大功告成,順利轉化為uni-app項目結構:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM