对小程序框架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文件。
.脚本部分,即<script></script>标签中的内容,又可分为两个部分:
逻辑部分,除了config对象之外的部分,对应于原生的.js文件; 配置部分,即config对象,对应于原生的.json文件。 .结构部分,即<template></template>模板部分,对应于原生的.wxml文件。 .样式部分,即<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))
对小程序框架WePY的精简总结的更多相关文章
- 小程序框架WePY 从入门到放弃踩坑合集
小程序框架WePY 从入门到放弃踩坑合集 一点点介绍WePY 因为小程序的语法设计略迷, 所以x1 模块化起来并不方便, 所以x2 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...
- 微信小程序框架——wepy使后感
更新:2018年1月10日15:32:22 在ios8及部分机型下会有样式混乱的问题,经查找,原因是缺少浏览器前缀,需要加prefix. 解决方案见链接:wepy-less-autoprefix 另外 ...
- 带坑使用微信小程序框架WePY组件化开发项目,附带第三方插件使用坑
纯粹用来记录wepy及相关联内容,以防再犯~ 1. 接手的wepy项目版本是 1.7.2 ,so我没有初始化的过程.... 2. 安装wepy命令工具,npm install wepy-cli -g ...
- 认识WebStorm-小程序框架wepy
WebStorm是一个功能强大的IDE,适用于JavaScript开发,适合使用Node.js进行复杂的客户端开发和服务器端开发. WebStorm具有对JavaScript,HTML, CSS及其现 ...
- 【WePY小程序框架实战四】-使用async&await异步请求数据
[WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 [WePY小程序框架实战三]-组件传值 async await 是对promise的近一步优化,既解决了promise链 ...
- 【WePY小程序框架实战三】-组件传值
[WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型. 父组件 (paren ...
- 【WePY小程序框架实战二】-页面结构
[WePY小程序框架实战一]-创建项目 项目结构 |-- dist |-- node_modules |-- src | |-- components |-- a.wpy |-- b.wpy |-- ...
- 微信小程序框架探究和解析
何为框架 你对微信小程序的技术框架了解多少? 对wepy 框架进行一系列的深入了解 微信小程序框架解析和探究 小程序组件化框架WePY 在性能调优上做出的探究 开发者培训班上海专场PPT分享:小程序框 ...
- 美团小程序框架mpvue蹲坑指南
美团小程序框架mpvue(花名:没朋友)蹲坑指南 第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种限制折腾的死去活来的,单向绑定, 没有promise,请求数限制,包大小限制,各种反人 ...
随机推荐
- 虚方法(virtual)和抽象方法(abstract)的和接口(interface)的区别
虚方法(virtual)和抽象方法(abstract)的区别 2017年06月15日 13:41:26 阅读数:65 注:本文转载自 http://www.cnblogs.com/michaelxu/ ...
- Python19/1/11--标签与过滤器/Django模块导入继承/静态文件配置
1 模板语言之变量: -{{ }} 相当于执行了print -深度查询 . 如果是方法,不能加括号,不能传参数2 过滤器 {{ 变量|过滤器的名字:'参数' }} -add -default -s ...
- [Java算法] -- 1. 常用排序之冒泡排序和选择排序
使用Java语言实现冒泡排序和选择排序 推荐一个数据结构可视化的网站:http://zh.visualgo.net/zh (暂时访问不了) 对排序不太熟悉的朋友,建议去上面的网站学习一下,你将会发现一 ...
- PowerShell工作流学习-7-编写脚本工作流帮助
关键点: a)工作流中不支持基于注释的帮助(标识工作流的帮助文件的 .ExternalHelp 注释除外). b)支持get-help参数的方式:使用 .ExternalHelp 注释以便 Get-H ...
- Atomic in Redis
Since Redis is single-threaded, everything is atomic.
- 启动eclipse could not create the java Vittual Machine
查询并几种方法: 1.都说是 eclipse.ini 环境初始文件的内存问题,续增大堆内存大小,具体配置如,如果找不到问题所在可以试试(该方法是确定环境变量没问题下试行) -Xms64m-Xmx25 ...
- 《java从入门到精通》学习记录
目录 <Java从入门到精通>学习记录 3 基础的基础部分: 3 一. 常量与变量 3 1. 掌握: 3 (1) .常量与变量的声明方式: 3 (2) .变量的命名规则: 3 (3) .变 ...
- 洛谷P1776--宝物筛选(单调队列+多重背包)
https://www.luogu.org/problemnew/show/P1776 单调队列+多重背包的讲解https://www.cnblogs.com/JoeFan/p/4165956.htm ...
- 重构SP5中声明自定义扩展类为API调用
展的自定义类方法想要被前端异步调用必须在方法中 1.首先类必须继承自 AppService 类 2.方法必须指定特性 [ActionDescription("名称","编 ...
- linux和windows共享目录
常用的samba共享 1.安装samba:可以先检查下是否已经安装:rpm -qa | grep samba,没安装直接yum,安装命令:yum install samba 2.创建共享文件夹 mkd ...