一、注意点
关闭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文件。
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,一个页面或者组件对另一个组件中的方法直接调用,通过传入组件路径找到相应的组件,然后调用其方法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))