如果你手头上有一套微信小程序的代码，怎样把它变成一个网页版或者app版本的呢？我推荐你使用uni-app。
使用uni-app可以很方便的将微信小程序代码翻译成uni-app项目，通过uni-app项目又可以编译成h5、app或微信小程序版本。这样一来，写一份代码同时可以在三个端甚至更多地方工作，何乐而不为呢？
首先我们要在官网下载uni-app的官方IDE工具HBuilderX-高效极客技巧，安装好后大概就像下面这样。
接下来为了可以将现有的微信小程序代码转成uni-app项目，我们需要在插件市场中找miniprogram-to-uniapp v2插件，并安装miniprogram-to-uniapp v2 - DCloud 插件市场，这个安装很简单我就不多言了，只要你的HBuilderX是运行的状态，它会自动检测并下载安装。
准备工作做好了，首先通过打开目录将我们现有的微信小程序项目导进去。
在项目上右击，会有一个选项miniprogram-to-uniapp v2，点击以后弹出对话框
选项基本不用动，这边需要留意的一点是这个输出目录好像不能随便乱改，改完便无法转换了。
开始后等他转换就行，几分钟就可以完成。log里会有一些输出，提示你有哪些不兼容的。等转换完成后可以试着跑一下微信小程序试试，因为是从微信小程序转过来的，所以基本不会有什么问题。
可能会有个别有语法问题的地方在编译的时候报错出来了，但我们打开了页面面对几千行代码无从下手怎么办呢？这个很好办，可以在插件市场里面找下面两款插件，一款是针对js代码的，一款是针对vue写法的。用不用的先装上再说。
eslint-js - DCloud 插件市场
eslint-plugin-vue - DCloud 插件市场
装好后也不是立马就能用的，需要稍微改以下代码，然后保存，只要有保存的动作，他就可以检查整个文件，然后将报错的地方找出来。
这两个插件一装，代码一改，基本上就是检查以下页面哪里有不兼容的插件，改掉就行了。
坑：
1. 如果在微信小程序中使用了插件，到uniapp中可能不会自动转换，需要在mainfest.json手动添加plugin依赖
"mp-weixin" : {
"usingComponents" : true,
"plugins": {
"live-player-plugin": {
"version": "1.3.5",
"provider": "wx2b03c6e691cd7370"
}
},
}
2. 微信小程序中的富文本处理方式wxParse不能用了，uni-app会自动转成mp-html，如果需要拼接img中的src链接，可以使用domain字段
将域名传进去，需要拼接的时候mp-html会自动帮你拼接的
3. 如果在调试app版时遇到运行正常而一旦debug就白屏的情况，这不是代码出了问题，而是你的包体积过大，加载不出来，这时候需要在page.json中将一些暂时用不到的page注掉，待调试完成再反注回来。虽然麻烦但只能这么做了。
4. 调试android时遇到一个bug，getCurrentPages获取到的页面对象page，没办法调用setData方法更新页面。这个问题在微信小程序及H5版本都是好的，网上看了很多帖子，没有能够正面的解决这一问题，只好退而求其次，使用uni推出的EventBus来解决了。
使用到两个方法，
uni.$emit('updateTabBar', tabBar);
uni.$on('updateTabBar',function(data){
that.setData({
tabBar: data
});
});
将需要更新的对象通过data字段传递，在需要更新的页面接收再调用setData方法更新。虽然麻烦一点也只能这么做了
5. h5版本跨域设置
dev环境下的跨域设置很简单，只需要在mainfest.json添加以下配置即可，不需要修改后端代码，这边target直接设置为正式环境，使用时将请求地址的hosturl替换为uniapi即可。
正式环境下的跨域配置就比较复杂了，需要前后端一起进行修改，并且一定要是在同域的服务器下才能配置成功。
首先后端需要在Web.Config下的system.webServer节点下配置以下节点
先remove再add，可以把缓存清除掉。
Access-Control-Allow-Origin配置我们前端部署的端口号
如果需要传递cookie的话，就必须配置Access-Control-Allow-Credentials，同时前端在发送接口时需要带上withCredentials参数。
Access-Control-Allow-Headers，Access-Control-Allow-Methods就是一些基本配置了。文章来源：https://www.toymoban.com/news/detail-761373.html
差不多了，试下成功了没。文章来源地址https://www.toymoban.com/news/detail-761373.html
到了这里，关于微信小程序转uni-app注意事项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
