Wxml,事件等
App
- App只能声明在app.js中
- onLaunch(){} //监听小程序的初始化
- getApp()去获取全局唯一的app实例
- 通过getApp()获取实例之后,不要私自调用生命周期函数
- 在每一个页面的js文件,都需要一个Page进行注册页面
WXML
- Mustache语法 :{ { }}
- 公共属性:id,class,style,hidden,data-*,bind*/catch*
列表
-
wx:for
默认值item
默认的下标变量 index
-
block 不是一个组件,只是一个包装元素,没有任何属性
条件渲染
-
wx:if
wx:elif
wx:else
-
wx:if与hidden的区别:
wx:if 切换消耗高
hidden 初次渲染消耗高
模板
-
template 模板标签
<template name="模板名"></template> 模板的使用 is="模板名"
-
传参
<template is= "模板名" data=:{ {...object}}>
-
接参
<template name="模板名" ></template>
<mark>data中为渲染的数据源,适用扩展运算符[…]解构对象</mark>
引用
-
include 只能引入普通的视图内容(非模板wxs模块)
-
import 引入模板
wxs:wx javascript
事件系统
- 事件是视图层到逻辑层的通讯方式
- 事件可以将用户的行为反馈到逻辑层进行处理
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
- 事件对象可以携带额外信息,如id,dataset,touches
事件的绑定:
-
bind+事件类型
-
catch+事件类型
相当于js中的on
-
tap 手指触摸事件 相当于click
事件定义方法:
<mark>不推荐用箭头函数,this为当前页面实例,使用箭头函数获取不到</mark>
注:1.获取当前data内的属性值时,要使用this.data.属性
2.设置data内属性值时, this.setData({ })
事件的分类
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递
<mark>bind事件绑定不会阻止冒泡事件向上冒泡</mark>
<mark>catch事件绑定可以阻止向上冒泡</mark>
事件对象
-
target :事件源参数的集合
-
currentTarget:当前事件触发的组件 参数的集合
-
若当前事件操作,直接作用到绑定的组件上时,两个属性基本一样
<mark>若触发事件的根源不是操作绑定事件函数的组件上,参数要在currentTarget上获取</mark>
Wxss
-
rpx:根据屏幕宽度进行自适应,规定屏宽为750rpx
建议开发微信小程序时,用哪个iphone6作为视觉稿的标准
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) iPhone6 1rpx = 0.5px 1px = 2rpx -
样式导入:
使用@import语句可以导入外联样式表
@import后跟需要导入的外联样式表的<mark>相对路径</mark>
用分号;标识语句结束