一、事件流
- 事件冒泡：从点击的元素开始触发，向上事件传播
阻止事件冒泡：event.stopProPagation()
- 事件捕获：多上级元素传递，传递到最具体的元素
btn.addEventListener('click',function() {//回调},true)
二、小程序中事件冒泡和阻止冒泡
bind+事件名="方法名" 向上传递事件，即事件冒泡
catch+事件名="方法名" 阻止事件冒泡
三、小程序生命周期
1. 整体小程序的生命周期：
```
App({
onLaunch() {}, 监听小程序初始化，只触发一次
onShow(){},小程序启动或切换到前台运行
onHide(),小程序切换到后台运行
})
```
2. 小程序页面级别的生命周期：
```
Page({
//页面创建完，只触发一次，通常获取后台数据或接收另一个页面的传参时使用
onLoad() {},
//进入页面就会触发
onShow() {},
//页面离开时触发
onHide() {},
//监听页面初次渲染完成
onReady() {}，
//监听页面卸载,类似于vue中destroyed
onUnload() {}
onReachBottom() {
console.log('到底页面底部')
},
//下拉触发
onPullDownRefresh() {
console.log('onPullDownRefresh')
},
//点击右上角分享时触发
onShareAppMessage() {
}
})
```
3. 微信小程序的路由管理
两种路由触发模式：
1.标签方式触发
vue:
<router-link to="">
小程序：<navigator url="要中转的路径?key=value">
接收：通过另一个页面在onload生命周期中接收
2.编程式触发
vue:
this.$router.push()
小程序跳转：
wx.navigateTo() 带历史回退
wx.redirectTo() 不保留历史，跳转到另一个页面，不能返回到上一页面 this.$router.replace()
wx.switchTab() 只跳转到tabBar页面，不带回退
wx.reLaunch() 即能跳转到tabBar页面，也能跳转到非tabBar页面，不带历史回退
4.动态样式
小程序支持的选择器：class选择器,id选择器，标签选择器，群组选择器，伪对象（:before,:after）
可以对class做动态样式处理，例如：
<button class="{
{ index===currentIndex? 'active':'' }}" >
{
{ item.typename }}
</button>
5.数据请求
JS原生：XMLHttpRequest,fetch
jQuery:$.ajax,$.getJSON,$.post(),$.get()
Vue:axios
React:fetch
微信小程序：wx.request() 与jQuery的$.ajax类似
wx.request({
url:'', //请求的接口地址
method:'get|post|put|delete',//请求方式
header:{},//设置请求头
data:{}, //传参
success() {}, //成功返回
fail() {},// 失败返回
})
注意：
1.小程序请求的接口必须是https协议
2. 请求接口之前要提前配置接口请求：
第一种方法：在微信小程序后台配置request合法域名
第二种方法：在开发者工具--详情--本地配置--勾选‘不校验合法域名’
上拉加载更多
1.onReachBottom() {} 页面自带的生命周期
2.scroll-view 实现局部区域的滚动和加载更多
6.组件
- 内置组件：微信小程序封装好的组件，直接拿来就能使用
- swiper：轮播组件，必须要和swiper-item配合使用
例如：
<swiper
class='banner'
indicator-dots="true"
indicator-color="#f00"
indicator-active-color="#ff0"
circular="true"
>
<swiper-item wx:for="{
{ banners }}" wx:key="{
{ item.id }}">
<image src="{
{ item.imgurl }}"></image>
</swiper-item>
</swiper>
参考:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
- scroll-view:局部滚动组件，也可以做上拉加载，下拉刷新，例如：
<scroll-view
scroll-y="true"
style="height:{
{ height }}px;"
bindscrolltolower="lower"
>
<view class="movie-item" wx:for="{
{ moveList }}" wx:key="{
{ index }}">
<image src="{
{ item.images.small }}"></image>
<view clas="movie-title">
{
{ item.title }}
</view>
</view>
</scroll-view>
- navigator
- video或audio
- 表单相关的组件（即小程序表单标签）
- button
- input
- picker
