原生小程序转 uniapp 详细教程
使用须知
- 该方法同样适用于 QQ、头条/抖音、支付宝/钉钉和百度等小程序
- 必须是用原生小程序语言的项目才可以转换为 uniapp 项目
下载 uniapp 官方推荐的转换工具
点击下载插件并导入 HbuilderX,可能会要求看微信广告，我们看完一个微信广告之后就可以下载安装了。
HbuilderX 界面弹出这个提示则安装成功了
下一步，我们在 HbuilderX 导入原生微信小程序的项目根目录
我们会看到项目名字的前面会有小程序的图标，则说明 HbuilderX 成功识别了项目为小程序的项目
如何在项目名上点击鼠标右键，在弹出菜单中选择miniprogram to uniapp v2
然后会弹出以下窗口
配置说明
合并 wxss 文件到 vue 文件里 默认为 true，即将 wxss 等样式文件合并到 vue 文件，成为一个单独 vue 文件。设为 false 则将样式文件单独生成一个 css 文件。
转换 template 和 include 标签为组件(实验功能) 默认为 false, 将 template 和 include 标签转换为组件，以便减少项目体积，按需使用。
点击开始转换，然后就会看到控制台出现了转换进度，等待他转换结束即可。
出现如下界面则转换成功
然后我们会看到 HbuilderX 的项目目录中会出现转换后的项目，如果未出现，则需要手动找到他转换后生成的项目目录并导入到 HbuilderX 中
导入到 HbuilderX 中我们会发现项目前面的图标为 uniapp 的图标
转换后直接在 HbuilderX 中编译到其他端就可以了
报错说明
提示
如果项目中使用到了一些不兼容多端的 UI 组件库，则转换后无法再次编译到其他端，推荐使用一些支持多端的 UI 组件库例如 Uview、ColorUI 等
转换后的工作
wx.是否要替换为 uni.？
关于 js api 中的wx.，不要全局替换为uni.。因为有的 wx 的 api 是微信独有的，替换为 uni 后，反而在微信下没法用了。
同时 uni-app 编译器提供了把wx.编译为不同平台的机制，所以直接使用wx.的 api 完全可以正常在各端运行。
所以对于老代码，替不替换不重要，不影响运行，只影响语法提示和转到定义。
但是新写的代码，还是要用uni.的 api，在代码提示、转到定义方面更强大。
App 端迁移，还需处理服务端相关代码
如果把微信小程序转换为 uni-app，仍然用于发布微信小程序，那服务器端代码不变。
但如果要发布到 App、其他小程序等平台，服务器也需要调整部分代码。比如登陆、支付、推送、定位、地图等联网服务。
uni-app 在客户端侧提供了统一的代码，比如uni.login、uni.requestPayment，在不同端均可以实现登陆、支付。
但服务器端的接口不一样，比如微信的 App 支付和小程序支付的申请开通、服务器接口都不一样，所以配置和服务器接口仍需单独处理。
比如把小程序转换 uni-app 后，需要打包发布为 app，则需要向微信申请 app 支付的资质，拿到 appkey 等信息，填写到 uni-app 工程的 manifest-app -> sdk 配置 -> 微信支付 下面，然后打包才能成效（如果是离线打包，参考离线打包的文件）。同时服务器需要按照微信的 App 支付的接口再开发对接。
同样微信小程序里内置的定位、地图，在 app 上，需要单独向高德等三方服务商申请，否则无法在 app 里使用这些服务。
这些 sdk 申请方式在 manifest -> app sdk 配置 下有教程链接。
其他注意
参考：这里有一个转换示例，把 vant weapp 的小程序演示 demo，转换为 uni-app 工程，里面的 pages 下同时保留了 wxml 和 vue，可用于对比参考。http://ext.dcloud.net.cn/plugin?id=302