小程序标签

布局

view标签：盒子（div）可以写class和id

scroll-view：滚动效果  属性scroll-y 允许纵向滚动  scroll-x 允许横向滚动 注意纵向滚动盒子要有高度，横向要有宽度（可视范围）里面嵌套view

swiper和swiper-item：轮播图 里面嵌套view  属性：indicator-dots 显示面板指示点

text文本：属性selectable，长按选中文本内容 

rich-text：属性 nodes，把HTML字符串渲染为对应的ui结构

button按钮：属性open-type，可以调用微信提供的各种功能（客服、转发、获取用户权限、信息等等）

 image图片，默认宽约300px，高240px

navigator页面导航，类似于HTML中的a链接

样式

:nth-child()选择器：从前往后写几就选择第几个标签（盒子）

:nth-last-child()选择器：倒数从后往前

flex-wrap:wrap flex布局一行放不下允许换行 

box-sizing: border-box;   算盒子的边框不会在盒子外面增加像素

js

数据绑定，使用双大括号将变量名包起来在页面使用

动态属性绑定

 三元运算

 算数运算

事件绑定

常用事件

事件对象的属性列表

targe和current Target的区别

bindtap的语法格式

 在事件处理函数中为data中的数据赋值

事件传参

  bindinput 文本框

语法格式

 value可在input标签中动态绑定数据

 条件渲染

wx:if

结合block标签（起到包裹作用）使用wx:if 

hidden 控制显示隐藏 

 wx:if和hidden的对比

列表渲染

wx:for

  手动指定索引和当前项的变量名

wx:key的使用

  模板样式

rpx尺寸单位 

 rpx是微信小程序独有的，用来解决屏幕适配的尺寸单位

rpx的实现原理：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750px)

在较小的设备上，1rpx所代表的宽度较小

在较大的设备上，1rpx所代表的宽度较大

小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

rpx与px之间的单位换算

 样式导入@import

全局样式app.wxss 

 定义在app.wxss中的样式为全局样式，作用于每一个页面。 

局部样式

在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。

注意：

当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。

当局部样式的权重大于或者等于全局样式的权重时，才会覆盖全局样式。

 把身边放着样式名就可以查看权重

 全局配置

全局配置文件及常用的配置项

window

window节点常用的配置项

设置导航栏的标题

设置步骤：app.json>window>navigationBarTitleText

设置导航栏的背景色

设置步骤：app.json>window>navigationBackgroundColor

注意：指支持16进制的颜色

设置导航栏的标题颜色

设置步骤：app.json>window>navigationBarTextStyle

注意：可选值只有 black(黑色) 和 white(白色）

全局开启下拉刷新功能

设置步骤：app.json>window>把enablePullDownRefresh的值设置为true。

注意：开启的下拉刷新功能会作用于每个小程序页面。模拟器进行下拉刷新时可能会导致部分样式的丢失，在真机上却没事，所以要按真机调试。

设置下拉刷新时窗口的背景颜色

设置步骤：app.json>window>为backgroundColor指定16进制的颜色值。

设置下拉刷新时loading（加载中）的样式

设置步骤：app.json>window>为backgroundTextStyle指定dark值。

注意：backgroundTextStyle的可选值只有light(白色)和dark(灰色)

设置上拉触底的距离（快到底部时加载更多数据）

设置步骤：app.json>window>为onReachBottomDistance设置新的数值。

注意：默认距离为50px，如果没有特殊需求，建议使用默认值，后面不需要带单位。

tabBar（页面快速切换）

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。

在小程序中通常为为：

底部 tabBar

顶部 tabBar

注意：

tabBar中只能配置最少2个，最多5个tab页签

当渲染顶部tabBar 时，不显示icon，只显示文本

tabBar的6个组成部分

tabBar节点的配置项

每个tab项的配置选项

页面配置

页面配置中常用的配置项

 网络数据请求

小程序中网络数据请求的限制

处于安全性方面的考虑，小程序官方对数据接口的请求做出了两个限制：

只能请求HTTPS类型的接口

必须将接口的域名添加到信任列表中

配置request合法域名

配置步骤：登录微信小程序管理后台>开发>开发设置>服务器域名>修改request合法域名。

注意：

1、域名只支持https协议

2、域名不能使用IP地址或localhost

3、域名必须经过lcp备案

4、服务器域名一个月内最多可申请5次修改

发起get请求

查看返回的真是数据在res后面添加.data

发起post请求

 在页面刚加载时请求数据

跳过request合法域名校验

关于跨域和Ajax的说明

flex-wrap:wrap flex布局一行放不下允许换行 

页面导航

声明式导航

在页面上声明一个 <navigator> 导航组件

通过点击 <navigator> 组件实现页面跳转

导航跳转到tabBar页面

导航跳转到非tabBar页面

 后退导航

编程式导航

调用小程序的导航 api，实现页面跳转

导航到tabBar页面

 导航跳转到非tabBar页面

  后退导航

  

导航传参

声明式导航传参

编程式导航传参

在onload中接收导航参数

 页面事件

下拉刷新

配置下拉刷新窗口的样式

 监听页面的下拉刷新事件

 停止下拉刷新

 监听页面上拉触底事件

 配置上拉触底距离

小案例

定义获取实际颜色的方法

 页面加载时获取初识数据

渲染UI结构并美化页面效果

 上拉触底时获取随机颜色

添加loading提示效果

  对上拉触底进行节流处理

生命周期

什么是生命周期

生命周期的分类

 什么是生命周期函数

 生命周期函数的分类

应用的生命周期函数

 页面的生命周期函数

 wxs脚本

什么是wxs

wxs(WeiXin Script)是小程序独有的一套脚本语言，结合wxml，可以构建出页面的结构。

wxs的应用场景

wxs和JavaScript的关系

内嵌wxs脚本

定义外联的wxs脚本

使用外联的wxs脚本

  不能作为组件的事件回调

隔离性

 性能好

判断是否还有下一页数据

自定义组件

创建组件

局部引用组件

 全局引入组件

组件和页面的区别

 

组件样式隔离

组件样式隔离的注意点

修改组件的样式隔离选项

stylelsolation的可选值

 data数据

methods方法

 properties属性

data和properties的区别

 使用setData修改properties的值

数据监听器

 数据监听器基本用法

监听对象属性的变化

自定义组件-数据监听器-案例

 

 注意：··模板字符串

监听对象中所有属性的变化

 自定义组件-纯数据字段

1、什么是纯数据字段

2、使用规则

 3、使用纯数据字段改造数据监听器案例

 自定义组件 - 组件的生命周期

1、组件全部的生命周期函数

 2、组件主要的生命周期函数

3、lifetimes 节点（里面编写生命周期函数，以新方式为主)

 自定义组件 - 组件所在页面的生命周期

1、什么是组件所在页面的生命周期

2、pageLifetimes 节点

 3、生成随机的rgb颜色值

自定义组件-插槽

1、什么是插槽

2、单个插槽

 3、启用多个插槽

4、定义多个插槽

 5、使用多个插槽

自定义组件 - 父子组件之间的通信

1、父子组件之间通信的3种方式

 2、属性绑定

 3、事件绑定

    4、获取组件实例

  child（选中组件里面的）

this（当前页面的） 

自定义组件 - behaviors（代码共享）

1、什么是 behaviors

2、behaviors 的工作方式

  3、创建 behavior