開始

最近有個需求，需要將微信小程序中一些頁面和功能改成h5，這次功能開發的時間有點緊，而且重新寫一套有點來不及。考慮到微信小程序與uni-app有著一些共通之處，所以打算直接轉成uni-app。uni-app官網上也有從微信小程序項目轉uni-app的教程：https://github.com/zhangdaren/miniprogram-to-uniapp?，
不過我這里直接用上了大佬開源的miniprogram-to-uniapp轉換工具。
github:?https://github.com/zhangdaren/miniprogram-to-uniapp
教程：https://ask.dcloud.net.cn/article/36037

使用MINIPROGRAM-TO-UNIAPP

直接全局安裝

npm install miniprogram-to-uniapp - g

因為工具更新的比較頻繁，所以安裝后建議更新

npm update miniprogram-to-uniapp -g

轉換微信小程序項目，順帶將wx.xx轉為uni.xxx。具體可以查看文檔

wtu -i 'E:\project\miniprogram-project' -r

轉換成功后，會在項目同級目錄下生成一個miniprogram-project_uni的目錄

轉換后的一些問題

小程序的bingtap會轉成@tap，問題不大，不過最好改成@click。

組件上的動態props參數沒有通過v-bind綁定

小程序的自定義組件，props是可以在子組件內修改的， 但是轉成uni-app是不能直接在子組件修改props。

子組件內，工具轉換后的this.setData的兼容方法，更新值的時候不會觸發watch，要把this.setData改回vue的this.xxx=xxx;

@catchtouchmove的防止觸摸穿透，可以改成@touchmove.stop.prevent=“moveHandle”

hidden="hidden"改成v-show

圖片的路徑在轉換中可能也會出錯

本地調試時調用接口會出現跨域。可以在manifest.json文件源碼視圖，配置h5的devServer:

"h5": {"devServer": {"port" : 80,"disableHostCheck" : true, // 跳過host檢查"proxy" : {"/api" : {"target" : "https://abc.com", // 目標域名"changeOrigin" : true, // 允許跨域"secure" : false,// 設置支持https協議的代理"ws" : false,//沒有該配置將出現：WebSocket connection to ws 錯誤提示"pathRewrite" : { //如果不希望傳遞/api，則需要重寫路徑"^/api" : ""}}},} }

uni-app也是webpack打包，實際跟vue是差不多的，具體配置可以查閱?webpack-dev-server

H5打包部署的問題

h5打包之前，需要在manifest.json文件的h5配置中配置相關規則：

點擊工具欄發行—》h5手機版發行，填入網站標題和域名，接著等發布成功，會在unpackage中生成打包后的文件

因為我需要在微信瀏覽器打開，路徑使用hash模式會帶有#號，獲取wx.config會失敗，所以改成history的模式。

history模式，部署需要后臺在nignx配置。另外，頁面打開，進入二級頁面，刷新的時候會404，需要后臺在nignx中配置偽靜態，例如：

location / {try_files $uri $uri/ /aecGuide/h5/index.html; }

使用UNI-SIMPLE-ROUTER

在uni-app中，如果不想用uniapp的路由管理，可以使用這個工具：uni-simple-router，其保留了vue-router的路由風格，可以使用其的API，也可以改成完全使用vue-router的路由管理方式，具體可以查看文檔，文檔寫的蠻詳細的

分享就先到這里，可以會有些錯誤，歡迎指正。后續會繼續更新在項目中遇到的問題，謝謝

本文原鏈接：https://blog.csdn.net/Leo_xian/article/details/107709941

總結

以上是生活随笔為你收集整理的UNI-APP之微信小程序转H5的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。