开始
最近有个需求,需要将微信小程序中一些页面和功能改成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的路由管理方式,具体可以查看文档,文档写的蛮详细的
分享就先到这里,可以会有些错误,欢迎指正。后续会继续更新在项目中遇到的问题,谢谢
---- 2020.08.06
ios长按小程序二维码无法识别
在做项目过程中测试发现了这个bug,在iphoneXS max中,长按二维码只弹出了保存图片和取消两个按钮,没有识别出小程序二维码,但是刷新2次后又会正常。
看网上的几种方法,最后确认了因为使用了history模式,并且我有使用vue-router的路由方式来跳转页面导致的。
解决方法:使用window.location.href
跳转到要长按识别的页面,我这里的页面在ios中不想出现底部的前进后退底部栏,所以使用了window.location.replace('xxxx')