微信小程序学习笔记二
1. 小程序特点概述
- 没有
DOM - 组件化开发: 具备特定功能效果的代码集合
- 体积小, 单个压缩包体积不能大于
2M, 否则无法上线 - 小程序的四个重要的文件
*js*.wxml ---> view 结构 ---> html*wxss ---> view样式 ---> css*.json --->view 数据 ---> json文件 -
小程序适配方案: rpx (responsive pixel 响应式像素单位)
小程序适配单位px
规定任何屏幕下宽度为750px
小程序会根据屏幕的宽度不同自动计算rpx值的大小
Iphone6下 :1rpx = 1物理像素 = 0.5px
2. wxml语法
2.1 数据绑定
2.1.1 初始化数据
-
页面.js的data选项中定义初始化数据
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
message:"hello world"
},
})
在调试器中的 AppData中可以查看当前文件的数据
2.1.2 使用数据
- 模板结构中使用双大括号(插值表达式)
{{mssage}} -
注意事项: 小程序中为单项数据流 model ---> view
点开模拟器就可以看到页面解析后的样子了
2.1.3 修改数据
this.setData( { DATA_NAME: "NEW_VALUE"}, callback)- 特点:
2.1 同步修改:this.data值被同步修改
2.2 异步更新: 异步将setData函数用于将数据从逻辑层发送到视图层(异步)
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
message:"hello world"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('页面加载完成');
// 修改message的状态,语法: this.setData
console.log(this); // this 代表当前页面的实例对象
this.setData({message:'new Hello World'},function () {
console.log('数据更新完成')
})
}
})
- 在上面代码中我们知道了,
setData修改数据的操作, 在自身所带的钩子函数中是同步的, 下面我们来测试一下在非自身的钩子函数中修改数据是否同步 - 代码如下:
onLoad: function (options) {
// 这里我们定义了一个定时器, 延时两秒执行, 运行一下看在模拟器中看效果
setTimeout(() => {
this.setData({ message: 'new Hello World' }, function () {
console.log('数据更新完成')
})
}, 2000);
},
由此我们可以得出, 小程序的数据修改,在非自身的钩子函数中也是同步的
2.2 事件绑定
2.2.1 事件分类
事件分为冒泡事件和非冒泡事件：
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
- 非冒泡事件：表单事件和自定义事件通常是非冒泡事件
事件列表
| 类型 | 触发条件 | 最低版本 |
|---|---|---|
touchstart |
手指触摸动作开始 | - |
touchmove |
手指触摸后移动 | - |
touchcncel |
手指触摸动作被打断,如来电提醒,弹窗等 | - |
touchend |
手指触摸动作结束 | - |
tap |
手指触摸后马上离开 | - |
longpress |
手指触摸后,超过350ms再离开, 如果指定了事件回调函数并触发了这个事件, tap事件将不被触发 |
1.5.0 |
longtap |
手指触摸后, 超过350ms再离开 (推荐使用longpress事件代替) |
- |
transitionend |
会在 WXSS transition或wx.createAnimation动画结束后触发 |
- |
animationstart |
会在一个WXSS animation动画开始时触发 |
- |
animationiteration |
会在一个WXSS animation一次迭代结束时触发 |
|
animationend |
会在一个WXSS animation动画完成时触发 |
- |
touchforcechange |
在支持 3D Touch的iPhone设备, 重按时会触发 |
1.9.90 |
2.2.2 绑定事件
-
bind绑定: 事件绑定不会阻止冒泡事件向上冒泡
演示: 分别在index.wxml和index.js定义以下代码
<view class="goStudy" bindtap="clickParent">
<text catchtap="bindtap">{{message}}</text>
</view>
clickParent() {
console.log('clickParent()');
},
clickChild() {
console.log('clickChild()');
},
点击
text标签之后我们查看调试器中信息, 可以看到外层的父元素的tap事件也被触发了catch绑定: 事件绑定可以阻止冒泡事件向上冒泡演示: 我们将
index.wxml代码修改如下
<view class="goStudy" bindtap="clickParent">
<text catchtap="bindtap">{{message}}</text>
</view>
点击
text标签之后我们查看调试器中信息可以看到只打印了一个
clickChild(), 说明我们的默认冒泡事件被阻止了
2.2.3 向事件对象传参
- 在小程序开发的时候，有时候需要在点击事件触发之后拿到一个参数做为使用，小程序不像 Vue 可以直接点击事件中放参数，而小程序它只能通过自定义属性进行绑定参数使用。
- 语法:
data-KEY=VALUE
1.1 在index.wxml中这样写
<text catchtap="clickChild" data-msg="传递的hello world">{{message}}</text>
- 获取:
event.target.dataset.key || event.currentTarget.dataset.key
clickChild(e) {
console.log('clickChild()');
console.log(e.currentTarget.dataset.msg);
let newMsg = e.currentTarget.dataset.msg;
this.setData({message:newMsg});
},
-
Event.target和event.currenTarget的区别
3.1Event.target是触发事件的对象, 但不一定是绑定事件的对象, 如: 事件委托, 冒泡
3.2currentTarget触发事件的对象一定是绑定事件的对象, 没有事件委托