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

前言:

  以前本身作一個uni-app的項目的時候前端須要實現一個比較複雜的動態tab和swiper切換的功能,可是因爲本身前端摳腳的緣由沒有寫出來,而後本身在網上搜索的時候發現了有個微信小程序裏面的頁面及極其的符合個人需求。那麼問題來了我該如何將微信小程序轉爲爲uni-app項目呢?搜索了下網上的相關解決方案還真有個將微信小程序轉化爲uni-app的項目,該項目名稱叫作【miniprogram-to-uniapp】,接下來就看看如何實操吧!html

miniprogram-to-uniapp項目介紹:

概要介紹:是一個可以將微信項目轉化爲Uni-app項目的開源項目前端

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

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

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

  因爲該項目須要使用NPM包管理工具安裝對應的項目包,而NPM是隨同NodeJS一塊兒安裝的包管理工具,因此接下來咱們只須要把node.js安裝配置好便可。github

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

第二步、初始化一個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項目結構:

相關文章
相關標籤/搜索