WePY 小程序

一、WePY介绍

WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。

二、WePY 使用

1、WePY的安装或更新都通过npm进行:

git base here:

(1)全局安装或更新 wepy-cli:

8291ee547ae91d689813dc3bad506e3f102

(2)查看 wepy-cli 版本:

c070941bf0ede6826c27384e3e905fe77d1

(3)创建 wepy 小程序项目:

7f7523fe22228f15474b3bac7628061da38

(4)切换至项目目录,安装依赖:

f317240c42dbed5bca6645015bbe4377977

(5)开启实时编译

0892c819fff2c2bf386012a0a16ea17a53f

2、代码高亮WebStorm/PhpStorm(其他工具参见wepy官网代码高亮

(1)打开Settings,搜索Plugins,搜索Vue.js插件并安装。

(2) 打开Settings,搜索File Types,找到Vue.js Template,在Registered Patterns添加*.wpy,即可高亮。

3、代码优化

(1)代码规范

  • wepy标签和原生一样
  • 自定义组件命名应避开:原生组件名(input、button、view、repeat等)、WePY的辅助标签<repeat>
  • 变量/方法名尽量使用驼峰式命名,避免使用$开头($开头的标识符是WePY内建属性/方法,可在js中以this.的方式直接使用,具体请参考API文档
  • app、pages、components文件名的后缀为.wpy,外链的文件可以是其它后缀。 具体请参考wpy文件说明
  • 支持ES6/7的一些新特性,框架在ES6(ECMAScript 6)下开发(默认使用babel编译),因此也需要使用ES6开发小程序,ES6中有大量的语法糖可以让我们的代码更加简洁高效。
  • wepy继承了wx对象的方法,建议在wepy框架开发中不要用到wx对象的方法,虽然运行时效果是一样,但是打包时会cli报错(wepy中没有wx对象)wepy中组件中使用的是class,vue中使用的的是对象。

(2)数据绑定

小程序页面渲染层和JS逻辑层分开的,setData操作实际就是JS逻辑层与页面渲染层之间的通信,在同一次运行周期内多次执行setData操作时,通信的次数是一次还是多次取决于API本身的设计。WePY使用脏数据检查对setData进行封装,在函数运行周期结束时执行脏数据检查,一来可以不用关心页面多次setData是否会有性能上的问题,二来可以更加简洁去修改数据实现绑定,不用重复去写setData方法。

(3)事件绑定以及传参优化

(4)框架默认对小程序提供的API全都进行了 Promise 处理,甚至可以直接使用async/await等新特性进行开发,同时修复了一些原生API的缺陷(如:wx.request的并发问题等)

(5)computed 计算属性computed计算属性(类型: { [key: string]: Function }),是一个有返回值的函数,可直接被当作绑定数据来使用,类似于data属性。需要注意的是,只要是组件中有任何数据发生了改变,那么所有计算属性就都会被重新计算。

(6)watcher 监听器

通过监听器watcher(类型: { [key: string]: Function })能够监听到任何属性的更新。监听器适用于当属性改变时需要进行某些额外处理的情形。

(7)WXS (WeiXin Script)

WePY 从1.7.x 版本开始支持 wxs 语法,但语法与原生 wxs 稍有出入

a.wxs是基于原生的wxs去实现的,只是通过编译把现在的语法编译为原生语法

②wxs必须是外链文件。并且后缀为.wxs

③wxs引入后只能在template中使用,不能在script中使用

(8)interceptor 拦截器

可以使用WePY提供的全局拦截器对原生API的请求进行拦截。具体方法是配置API的config、fail、success、complete回调函数。参考示例:

三、WePY项目的目录结构

dist目录为WePY通过build指令生成的目录,除额外增加的npm目录外,其目录结构与原生小程序的目录结构类似。

c7eeeaddd64af3f423b1d744ecdca9b8996

原生小程序:app(app.jsapp.jsonapp.wxss),page(page.jspage.jsonpage.wxmlpage.wxss),文件必须同名。WePY中则使用了单文件模式:app.wpypage.wpy

a9283a0967d75f2266bb5d333bae5c98c64 ==> 7538f8977c8428bfdd6a1fecd80de2807de

一个.wpy文件可分为三大部分,各自对应于一个标签:

  1. 脚本<script>部分,又可分为两个部分:

逻辑部分,除了config对象之外的部分,对应于原生的.js文件

配置部分,即config对象,对应于原生的.json文件

  1. 结构<template>部分,对应于原生的.wxml文件
  2. 样式<style>部分,对应于原生的.wxss文件

主要对目录的以下几点分析(其他目录文件详解类似于https://my.oschina.net/wangnian/blog/2050375中做的分析):

1、src文件夹

(1)components组件:

组件实例继承自wepy.component类,除了不需要config配置以及页面特有的一些生命周期函数之外,其属性与页面属性大致相同:

原生小程序支持js模块化,但彼此独立,业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用(如,模板A中绑定一个bindtap="myclick",模板B中同样绑定一样bindtap="myclick",那么就会影响同一个页面事件、数据)

WePY组件的所有业务与功能在组件本身实现,组件与组件之间彼此隔离(上述例子在WePY的组件化开发过程中,A组件只会影响到A所绑定的myclick,B也如此)

ps,在 1.7.2-alpha4 的实验版本中提供了对原生组件的支持

a.引用组件

页面可以引入组件,而组件还可以引入子组件

②循环渲染组件(1.4.6新增

WePY 1.x 版本中,循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签),必须使用WePY定义的辅助标签<repeat>

WePY组件是静态编译组件(在编译阶段编译进页面),每个组件都是唯一的一个实例,目前只提供简单的 repeat 支持(不支持在 repeat 的组件中去使用 props, computed, watch 等),因此如下:

③props 传值

props传值在WePY中属于父子组件之间传值的一种机制,包括静态传值与动态传值。

静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型

动态传值是指父组件向子组件传递动态数据内容,父子组件数据完全独立互不干扰。但可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果,也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。如果既使用.sync修饰符,同时子组件props中添加的twoWay: true时,就可以实现数据的双向绑定。

④组件通信与交互

wepy.component基类提供$broadcast$emit$invoke三个方法用于组件之间的通信和交互:

$broadcast

$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序

$emit

$emit$broadcast正好相反,组件发起事件后所有祖先组件会依次接收到$emit事件

$invoke

$invoke是一个页面/组件对另一个组件中的方法的直接调用,通过传入组件路径找到相应的组件,然后再调用其方法。

⑤组件自定义事件处理函数(.user事件后缀,1.4.8新增

示例如下(注意,如果用了自定义事件,则events中对应的监听函数不会再执行):

⑥slot 组件内容分发插槽

WePY中的slot插槽作为内容分发标签的空间占位标签,便于在父组件中通过对相当于扩展板卡的内容分发标签的“插拔”,更为灵活、方便地对子组件进行内容分发。

注意,父组件中的标签必须有slot属性,且值为子组件中对应的slot名,这样父组件内容分发标签中的内容(即便没有内容,子组件插槽中的默认内容也不会显示出来,只有删除了父组件中对应的内容分发标签,才能显示出来)会覆盖掉子组件对应插槽中的默认内容

eg:message-com.wpy:

message-page.wpy:

(2)mixins:Mixin 混合(公用的js)

混合可以将组件之间的可复用部分抽离,从而在组件中使用混合时,可以将混合的数据,事件以及方法注入到组件之中。混合分为两种:

  • 默认式混合(data、components、events、自定义方法),即组件未声明的选项将混合对象中注入组件之中,组件已声明的选项将不受影响
  • 兼容式混合(methods响应事件 小程序页面事件),即先响应组件本身响应事件,然后再响应混合对象中响应事件(Vue则相反,先执行mixin中的函数, 再执行组件本身的函数

eg:listMixin.js:

使用时引入然后注入到组件实例(最好放在data属性后,否则会偶发性报错),eg:

0be87614bed838674da72b945b8ea026795

(3)页面page.wpy

Page页面实际上继承自Component组件,即Page也是组件。除扩展了页面所特有的config配置以及特有的页面生命周期函数之外,其它属性和方法与Component一致:

(4)状态管理store(redux)

(5)app.wpy:小程序入口

app.wpy实例继承自wepy.app类,包含:config配置对象(对应原生的app.json文件,build编译时会根据config属性自动生成app.json文件)、globalData全局数据对象、自定义方法与属性、小程序生命周期函数。

在Page页面实例中,可以通过this.$parent来访问App实例。

(6)index.template.html:web页面的入口文件

2、project.config.json小程序项目配置文件

1.7.0 之后的版本会在根目录包含project.config.json,使用微信开发者工具–>添加项目项目目录请选择项目根目录即可根据配置完成项目信息自动配置。

1.7.0 之前生成的代码包可能不存在project.config.json文件,建议手动创建该文件后再添加项目。project.config.json文件内容如下:

3、wepy.config.js

原文地址 https://my.oschina.net/wangnian/blog/2245468