对小程序框架WePY的精简总结

大家下午好，萍子最近一直都在写小程序的项目，其中也涉及到了小程序的框架——WePY，讲真的，一开始对这个框架并没有很熟悉，所以也是看了多次它的对应文档，然后特此整理下来，写成博文保存一下，方便日后查看呀~
一、注意点

关闭ES6转ES5
关闭上传代码时样式自动补全
关闭代码压缩上传
本地开发选择dist目录，dist目录也用在开发者工具上实时预览和调试
WePY框架对应的开发目录为src

二、代码规范
- 变量方法名使用驼峰式命名，不能用$开头
- WePY文件的后缀名为.wpy；外链的文件可以是其他后缀
- 用ES6开发，语法糖简介代码
- 用Promise
- 事件绑定
原bindtap=“click”，改为@tap=“click”
原catchtap=“click”，改为@tap.stop=“click”
原capture-bind:tap=“click”，改为@tap.capture=“click”
原capture-catch:tap=“click”，改为@tap.capture.stop=“click”
- 事件传参
原bindtap=“click” data-index={{index}}，改为@tap=“click({{index}})”
- 事件绑定和冒泡
bind不会阻止冒泡事件，catch会阻止。
- 事件捕获阶段
1.5.0起，触摸类事件支持捕获阶段。
捕获阶段位于冒泡阶段之前，而且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。

三、.wpy文件说明
一个.wpy文件可分为三大部分，各自对应于一个标签：

1.脚本部分，即<script></script>标签中的内容，又可分为两个部分：
    逻辑部分，除了config对象之外的部分，对应于原生的.js文件；

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

2.结构部分，即<template></template>模板部分，对应于原生的.wxml文件。

3.样式部分，即<style></style>样式部分，对应于原生的.wxss文件。

其中，小程序入口文件app.wpy不需要template，所以编译时会被忽略。.wpy文件中的script、template、style这三个标签都支持lang和src属性，lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效时，会忽略内联代码。

各标签对应的lang值：

style：默认对应css，可选的有css、less、scss、stylus、postcss
template：默认对应wxml，可选的有wxml、xml、pug（原jade）
script：默认对应babel，可选的有babel、TypeScript

四、pages结构分析

config：页面配置对象，对应原生的page.json
component：页面组件列表对象，表明页面所引入的组件开发
data：页面渲染数据对象，存放可用于页面绑定的渲染数据
methods：bindtap等事件
events：组件事件处理函数对象，响应组件之间的$emit/broadcast/invoke所传递的事件的函数
其他：生命周期函数，其他自定义的方法、属性

五、WePY组件化

components目录下的文件为可重复使用的组件
当页面需要引入组件或组件需要引入子组件时，必须在.wpy文件的script脚本部分先import组件文件，然后在components对象中给组件声明唯一的组件ID，接着在template模板部分添加以component对象中所声明的组件ID进行命名的自定义标签以插入组件
如果同一个组件引入一次以上，需要分配不同的组件ID，因为组件ID是唯一标识，每个ID对应一个组件实例，为了避免两个以上的组件共同用一个实例与数据，其中一个组件数据变化时，另一个也发生变化
子组件的驼峰命名，在template中不能与vue那样写成短横杠式命名，就照搬即可

六、组件的循环渲染
1.4.6新增，循环渲染WePY组件时，必须使用WePY定义的辅助标签，原wx:for=“{{arr}}”,wx:key=”index”等，改为

七、computed计算属性
其是有返回值的函数，可直接被当作绑定数据来使用，因此类似于data属性，代码中可通过this.计算属性名来引用，模板也可通过{{计算属性名}}绑定data
注意：组件中数据发生变化，计算属性就会被重新计算

八、props传值
父组件引入了子组件，然后往子组件传值

静态传值：只能传string类型
父组件->子组件
父：
子：props={title：string}
onload（）{console.log(this.title)}
动态绑定：
父->子，.sync,父影响父
子->父，twoWay：true，子影响父

九、组件之间的通信与交互事件
$broadcast/emit/invoke，写于events对象中，methods中写的是bindtap等事件

$broadcast父组件发起，所有子组件都会收到此广播事件
$emit，子组件发起，往上冒泡式接收
$invoke，一个页面或者组件对另一个组件中的方法直接调用，通过传入组件路径找到相应的组件，然后调用其方法 this.$ invoke(“Path”,”Method”,”Arguments”)

十、组件自定义事件处理函数
例：@Event.user=“myFn”
@事件修饰符，Event事件名称，.user事件后缀
后缀：

.default：绑定冒泡型事件，如bindtap、.default可省
.stop：绑定捕获型事件，如catchtap等
.user：用户自定义组件事件，通过$emit触发，如果用了自定义事件，则events中对应的监听函数不会再执行

十一、slot组件内容分发插槽
父定义，子引用
父定义了但是没有内容，这样子设置的默认值也不会显示

十二、数据绑定
原生：this.setData({title:”content”})
WePY:this.title = “content”,需要注意的是异步更新数据时，须手动调用$apply方法，触发脏数据检查流程的运行

十三、wx.request接收参数

原生：
wx:request({
    url:'xxx',
    success:function(data){
        console.log(data);
    }
})
WePY:
wepy.request('xxx').then((data)=>console.log(data))

对小程序框架WePY的精简总结

猜你喜欢