UNI-APP之微信小程序轉H5

開始

最近有個需求，需要將微信小程序中一些頁面和功能改成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

1. 直接全局安裝

npm install miniprogram-to-uniapp - g

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

npm update miniprogram-to-uniapp -g

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

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

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

轉換后的一些問題

1. 小程序的bingtap會轉成@tap，問題不大，不過最好改成@click。
2. 組件上的動態props參數沒有通過v-bind綁定
3. 小程序的自定義組件，props是可以在子組件內修改的， 但是轉成uni-app是不能直接在子組件修改props。
4. 子組件內，工具轉換后的this.setData的兼容方法，更新值的時候不會觸發watch，要把this.setData改回vue的this.xxx=xxx;
5. @catchtouchmove的防止觸摸穿透，可以改成@touchmove.stop.prevent=“moveHandle”
6. hidden="hidden"改成v-show
7. 圖片的路徑在轉換中可能也會出錯
8. 本地調試時調用接口會出現跨域。可以在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打包部署的問題

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

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

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

4. 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