原生微信小程序转uniapp方案

366 阅读2分钟

大家好,我是CC,在这里欢迎大家的到来~

如果恰巧需要将各种原生小程序转为 uniapp 项目,那请看完这篇文章。

之前原生开发了一款微信小程序,在审核上线阶段接连几次审核不过,就想着直接转 App 去使用了。但是手工去转的话时间成本过大,就想着看有没有一个工具可以解决这个问题。果然在 DCloud 插件市场里看到了 miniprogram-to-uniapp,这个插件功能满足需求,转化过程也还顺利,就来安利一下。

进入正文:

编辑器

HBuilderX 2.9+以上版本

安装插件

  1. 打开 HBuilderX 软件
  2. 在当前页面点击“下载插件并导入HBuilderX”,看完激励视频广告后会提示下载插件

ext.dcloud.net.cn/plugin?id=2…

  1. 确认是否下载完成

在项目根目录文件夹上右键可以看到这个安装后的插件

转化代码

配置

  1. wxss 文件的样式会写到 vue 文件的 style 标签里
  2. 支持 vant 组件库的转换(使用 wxcomponents 方案)
  3. 通过 import、template 使用模版 和 通过 include 方式引入组件会转化为 vue 引入使用组件的方式

平台配置

  1. 云服务空间配置服务空间名称
  2. 创建云数据库数据表
  3. 上传云函数/云对象

转化后存在的问题以及如何修改

App中不支持 wx.showShareMenu() 方法

详情可看点击这里

解决方案:注释掉或者自定义该方法

App不支持 navigateToMiniProgram() 方法

但是支持打开微信小程序,使用plus.share的launchMiniProgram

详情可看点击这里

图片路径

图片使用的 OSS 存储,因此不需要更改路径

如若没有使用 OSS 存储,就需要考虑修改路径

wxs 文件

因为vue中不识别 wxs 文件,需要将其转化为 filter 方法

云函数

之前开发微信小程序使用的云开发,在 uniapp 这边提供的是阿里云云开发,因而会产生一些错误。

wx.cloud.database() 方法未替换完全

wx.cloud.database()方法更改为uniCloud.database()

app.globalData.xxx 未替换

app.globalData.xxx替换为app.xxx