#宿主环境-组件
View 普通视图块级元素
scroll-view 滚动视图，滚动列表
swiper 和 swiper-item 轮播图容器组件 和 轮播图item组件（三个轮播图放三个swioer-view）css中应用颜色中需要再（）后 空格.item代表前面的选择元素里所有包含item类名的元素。
Css：
text-align：center水平居中 line-align：垂直高度
display：flex横向
justify-content: space-around分散布局
scroll-view 滚动视图，scroll-y 纵向滚动 scroll-x 横向滚动 使用y竖向滚动必须固定高度height！x横向滚固定宽度！
swiper 常用属性：
indicator-dos：boolean类型 默认false 是否显示面板小圆点，直接属性在class后面
indicator-color：color类型 rgb 小圆点颜色
indicator-active-color：被激活的小圆点颜色
autoplay：boolean false 是否自动切换 直接属性不使用值
interval: number 5000 自动切换时间间隔
circulat：boolean false 是否采用衔接滑动 最后一张循环第一张，直接属性不使用值
text ：文本组件 类似span标签 行内元素 selectable属性实现长按选中文本内容效果（view组件不支持长按复制效果只有text组件加selectable支持）只给值 手机预览。
rich-text： 富文本组件 支持html字符串渲染为wxml结构。 nodes属性节点将html字符串渲染对应的ui结构
button：1:按钮组件 2：通过open-type属性可调用微信提供的各种功能（客服，转发，获取用户授权，获取用户信息等）
image：1：图片组件 2：默认宽高300px 、240px
navigator： 1：页面导航组件 2：类似于html中a链接
Button：默认灰色，想用不同类型按钮，type属性，type=”primary”主色调绿色 type=”warn”警告按钮红色默认纵向独占一行，size属性小尺寸按钮，size=”mini”横向 plain 镂空按钮
在app.json中的window中”style”:v2 控制最新版样式，否则样式中颜色老旧
Image：src属性加载具体图片 mode属性：指定图片的裁剪和缩放模式，常用属性值：
scaleToFill： 默认值，缩放模式，不包吃纵横缩放图片，使图片宽高完全拉伸至填满image元素，会失真
aspectFit：缩放模式 保持横纵比例缩放，使图片长边能完全显示出来
aspectFit: 缩放模式 保持横纵比例缩放 只保证图片的短边能完全显示出来，只在水平或垂直方向完整另一个分享截取
widthFix： 缩放模式 宽度不变 高度自动变化 保持原图宽高比不变
heightFix： 缩放模式 高度不变 宽度自动变化 …
-API
事件监听API：已on开头，用来监听事件触发。wx.onWindowResize(function callback)建通窗口尺寸变化事件
同步API：以Sync结尾，执行结构可通过函数返回值直接获取，如果执行出错会抛出异常，wx.setStorageSync(‘key’,’value’)向本地存储写入内容
异步API：需要通过succcess，fail，complete接受调用的结果，wx.request()发起网络数据请求，通过success回调函数接收数据
Wxml模板语法-事件绑定
类型 绑定方式 事件描述
tap bintab或bin：tap 手指触摸后马上离开，类似于click事件
input bindinput或bind：input 文本框输入事件
change binchange或 bin：change 状态改变时触发
事件对象的属性列表：图
事件对象event属性：
type string 事件类型，timeStamp int 页面打开到触发事件经过的毫秒数
Target（触发该事件的源头组件） obgect 触发事件组件的一些属性值集合 ，detail obg 额外信息
touches array和changedTouches （当前事件所绑定的组件）
事件传参，数据同步
通过调用this.setData（dataObject）方法，给页面data中的数据中心赋值。
小程序事件绑定不能在绑定事件的同时为事件处理函数传递参数，用data-*自定义属性传参，*代表参数的名字eg： data-info=”{{2}}”，获取值用 event.dataset.参数名
e.target.dataset.参数名
bindinput 语法格式：
e.detail.value
获取输入框最新内容
实现文本框和data之间的数据同步
1.定义数据，2.渲染结构3.美化样式4.绑定input事件处理函数。
条件渲染：wx:if
使用wx：if=”{{condition}}”判断是否需要渲染该代码，也可wx：elif和wx：else判断
结合 使用wx：if 一次性控制多个组件的展示与隐藏，使用标签多个组件包装起来，相比view包裹不会渲染。
hidden:
直接使用hidden=”{{condition}}” 控制元素显示与隐藏 ->切换样式方式
使用if 隐藏 -> 动态创建，移除元素
频繁切换使用hidden，控制条件复杂时使用if 搭配wx：elif，wx：else
for：
wx：for 循环渲染 当前循环索引用index，当前循环用item表示
手动指定索引和当前项的变量名：
wx:for-index 可指定索引的变量名
wx:for-item 当前项的变量名
wx:key
全局配置：window
全局下拉刷新：
enablePullDownRefresh 改为true
注意：不能自动合上
设置下拉刷新背景色（默认窗口背景色）：backgroundColor：#
对刷新小圆点样式 backgroundTextStyle 两个值：light或dark
设置上拉触底部的距离：
onReachBottomDistance设置数值 默认50px ->不建议修改
tabBar 导航栏
发起网络数据请求
安全考虑两个限制：
1：只能请求https类型的接口
2：必须将接口的域名添加到信任列表中
必须在详情中的项目配置第1个请求设定
配置request合法域名：
Eg：希望请求https://www.escook.cn域名下的接口。
步骤: 登入后台-> 开发 -> 开发设置-> 域名服务器 -> 修改request合法域名
发起GET请求：
调用提供的wx：request()方法，可发起。视频16集
发起POST请求：
调用提供的wx：request()方法，可发起。视频16集
页面刚加载时请求数据：
需要在页面刚加载时候自动请求初始化数据，需在onLoad事件调用获取数据的函数
直接this.前面请求的方法。
小程序实现页面导航两种方式：
声明式导航：1: 在页面上声明一个导航组件 2:通过点击组件实现页面跳转
编程式导航：1：调用小程序的导航API，实现页面跳转。
声明式导航：
1：使用组件跳转到指定的tarBar页面时，需要指定url属性和open-type属性，url表示要跳转的页面地址，必须/开头，open-type 跳转方式，必须为switchTab
2：导航到非tabBar页面（没有被声明为tarBar的页面），同上述一样只不过open-type必须为navigate。也可以省略open-type=navigate属性
3：后退导航：退到上一页面，需要指定open-type属性和delta属性，open-type必须为navigateBack，delta 必须是数字（后退的层级数），如果只返回一层也可省略delta=1，默认值就是 1
编程式导航：
1：导航到tarBar页面 调用wx.switch(Object object)方法，Object参数对象属性如下：
url： string 必填（是） 跳转tarBar路径 （路径后不可带参数）
success function 否 接口调用成功的返回函数
fail function 否 接口调用失败的返回函数
complete function 否 接口调用结束的回调函数（调用成功，失败都会执行）
2：导航到非tabBar页面（调用wx.navigateTo(Object object)其中 Object参数对象如下：
同上述一样，但url路径后可带参数。
3：后退导航：调用wx.navigateBack(Object object),其中参数对象如下：
同上述一样，但是，没有url，而是delta 类型：number 默认值：1 否 如果值大于页面数则返回到首页，只返回1层可省略
页面导航-导航传参：
声明式导航传参：navigator组件url后携带参数 ：
1参数与路径之间用？分隔
2参数键与参数值用=相连
3不同参数用&分隔 ->相当于and
编程式导航传参：调用wx.navigateTo(Object object) 可携带参数，也是在url后携带参数
在onLoad中接收导航传参：前面两种传参可直接在onLoad事件中获取到
可以把options放到data中
页面事件-下拉刷新事件
前面讲过全局下拉刷新，但是不推荐。更推荐单独的局部刷新
局部下拉刷新： 在页面的.json配置文件 enablePullDownRefresh设置为true
“backgroundColor” 配置下拉窗口颜色 “backgroundTextStyle” 配置下拉样式 仅支持dark和light
监听页面的下拉刷新事件：.js中 通过opPullDownRefresh()函
设计一个 按下按钮将count增加1，当下拉刷新时把count的值重置为0
停止下拉刷新的效果：
当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，需要手动隐藏效果，调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新
页面事件-上拉触底事件
加载更多数据。
监听页面上拉触底事件： 通过onReachBottom()函数监听
默认触发距离为50px，可修改，通过onReachBottomDistance属性更改触底距离。在页面.json中设置
上拉触底案例：
1获取随机颜色的方法
2在页面加载时获取初始数据
3渲染UI结构并梅花页面效果
4在上拉触底时调用获取随机颜色的方法
5添加loading提示效果
6对上拉触底进行节流处理
1：
2
3
需要展示loading提示框 调用wx.showLoading
关闭调用 wx.hideLoading 才能关闭提示框(无论请求成功还是失败都要隐藏)
效果
代码：
6节流 因为上拉触底会很请求多次（新版本已自动节流，不用额外设置，但要了解）
三步：
1在data中定义isloading节流阀
false表示当前没有进行任何数据请求
true 表示当前正在进行数据请求
2在getColors()方法中修改isloading节流阀的值
在刚调用getColor时将节流阀设置true
在网络请求的complete回调函数中，将节流阀重置为false
3在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制
如果节流阀的值为true，则阻止当前请求
如果节流阀的值为false，则发起数据请求
自定义编译模式
：通过代码编译之后每次到达首页再点击另一个编辑号的页面才看到效果 解决麻烦
添加编译模式
可删除
小程序生命周期
分类： 1应用生命周期 2页面生命周期
1指小程序从 启动->运行->销毁
2 指 小程序中 页面加载->渲染->销毁
wxs 基本用法
内嵌wxs脚本
module.exports.toUpper=function(str){
return str.toUpperCase()
}
通过名称m1调用toUppper方法
定义外联的wxs脚本
新建wxs
使用外联的wxs脚本
必须为标签添加module和src属性，module指定模块的名称，src指定要引入的脚本路径，必须相对路径。
但不能作为组件的事件回调。wxs具有隔离性：不能定义js定义的函数和小程序提供的API
案例：导航跳转
1创建美食页面：
2九宫格view改navigator组件实现跳转 加一个url指定要跳转的地址 加id和标题名称参数：
设置对应标题名称 需动态 不能写死 调用wx.setNavigatationTitle(Object object) 在onReady
之前保存的参数保存在onLoad()中，但是onReady不能直接拿onLoad的数据，所以需要转存到data中，用一个空的query名称存onLoad中的数据，
再通过onReady拿data中的数据。
列表页面：
列表页面的API接口 地址https://www.escook.cn/categories/:cate_id/shops
:cate_id是动态参数 表示分类的id
请求参数 ： _page表示请求第几条数据 _limit表示每页请求几条数据
美化样式：
.shop-item{
display: flex;
padding: 15rpx;
border: 1rpx solid#efefef;
margin: 15rpx;
border-radius: 8rpx;
box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.thumb image{
width: 250rpx;
height: 250rpx;
display: block; 去掉图与图分隔的空白
margin-right: 15rpx;
}
.info{ 文字纵向排列
display: flex;
flex-direction: column;
justify-content: space-around; 扩散
font-size: 24rpx;
}
.shop-title{
font-weight: bold;
}
限制是8页，但是控制台数字还是会显示十几页，但是页面不会，要解决当没有后续数据进行判断，不应该发起额外的请求：
判断是否还有下一页数据：
如果公式成立，证明没有下一页数据了
(当前)页码值每页显示多少条数据>=总数据条数 pagepageSize>=total
不会再往下页面走了！
onReachBottom: function () {
if(this.data.page*this.data.pageSize>=this.data.total){ 判断
//证明没有下一页数据了 显示消息提示用户
return wx.showToast({ 这个方法是用户提示
title: ‘数据加载完毕！’,
icon:‘none’ 如果没图标一定声明icon为none
})
下拉刷新数据： 手机并不会所以要在刷新的隐藏后加
解决触底之后回到顶端 刷新后 页码值重置为1 所以page和total都要清空：
但放这里也不合适，需要再getShopList()方法放一个参数cb，设置回调函数
complete:()=>{
wx.hideLoading()
this.setData({
isloading:false
})
// wx.stopPullDownRefresh()
cb && cb() 表示，如果存在cb 就调用cb函数
cb函数放在onPullDownRefresh()函数中去
不能直放在接下拉刷新中因数据请求是异步事件
