WePY1 vs WePY2

 

1、什么是WePY

微信小程序组件化开发框架WePY。将 Web App 和小程序进行对比。Web App 和小程序在功能上类似， Web App 在开发的时候，可能使用 Vue.js 作为其核心库，用 Webpack 进行打包。在微信小程序中，大家可以简单的将 WePY 理解为 Web App 里的 Vue.js + Webpack 的合体。

 

官方介绍：

WePY (发音: /'wepi/) 项目启动于 2017 年 11 月份， 是小程序最早的框架之一，是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。

 

其他框架：Taro、uni-app、mpvue....

 

2、WePY1 vs WePY2

 

1.入口申请调整

WePY 1 使用类的继承方式 export default class MyPage extends wepy.page {}

 

WePY 2 中调整为 wepy.page({})。将实例化的过程放在生命周期事件中。

在 WePY2 的环境当中，每个 WePY2 页面拥有独自的 WepyPage 实例。小程序也会有 WepyApp 实例。它们并非是继承自原生的 Page 和 App。WePY 提供 wepy.app，wepy.page，wepy.component 等入口 方法注册程序、页面、以及组件。注册后在组件的生命周期事件(onLaunch/onLoad/created)里，会自动创建相对应的 WePY 实例。

 

2.数据绑定机制调整

WePY 1 使用脏检查进行数据绑定，在异步函数中更新数据的时，必须手动调用$apply方法 WePY 2 中使用了 Vue Observer 实现数据绑定，不需要使用$apply()。

 

Vue Observer:https://segmentfault.com/a/1190000008377887?utm_source=tag-newest

 

 

3.避免文件编译时出现的问题

WePY 1 是通过文件编译创建的静态组件在动态循环遍历时会出现一些问题:

组件使用的是静态编译组件，即组件是在编译阶段编译进页面的，每个组件都是唯一的一个实例，目前只提供简单的 repeat 支持。不支持在 repeat 的组件中去用 props, computed, watch 等等特性。

WePY 2直接基于的小程序原生的组件去实现，避免了这一类问题。

 

 

4.Vue 模板语法

WePY 1 使用wxml来写 template

WePY 2中推荐使用 html 代替 wxml 来写 template，支持除 filter 之外的所有 Vue 模板语法。

 

 

5.编译方式改变

WePY 1 默认使用babel编译，基于文件编译

WePY 2 从基于文件编译调整为基于入口编译，对于图片等静态资源需要指定 static 选项 。

 

babel:https://www.babeljs.cn/docs/

 

6.组件引用方式

WePY 1 使用 import 的方式导入

WePY 2 中使用原生的 usingComponents 方式

 

 

7.单文件组成

WePY 1 ： <script>，<template>，<style>

WePY 2 ： <script>，<template>，<style>，<config>

 

8.二者不兼容

需要注意的是，WePY 1 的 cli 工具和 WePY 2 的 cli 工具并不能兼容和共存， WePY 1 的 cli 工具无法编译 WePY 2 的项目，同理 WePY 2 的 cli 工具也无法编译 WePY 1 的项目。在使用 npm 的 --global 参数安装时，将会进行版本覆盖。

 

 

3、其他

文档：

https://wepyjs.github.io/wepy-docs/1.x/

https://wepyjs.github.io/wepy-docs/2.x/#/

 

4、uni-app

uni-app 使用vue的语法+小程序的标签和API。

 

文档：https://uniapp.dcloud.io/README

 

开发注意：

1、单文件模式；

2、组件标签靠近小程序 <view></view> ....;

3、接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni；

4、为兼容多端运行，建议使用flex布局进行开发；

5、页面样式：早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx ；

6、目录结构：

┌─components uni-app组件目录

│ └─comp-a.vue 可复用的a组件

├─hybrid 存放本地网页的目录

├─platforms 存放各平台专用页面的目录

├─pages 业务页面文件存放的目录

│ ├─index

│ │ └─index.vue index页面

│ └─list

│ └─list.vue list页面

├─static 存放应用引用静态资源（如图片、视频等）的目录，

│ 注意：静态资源只能存放于此

├─wxcomponents 存放小程序组件的目录

├─main.js Vue初始化入口文件

├─App.vue 应用配置，用来配置App全局样式以及监听

├─manifest.json 配置应用名称、appid、logo、版本等打包信息

└─pages.json 配置页面路由、导航条、选项卡等页面类信息

 

7、生命周期

应用生命周期，只可在App.vue中监听，常用函数：

onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发

页面生命周期，常用：

onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载