微信小程序学习

1.全局配置

pages字段

用于描述当前小程序所有页面路径

window字段

用于定义小程序所有页面的顶部背景颜色，文字颜色定义等

tabbar字段

用于定义客户端页面底部或顶部的菜单栏

networkTimeout字段

各类网络请求的超时时间，单位均为毫秒。

2. 页面配置

3. sitemap配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；

4.数据绑定

每一个小程序页面都有三个文件：index.wxml、index.wxss、index.js。
在index.js中的page字段的data属性里我们可以定义变量，然后在index.wxml中进行引用。

5.wx:for循环渲染

wx:for不仅可以渲染数组，还可以渲染对象
数组渲染

wx:for="{{数组}}"
wx:for-item="循环项的名称"
wx:for-index="循环项的索引"
wx:key="唯一的值" 用来提高列表渲染的性能

对象渲染

wx:for="{{对象}}"
wx:for-item="对象的属性的值"
wx:for-index="对象的属性"
wx:key="唯一的值" 用来提高列表渲染的性能

6.条件渲染

1. wx:if
   和vue中的条件渲染用法一样
   分别是 wx:if (v-if) 、 wx:elif (v-else-if) 、 wx:else (v-else)
2. hidden
   1. 直接在标签中添加hidden属性
   2. hidden="{{表达式}}"
      
3. 根据使用场景选择
   1. 频繁切换显示的时候使用hidden 因为它是通过更改样式的方式来切换显示
   2. 不频繁的切换显示的使用使用wx:if 因为它是通过直接把标签从页面结构中移除来切换显示的
   3. 就相当于vue 中的v-if和v-show一样

7.事件绑定

绑定关键字是 bind
例如输入框绑定输入事件

<input type="text" bindinput="handleInput"/>

改变：

1. click事件改成了tap事件
2. 给index.js中page字段的data数据赋值

Page({
	data:{
		num:0
	},
	handleInput(e){
		this.setData({
			num:e.detail.value
		})
	}
})
不能像vue中直接通过this赋值：this.num=e.detail.value
获取值的方法也改为：this.data.num 相比于vue多了个data

3. 不能在事件中直接传值，需要通过自定义属性的方式来传递参数，然后在事件中获取自定义属性

8.尺寸单位

rpx，可以根据屏幕宽度自适应。规定所有的屏幕宽度为750rpx。然后在根据屏幕实际宽度有多少px，换算1rpx等于多少px。
例如：iphone6的屏幕宽度为375px，共有750个物理像素，那么1rpx=0.5px=1物理像素

9.wxss选择器不支持*通配符

10.小程序标签

1. view 代替 div
2. text
   1. 文本标签
   2. 只能嵌套text
   3. 长按文字可以复制 selectable属性
   4. 可以对空格 回车 进行编码
3. image
   1. 默认宽度320px,高度240px
   2. 常用属性：
      1. lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
      2. mode：图片的裁减、缩放模式
      3. show-menu-by-longpress：开启长按图片显示识别小程序码菜单
4. swiper 轮播图组件
5. navigator（是块级元素） 类似超链接标签
   1. url：要跳转的页面路径 绝对路径 相对路径
   2. target： 默认值self 跳转自己小程序的页面 ， miniProgram其他小程序的页面
   3. open-type：跳转方式
6. rich-text 富文本标签，类似v-html
7. button
   1. size：按钮尺寸
   2. type：样式
   3. open-type：
      1. contact：直接打开 客服对话功能 需要在微信小程序的后台配置
      2. share：转发当前的小程序 到微信朋友中
      3. getPhoneNumber：获取当前用户的手机号码信息
      4. getUserInfo 获取当前用户的个人信息
      5. launchApp：打开APP
      6. openSetting：打开授权设置页
      7. feedback：打开“意见反馈”页面
8. radio
   1. 可以通过color属性修改选中颜色
   2. 绑定事件需要结合radio-group使用
9. checkbox

11.自定义组件

1. 父组件向子组件传递数据
   1. 在父组件使用子组件时绑定数据
      
   2. 在组件的js文件中定义绑定数据的数据类型和值
      
2. 子组件向父组件传递数据
   1. this.triggerEvent(“父组件事件”,要传递的参数);
   2. 在父组件中为子组件绑定事件：
      
3. slot插槽

12.应用生命周期

1. onLaunch：应用第一次启动就会触发的事件
2. onShow: 当应用被用户看到时（切手机页面如何再回来）
3. onHide：当应用被隐藏时（切手机页面）
4. onError：应用代码发生报错了就会触发
5. onPageNotFound：应用第一次启动的时候，找不到第一个入口页面的时候就会触发

13.页面生命周期

1. data：页面的初始数据
2. onLoad：监听页面加载
3. onShow：监听页面显示
4. onReady：监听页面初次渲染完成
5. onHide：监听页面隐藏
6. onUnload：监听页面卸载
7. onPullDownRefresh：监听用户下拉动作
8. onReachBottom：页面上啦触底事件的处理函数
9. onShareAppMessage：用户点击右上角转发
10. onPageScroll：页面滚动触发事件的处理函数
11. onResize：页面尺寸改变时触发
12. onTabItemTap：当前是tab页时，点击tab时触发