小程序相关（网课笔记）

1.小程序的适配方案rpx 响应式

以iPone6的物理像素个数为标准：750rpx

1rpx = 目标设备宽度/750*px

小程序顶层已经做了viewport适配的处理

（注：viewport适配将980px宽度的页面显示在手机屏幕上，且没有滚动条；rem适配将一套设计稿的内容在不同机型上呈现的内容一致）

2.flex布局

flex-direction：

row：主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

3.小程序特点

没有DOM

组件化开发

体积小，单个压缩包体积不能大于2M

4.四个重要文件

*.js *.wxml *.wxss *.json

5.标签

<view>等同于<div>

<text>等同于<span>

<image>等同于<img>

<swiper>轮播图组件,将轮播图放在<swiper-item>中，设置indicator-dots属性为true显示圆点，设置indicator-active-color属性显示选中圆点的颜色

<scroll-view>可滚动内容区，设置enable-flex属性为true开启内部弹性盒模式，通过scroll-x和scroll-y属性设置滚动方向

6.生命周期

视图线程和服务线程

视图层开始初始化，逻辑层创建页面实例执行onLoad()和onShow()，之后视图层通知逻辑层发送初始化数据，视图层拿到数据开始初始化渲染，之后在逻辑层执行onReady()

onLoad：监听页面加载，页面一加载就执行，onLoad只执行一次，可以在这里发送请求

onShow：监听页面显示，显示基本结构，执行多次，在这里发送请求可能会发多次，影响性能

onReady:监听页面初次渲染完成，全部显示完毕，可以在这里发送请求（页面加载完再发请求）

onHide：监听页面隐藏

onUnload：监听页面卸载，页面关闭时触发

7.数据绑定（双花括号{{}}）

修改状态数据：this.setData()方法（this代表当前页面的实例对象；react的this.setState()在自身的钩子函数中修改是异步的，在非自身钩子函数中修改是同步的；小程序this.setData()始终同步）

页面实例对象属性中带有(...)的底层逻辑实现为object.defineProperty()(数据劫持代理)

8.事件绑定

事件流的三个阶段：捕获（从外向内），执行，冒泡（从内向外）

两种事件：冒泡事件（一个组件上的事件触发后事件会向父节点传递），非冒泡事件（一个组件上的事件触发后事件不会向父节点传递，通常为表单事件和自定义事件）

绑定事件：bind+事件名（绑定冒泡事件），catch+事件名(绑定非冒泡事件)

事件的回调函数：和生命周期平级

9.路由跳转

wx.navigateTo:保留当前页面跳转到小程序内除tabber页面以外的其他页面（返回成功或失败的回调，异步），url如果最前面不加/会被认为是相对路径

wx.redirectTo:关闭当前页面跳转到小程序内除tabber页面以外的其他页面（返回成功或失败的回调，异步），url如果最前面不加/会被认为是相对路径

wx.reLaunch:关闭所有页面，打开到应用内的某个页面（返回成功或失败的回调，异步），url如果最前面不加/会被认为是相对路径

10.获取用户信息

授权按钮：设置button，open-type属性值设置为getUserInfo，绑定事件bindgetuserinfo，事件回调函数与生命周期同级并返回一个res参数，里面是用户信息，通过this.setData()修改数据重新渲染页面即可

授权后获取用户信息：wx.getUserInfo使用前必须要用户授权，成功执行success，失败执行fail（回调函数用箭头函数保证this指向页面实例），在onLoad中使用

11.设置单行文本溢出隐藏

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

12.设置多行文本溢出隐藏

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

13.事件委托

将子元素的事件委托（绑定）给父元素

能够减少绑定的次数

事件委托原理：冒泡，所以触发事件的依然是子元素

如何找到触发事件的对象：event.target

currentTarget要求绑定事件的元素一定是触发事件的元素，target绑定事件的元素不一定是触发事件的元素