从原生小程序向 VueMini 迁移

由于不需要多端扩展和多小程序扩展，目标平台只有微信小程序，我们的小程序从创建之初就用的原生小程序。随着需求越来越复杂，我也被原生小程序的简陋折磨得有点力不从心，于是考虑迁移到 Taro。

考察了一遍 Taro，发现在 Taro 中安装 vant weapp 有点费劲，就算迁移成功，也不能使用 Taro Vue 的双向绑定。这我图啥。如果不用 vant，就得将全部页面上的 vant 组件换到 nutUI，这更费劲了。

然后考察 VueMini，发现这东西很轻量，它只接管 js 部分，让小程序的 wxs 可以使用 Vue 的响应式语法，而且还支持 Pinia。由于没有动模板部分，所以还能像之前一样使用 vant。这简直太适配了！说干就干。

这里是 VueMini的文档。

前期准备

先进行创建项目等前期准备，启动好页面后，将 Vant 先引入。

pnpm i @vant/weapp -S --production

除此之外还需要安装其它的 npm 包。

甚至不需要在开发者工具中处理 npm 构建。VueMini 会自动在 dist 目录中创建一个 miniprogram_npm，并把依赖处理好。

然后是 app.json 里的 usingComponents，直接把之前的完整复制过去就可以了。

接下来是除了 pages 之外的其它目录，主要是 api 和 utils。由于原生小程序引入模块使用的是 require，而 VueMini 用的是 import from，所以需要处理一下模块的导出。

export default {
    a: () => {},
    b: 123
}

这样的模块需要改为

export const a = () => {}
export const b = 123

这样是为了在导入的时候可以

import { a, b } from 'some_package.js'

处理好了除了 pages 之外的目录，启动项目，看看能不能正常启动。

迁移页面

由于 VueMini 支持 html、wxml 作为页面文件，小程序天然支持 scss、wxss、js 文件，所以整个 pages 目录都可以完整复制过去。然后将 app.json 的 pages 也完整复制过去。接下来就只剩下最后也是最复杂的工作了 —— 迁移 js。

js 是变化最大的部分，也是本次迁移的目标。原生小程序使用类似 Vue 的选项式 api，VueMini 使用 Vue3 的组合式 api。我先自己手动迁移了一个最大的 js 文件，然后总结了 8 条规则告诉 Gemini：

1. data 中的全部使用 ref 定义变量

2. 所有方法都换成 const funcName = () => {} 的形式

3. 所有 data 和 方法都在 setup 中 return

4. 所有 this.data.propName 都变成 propName.value

5. 所有 this.funcName() 都变成 funcName()

6. 生命周期钩子按这篇文档换一下：https://vuemini.org/guide/page.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F

7. 顶部导入，const require 变成 import

8. 生命周期有一个例外：`onLoad`。`onLoad` 的代码直接写在 `setup` 里，`onLoad(options)` 的 `options` 就是 `setup(query)` 的 `query`。为了规定一个统一的位置，onLoad 的代码就放在 return 上面吧。

然后将 js 一个一个喂给 Gemini，再一个一个页面重新测试了一遍。终于用两天的时间重构完了整个项目。

遗留问题

忘了告诉 Gemini 一个事情，就是涉及分享朋友圈和好友消息的页面，需要在 setup 的第二个参数里设置 canShareToOthers 和 canShareToTimeline。好在涉及分享的页面不多，遇到我就手动处理了。
还有就是 vant 的一些组件支持双向绑定，也就是使用 model:value，但 VueMini 是不支持的，所以需要手动处理一下。全部迁移完毕后，全局搜一下 model:value，发现只有两处，都手动处理了。

从原生小程序向 VueMini 迁移 ​

前期准备 ​

迁移页面 ​

遗留问题 ​

总结 ​

从原生小程序向 VueMini 迁移

前期准备

迁移页面

遗留问题

总结