微信小程序 用uniapp转h5

微信小程序转换为uni-app

最近有个需求，需要将微信小程序中一些页面和功能改成h5，这次功能开发的时间有点紧，而且重新写一套有点来不及。考虑到微信小程序与uni-app有着一些共通之处，所以打算直接转成uni-app。uni-app官网上也有从微信小程序项目转uni-app的教程：miniprogram-to-uniapp，不过我这里直接用上了大佬开源的miniprogram-to-uniapp转换工具。

使用MINIPROGRAM-TO-UNIAPP

1. 直接全局安装

npm install miniprogram-to-uniapp -g

2. 因为工具更新的比较频繁，所以安装后建议更新

npm update miniprogram-to-uniapp -g

3. 转换微信小程序项目，顺带将wx.xx转为uni.xxx。具体可以查看文档【wtu -i "你的小程序项目路径"】

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

4. 转换成功后，会在项目同级目录下生成一个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,
        "proxy" : {
            "/api" : {
                "target" : "https://abc.com",
                "changeOrigin" : true,
                "secure" : false,
                "ws" : false,
                "pathRewrite" : {
                    "^/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的路由管理方式，具体可以查看文档，文档写的蛮详细的。