嗡汤圆
嗡汤圆

Vue手动快速移植小程序总结

1、前言

1.1 关于技术选型

这大半年精力从后端转移到前端开发，一下要同时弄ios + 安卓 + 小程序的研发，很自然选择了混合App的方案，这样可以在最小学习成本下快速实现功能，并且在遇到一些可能的风险的时候，不至于因为不懂OC, Swift或者Android相关的东西导致无法处理。

前端技术框架早期Angular和Vue都接触过，Angular从1，到2，6都试过，技术架构变得太大，听说现在都到9了，以前的6又不兼容了，上生产的系统，还是不要依赖这种变化太大的技术了，不然后期重构和维护成本很大。反观vue，从早期1到现在的2， 和后来马上要出的3 语法变化都不大，况且，我还要兼顾小程序研发，而小程序的结构和vue很像，因此web部分我选用了Vue作为技术选型。

顺带推广一下自家小程序哈～～～

Vue手动快速移植小程序总结_第1张图片

1.2 关于移植小程序需求

最近微信官方推Kbone了，打出的口号就是vue和小程序同时支持，本想多研究研究的，但是由于目前的项目的一些限制，我们并没有完全依赖Vue的所有特性和组件，中间有一些换为我们自己的实现方式，因此Kbone并不一定能很好支持这种方式的项目，就不去研究了。况且手动移植会更加可靠些，毕竟是两个独立项目，调试起来会更方便一些，而且小程序和App本身从界面设计和应用需求上就会有些不同。

以下举个简单例子：

App的界面：

Vue手动快速移植小程序总结_第2张图片

小程序的界面：

Vue手动快速移植小程序总结_第3张图片

这里的主要区别的原因在于Tab的支持， Vue里的Tab在任何地方都可以把Tab内容作为独立页面来看待，有完整的生命周期，但是小程序里，除非是App的根页面可以配置正儿八经的Tab外，其它子模块都只能靠自己绘制和Component实现，而小程序的Component的生命周期(lifetimes)仅支持attach和detach两种, 以及(pageLifetimes)仅支持show和hide两种，因此，若采用直接移植的话，对于页面生命周期的相关逻辑，改动较大。因此在小程序内若需要保持两个页面（首页、订单页）的逻辑独立性，我们在小程序内把订单入口作为按钮引入。

注意：这里这么改变的原因，仅仅在于我们是App先入为主，小程序是从App的逻辑迁移过来才这么设计的。如果一开始就是小程序先研发，则完全可以通过Component方式实现Tab的切换逻辑，并且Vue同样支持这样的结构。

 

由于是从后端Java研发转到的前端，不管是Vue还是小程序都是半路出家，因此里边可能有很多错误，欢迎指出。

 

2. 从Vue迁移到小程序的一些总结

由于我之前没有真正参与过完整的小程序开发，这也是我第一次自己上手迁移了一个模块后进行的总结，粗浅的了解了一些小程序的特性。因此可能小程序还有一些更好的特性我没有涉及到的，各位就根据自己的实际情况看看吧。

2.1 组件封装

这个在Vue和小程序里都有同样的需求，App本身包括了很多功能模块，每个模块都是独立的Vue项目，可能都是不同的人负责研发的，为了维持App的UI设计和交互逻辑一致，我们把UI元素（如：按钮，对话框，Toast，表单元素等）独立封装为一个项目（类似一个Vant等独立的UI库，但是比它们简单，轻量地多）。组件封装我的看法如下：

1）逻辑一致

比如一个按钮的封装，在逻辑设计上App和小程序保持一致：按钮的类型定义，是否可用定义，loading状态定义，点击事件定义等等……，保持一致的好处在于，具体应用在各个页面中时，按钮相关的所有逻辑输入、输出都是一样的。

2）具体实现根据App和小程序体现区别

  1. Vue的封装

可参考的例子很多，这里主要参考这个Vue组件封装（以封装一个button组件为例）。 

在使用的时候就是如

import XXXButton from "shared-components/XXXButton"

// 注册(可全局可局部)
Vue.use(XXXButton);




// ..........

在Vue里 @代表事件输出， :代表参数输入，对应到组件内是 $emit() 输出事件， props 传入参数即可。

 

   2.小程序的封装

小程序的组件封装简单的多，在小程序的开发工具内，右键单击"新建Component"就行了～～～ 自动吧wxss, js, json, wxml四个文件都创建好了，按照正常的研发逻辑开发即可。

这里js文件承载逻辑，properties和Vue的props对应。事件输出则使用 this.triggerEvent("eventName",  eventDetail) 。使用的时候，在页面的.json文件中的usingComponents注册，然后正常使用即可。和Vue的例子类比则伪代码如下


// XXXPage.json
{
    "usingComponents": {
        "XXXButton": "../../../components/XXXButton/XXXButton"
    }
}

// XXXPage.wxml


   xxxxx


// XXXPage.js
//....
data: {
  loadingState: false
},
methods: {
  onButtonClick(e){
    // e.detail是输出参数
    console.log("button clicked",e.detail);
  }
}

2.2 页面

我所涉及的页面较简单，几乎是无脑操作，步骤大致如下：

1）元素

App的