对小程序框架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，一个页面或者组件对另一个组件中的方法直接调用，通过传入组件路径找到相应的组件，然后调用其方法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))

对小程序框架WePY的精简总结相关推荐

小程序框架 WePy中 -- 使用 zanUI组件
因为Wepy 中不能直接引入zanUI组件, 好在还有百度, 参考链接 https://github.com/brucx/wepy-zanui-demo(感谢); 我的做法是将源码下了下来, 源码中 ...
wepy微信小程序框架和wept第三方小程序开发工具
微信小程序框架wepy文档: 参考链接:https://segmentfault.com/a/1190000007580866 点击打开链接点击打开链接微信小程序第三方开发工具wept: 项目地址 ...
认识WebStorm-小程序框架wepy
WebStorm是一个功能强大的IDE,适用于JavaScript开发,适合使用Node.js进行复杂的客户端开发和服务器端开发. WebStorm具有对JavaScript,HTML, CSS及其现 ...
微信小程序开发框架—wepy快速入门
小程序框架wepy文档 Github地址 wepy官网:https://tencent.github.io/wepy/index.html 项目创建与使用安装wepy 以下安装都通过npm安装 ...
小程序框架对比 ( WePY / mpvue / Taro )
摘要: 对比小程序框架. 原文:小程序第三方框架对比 ( wepy / mpvue / taro ) 公众号:前端小苑 Fundebug经授权转载,版权归原作者所有. 众所周知如今市面上端的形态多种多 ...
原生开发小程序和 wepy 、 mpvue 对比
原生开发小程序和 wepy . mpvue 对比本文横向对比.探讨了下原生开发小程序,和目前比较热门的 wepy .mpvue 开发小程序三种方式的优势和劣势:由于三者的篇幅都比较多,本文只是简单 ...
微信小程序框架探究和解析
2019独角兽企业重金招聘Python工程师标准>>> 何为框架你对微信小程序的技术框架了解多少? 对wepy 框架进行一系列的深入了解微信小程序框架解析和探究小程序组件化框架 ...
滴滴开源小程序框架 Mpx
Mpx 是一款致力于提高小程序开发体验的增强型小程序框架,通过 Mpx,能够以最先进的 Web 开发体验 ( Vue + Webpack ) 来开发生产性能深度优化的小程序,Mpx 具有以下一些优秀特 ...
小程序开发框架WePY和mpvue使用感受
今天想和小伙伴聊聊小程序开发框架的问题. 种种原因,去年年末接触到了小程序,使用mpvue做了两个项目,也使用WePY做了一个项目,关于这两个框架的恩恩怨怨,我觉得我有资格说两句. 1.主人公介绍首 ...

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

对小程序框架WePY的精简总结相关推荐

最新文章

热门文章