小步伐基础：流程。

一、前言

        该文章是个人的学习条记，是学习了黑马步伐的微信小步伐开发视频后写的条记，将老师所讲的内容重点汇总起来，目的是为了方便自己日后回首，同时也方便大家学习和了解小步伐的开发
        想要入门小步伐，那么看这一篇文章就够了！！！

B站视频链接
黑马步伐员前端微信小步伐开发教程，微信小步伐从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)_哔哩哔哩_bilibili

二、起步


1、组件

1.1、小步伐中组件的分类
        小步伐中的组件是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小步伐的组件分为了 9 大类，分别是：

视图容器	基础内容	表单组件
导航组件	媒体组件	map 地图组件
canvas 画布组件	开放能力	无停滞访问

----------（标红表现常用组件）----------

A、常用的视图容器类组件

        ①、view

                ~  普通视图区域
                ~  类似于 HTML 中的 div，是一个块级元素
                ~ 常用来实现页面的结构效果 

1. <view class="container1">
3. <view>A</view>
5. <view>B</view>
7. <view>C</view>
9. </view>

复制代码

1. .container1 view{
3. width: 100px;
5. height: 100px;
7. text-align: center;
9. line-height: 100px;
11. }
14. /* 背景颜色 */
16. .container1 view:nth-child(1){
18. background-color: lightgreen;
20. }
22. .container1 view:nth-child(2){
24. background-color: lightskyblue;
26. }
28. .container1 view:nth-child(3){
30. background-color: lightcoral;
32. }
35. /* 横线上分布对齐 */
37. .container1{
39. display: flex;
41. justify-content: space-around;
43. }

复制代码

        ②、scroll-view

                ~  可滚动的视图区域
                ~  常用来实现滚动列表效果

1. <scroll-view class="container1" scroll-y>
3. <view>A</view>
5. <view>B</view>
7. <view>C</view>
9. </scroll-view>

复制代码

1. .container1 view{
3. width: 100px;
5. height: 100px;
7. text-align: center;
9. line-height: 100px;
11. }
14. /* 背景颜色 */
16. .container1 view:nth-child(1){
18. background-color: lightgreen;
20. }
22. .container1 view:nth-child(2){
24. background-color: lightskyblue;
26. }
28. .container1 view:nth-child(3){
30. background-color: lightcoral;
32. }
35. /* 横线上分布对齐 */
37. .container1{
39. border: 1px solid red;
41. height: 120px;
43. width: 100px;
45. }

复制代码

   

• scroll-y 属性：答应纵向滚动
  
• scroll-x 属性：答应横向滚动
  
• 留意：使用纵向滚动时，必须给 scroll-view 一个固定高度
  

  
        ③、swiper 和 swiper-item

                ~  轮播图容器组件 和 轮播图 item 组件

1. .swiper-container{
3. height: 150px; /* 轮播图容器高度 */
5. }
8. .item{
10. height: 100%;
12. line-height: 150px;
14. text-align: center;
16. }
19. swiper-item:nth-child(1) .item{
21. background-color: lightcoral;
23. }
25. swiper-item:nth-child(2) .item{
27. background-color: lightgreen;
29. }
31. swiper-item:nth-child(3) .item{
33. background-color: lightskyblue;
35. }

复制代码

1. <!-- 轮播图区域 -->
3. <!-- indicator-dots 属性：显示面板指示点 -->
5. <swiper class="swiper-container" indicator-dots>
7. <!-- 第一项 -->
9. <swiper-item>
11. <view class="item">A</view>
13. </swiper-item>
15. <!-- 第二项 -->
17. <swiper-item>
19. <view class="item">B</view>
21. </swiper-item>
23. <!-- 第三项 -->
25. <swiper-item>
27. <view class="item">C</view>
29. </swiper-item>
31. </swiper>

复制代码

height：100% 是为了让他占满整个容器的高度

        swiper 常用属性
属性类型默认值说明indicator-dotsbooleanfalse是否表现面板指示点indicator-colorcolorrgba(0,0,0,.3)指示点颜色indicator-active-colorcolor#000000当前选中的指示点颜色autoplaybooleanfalse是否主动切换intervalnumber5000主动切换时间隔断circularbooleanfalse是否接纳衔接滑动

B、常用的基础内容组件

        ①、text

                ~ 文本组件
                ~ 类似于 HTML 中的 span 标签，是一个行内元素

1. <view>
2. <text selectable>niaho</text>
3. <!-- selectable长按复制 -->
4. </view>
6. <!-- 加 selectable 属性才可以实现该功能，且只能在 text 中用，不能在 view 中用 -->

复制代码

        ②、rich-text

                ~ 富文本组件
                ~ 支持把 HTML 字符串渲染文 WXML 结构

        通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构：
        （在商品详情页中会常常用到）

1. <rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

复制代码

                                

C、其他常用组件

        ①、button

                ~ 按钮组件
                ~ 功能比 HTML 中的 button 按钮丰富
                ~ 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获                     取用户信息等）

1. <view>----------通过 type 指定按钮类型----------</view>
4. <button>默认按钮</button>
6. <button type="primary">主色调按钮</button>
8. <button type="warn">警告按钮</button>
11. <view>----------size="mini" 小尺寸按钮----------</view>
14. <button size="mini">默认按钮</button>
16. <button type="primary" size="mini">主色调按钮</button>
18. <button type="warn" size="mini">警告按钮</button>
21. <view>----------plain 镂空按钮----------</view>
24. <button size="mini" plain>默认按钮</button>
26. <button type="primary" size="mini" plain>主色调按钮</button>
28. <button type="warn" size="mini" plain>警告按钮</button>

复制代码

app.json 中的  "style": "v2"  是用来控制样式版本的，把这个删掉，按钮的样式就变了，这个 v2 是新版的样式

        ②、image

                ~ 图片组件
                ~ image 组件默认宽度约 300px、高度约 240px

1. wxml中的
4. <image></image>
6. <image src="../../132.jpg"></image>
10. wxss中的
13. /* 给图片加上边框线，这个就是默认的长宽 */
15. image{
17. border: 1px solid red;
19. }

复制代码

但是，直接按上面的写，会发现图片变形了，我们可以通过 mode 属性来解决
image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：
mode 值说明scaleToFill（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全表现出来。也就是说，可以完整地将图片表现出来。aspecFill缩放模式，保持纵横比缩放图片，只包管图片的短边能完全表现出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。widthFix缩放模式，宽度不变，高度主动变革，保持原图宽高比不变heightFix缩放模式，高度不变，宽度主动变革，保持原图宽高比不变

        ③、navigator （后面会具体解说）

                ~ 页面导航组件
                ~ 类似于 HTML 中的 a 链接

---

2、小步伐 API

形貌
   小步伐中的 API 是由宿主环境提供的，通过这些丰富的小步伐 API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、当地存储、付出功能等
  
小步伐 API 分为 3 大类

①、变乱监听 API

• 特点：以 on 开头，用来监听某些变乱的触发
  
• 举例：wx.onWindowResize(function callback) 监听窗口尺寸变革的变乱
  

②、同步 API

• 特点1：以 Sync 末端的 API 都是同步 API
  
• 特点2：同步 API 的实行结果，可以通过函数返回值直接获取，假如实行出错会抛出异常
  
• 举例：wx.setStorageSync('key','value') 向当地存储中写入内容
  

③、异步 API

• 特点：类似于 jQuery 中的 $.ajax(options) 函数，必要通过 success、fail、complete 接收调用的结果
  
• 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据
  

3、WXML 模板语法

A、数据绑定

A.1、数据绑定的根本原则

        ~ 在 data 中定义数据
        ~ 在 WXML 中使用数据
                
A.2、在 data 中定义数据

        在页面对应的 .js 文件中，把数据定义到 data 对象（用了定义页面的初始数据）中即可：

1. Page({
3. data: {
5. // 字符串类型的数据
7. info: 'init data',
9. // 数组类型的数据
11. msgList: [{msg: 'hello'},{msg: 'world'}]
13. }
15. })

复制代码

A.3、Mustache 语法的格式

        把 data 中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号，也可以叫插值表达式）将变量包起来即可。语法格式为：

1. <view>{{ 要绑定的数据名称 }}<view>

复制代码

实例：
.js 文件中

1. Page({
3. data: {
5. // 字符串类型的数据
7. info: 'hello world'
9. }
11. })

复制代码

.wxml 文件中

1. <view>{{ info }}</view>

复制代码

效果

A.4、Mustache 语法的应用场景

        Mustache 语法的重要应用场景如下：
                ~ 绑定内容
                ~ 绑定属性
                ~ 运算（三元运算、算术运算等）

A.5、动态绑定内容

我们前面举例的输出 hello world 谁人例子就是动态绑定内容
                
A.6、动态绑定属性

实例：

1. Page({
3. data: {
5. imgSrc:'../../132.jpg'
7. }
9. })

复制代码

1. <image src="{{imgSrc}}"></image>

复制代码

利用前面学的知识，要使图片不变形的话可以如许写（mode 属性值为 widthFix）

1. <image src="{{imgSrc}}" mode="widthFix"></image>

复制代码

A.7、三元运算

实例：

1. Page({
3. data: {
5. randomNum:Math.random() * 10 //生成 10 以内的随机数
7. }
9. })

复制代码

1. <!-- 打印随机数 -->
3. <view>{{ randomNum }}</view>
6. <!-- 三元判断 -->
8. <view>{{ randomNum >=5 ? '随机数字大于或等于 5':'随机数字小于 5' }}</view>

复制代码

A.8、算数运算

1. Page({
3. data: {
5. randomNum:Math.random().toFixed(2) //生成一个带两位小数的随机数，例如 0.34
7. }
9. })

复制代码

1. <view>生成 100 以内的随机数：{{randomNum * 100}}</view>

复制代码

B、变乱绑定

B.1、定义

   变乱是渲染层到逻辑层的通讯方式。通过变乱可以将用户在渲染层产生的活动，反馈到逻辑层举行业务的处理
  

B.2、小步伐中常用的变乱

类型绑定方式变乱形貌tapbindtap 或 bind:tap手指触摸后马上脱离，类似于 HTML 中的 click（点击）变乱inputbindinput 或 bind:input文本框的输入变乱changebindchange 或 bind:change状态改变是触发
B.3、变乱对象的属性列表

当变乱回调触发的时候，会收到一个变乱对象 event，它的具体属性如下表所示：
属性类型说明typeString变乱类型timeStampInteger页面打开到触发变乱所颠末的毫秒数targetObject触发变乱的组件的一些属性值集合currentTargetObject当前组件的一些属性值集合detailObject额外的信息touchesArray触摸变乱，当前停留在屏幕中的触摸点信息的数组changedTouchesArray触摸变乱，当前变革的触摸点信息的数组

（标红表现实际开发用的比较多）

B.4、target 和 currentTarget 的区别

target 是触发该变乱的源头组件，而 currentTarget 则是当前变乱所绑定的组件。举例如下：

点击内部的按钮时，点击变乱以冒泡的方式向外扩散，也会触发外层 view 的 tap 变乱处理函数。
此时，对于外层的 view 来说：

• e.target 指向的是触发变乱的源头组件，因此，e.target 是内部的按钮组件
  
• e.currentTarget 指向的是当前正在触发变乱的谁人组件，因此，e.currentTarget 是当前的 view 组件
  

小拓展：上面谁人按钮和外框的实现代码

1. <view class="outer-view" bindtap="outerHandler">
3. <button type="primary">按钮</button>
5. </view>

复制代码

1. .outer-view{
3. display: flex;
5. align-items: center;
7. background-color: lightgreen;
9. height: 100px;
11. }

复制代码

B.5、bindtap 的语法格式

在小步伐中，不存在 HTML 中的 onclick 鼠标点击变乱，而是通过 tap 变乱来相应用户的触摸活动。
①、通过 bindtap，可以为组件绑定 tap 触摸变乱，语法如下：

1. <button type="primary" bindtap="btnTapHandler">按钮</button>

复制代码

1. Page({
3. data: {
5. },
8. btnTapHandler(e){ //按钮的 tap 事件处理函数
10. console.log(e) //事件参数对象 e
12. }
14. })

复制代码

B.6、在变乱处理函数中为 data 中的数据赋值

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：

1. Page({
3. data: {
5. count:0
7. },
10. CountChange(){
12. this.setData({
14. // 通过 this.data 访问旧值，count 旧值的名称，在旧值基础上 + 1
16. count:this.data.count + 1
18. })
20. }
22. })

复制代码

1. <button type="primary" bindtap="CountChange">+1</button>

复制代码

B.7、变乱传参

小步伐中的变乱传参比较特别，不能在绑定变乱的同时为变乱处理函数通报参数。例如，下面的代码将不能正常工作：

1. <button type="primary" bind:tap="btnHandler(123)">事件传参</button>

复制代码

原因：小步伐中，bindtap 把后面的内容当成变乱的名字，以是无法识别出后面的参数 123 ，而是把 123 也当成名字的一部分

精确的传参方式：
可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：

1. <button bind:tap="btnHandler" data-info="{{2}}">事件传参</button>

复制代码

• info 会被解析为参数的名字
  
• 数组 2 会被解析为参数的值
  

留意：
data-info="2" 直接如许写，传进去的是一个字符串的 2，要传数字 2，必要加 {{ }}

示例一：数字 2

1. Page({
3. data: {
5. },
8. btnHandler(e){
10. console.log(e)
12. },
14. })

复制代码

1. <button bind:tap="btnHandler" data-info="{{2}}">事件传参</button>

复制代码

示例二：字符 2

1. <button bind:tap="btnHandler" data-info="2">事件传参</button>

复制代码

示例：自增 + 2

1. Page({
3. data: {
4.     num:2
5. },
8. btnHandler(e){
9.             this.setData({
10.             num:this.data.num + e.target.dataset.info
11.         })
13.     }
15. })

复制代码

1. <button bind:tap="btnHandler" data-info="{{2}}">事件传参</button>

复制代码

留意：e.target.dataset.info 中的 e.target.dataset. 是固定写法，info 是参数名

B.8、bindinput 的语法格式

在小步伐中，通过 input 变乱来相应文本框的输入变乱，语法格式如下：

1. Page({
3. data: {
5. },
8. // input 输入框的事件处理函数
10. inputHandler(e){
12. //e.detail.value 是变化过后，文本框最新的值
14. console.log(e.detail.value)
16. }
18. })

复制代码

1. <input bindinput="inputHandler"/>

复制代码

通过 e.detail.value 拿到文本框最新的值

在文本框中每输入一个值，都会把新值打印出来

B.9、实现文本框和 data 之间的数据同步

实现步骤
①、定义数据

1. Page({
3. data: {
5. msg:'你好'
7. },
9. })

复制代码

②、渲染结构

1. <input value="{{msg}}" bindinput="inputHandler"/>
3. <!-- 通过 value 动态绑定 msg 里的值 -->

复制代码

③、美化样式

1. input{
3. border: 1px solid #eee;
5. padding: 5px;
7. margin: 5px;
9. border-radius: 3px;
11. }

复制代码

④、绑定 input 变乱处理函数

1. Page({
3. data: {
5. msg:'你好'
7. },
10. inputHandler(e){
12. this.setData({
14. // 通过 e.detail.value 获取到文本框最新的值
16. msg:e.detail.value
18. })
20. }
22. })

复制代码

C、条件渲染

C.1、wx:if

在小步伐中，使用 wx:if="{{condition}}" 来判断是否必要渲染该代码块：

1. <view wx:if="{{condition}}">True</view>

复制代码

假如 condition 为 True 则渲染，否则不渲染

也可以使用 wx:elif 和 wx:else 来添加 else 判断：

1. <view wx:if="{{type === 1}}">男</view>
3. <view wx:elif="{{type === 2}}">女</view>
5. <view wx:else>保密</view>

复制代码

1. Page({
3. data: {
5. type:1
7. },
9. })

复制代码

通过调试器的 AppData 去改变 type

C.2、联合 <block> 使用 wx:if

假如要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在 <block> 标签上使用 wx:if 控制属性，示例如下：

1. <block wx:if="{{true}}">
3. <view>view1</view>
5. <view>view2</view>
7. </block>

复制代码

1. <block wx:if="{{false}}">
3. <view>view1</view>
5. <view>view2</view>
7. </block>

复制代码

留意：<block> 并不是一个组件，他只是一个包裹性质的容器，不会在页面中做任何渲染。

C.3、hidden

在小步伐中，直接使用 hidden="{{condition}}" 也能控制元素的表现与隐藏：

1. <view hidden="{{false}}">条件为 true 隐藏，条件为 false 显示</view>

复制代码

1. <view hidden="{{true}}">条件为 true 隐藏，条件为 false 显示</view>

复制代码

C.4、wx:if 与 hidden 的对比

①、运行方式不同

• wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
  
• hidden 以切换样式的方式（display:none/block;）,控制元素的表现与隐藏
  

当条件不符合的时候，wx:if 对应的 view 会删除，等条件符合再重新创建，而 hidden 即使条件不符合也不会删除，只是隐藏起来而已。

②、使用建议

• 频繁切换时，建议使用 hidden
  
• 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 举行展示与隐藏的切换
  

D、列表渲染

D.1、wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

1. <view wx:for="{{array}}">
3. 索引是:{{index}} 当前项是:{{item}}
5. </view>

复制代码

1. Page({
3. data: {
5. arr1:['苹果','华为','小米']
7. },
9. })

复制代码

默认情况下，当前循环项的索引用 index 表现；当前循环项用 item 表现。

D.2、手动指定索引和当前项目的变量名*（*星号表现实际开发中不常用）

• 使用 wx:for-index 可以指定当前循环项的索引的变量名
  
• 使用 wx:for-item 可以指定当前项的变量名
  

示例代码：

1. <view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
3. 索引是:{{idx}} 当前项是:{{itemName}}
5. </view>

复制代码

D.3、wx:key 的使用

类似于 Vue 列表渲染中的 :key，小步伐在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而进步渲染的服从，示例代码如下：
   wx:key 的值直接来自数据源数组中的某个字段，而且这个字段必须确保在整个数组中是唯一的，如许才气有效地区分各个列表项。如许设置的目的是为了提拔列表渲染的服从和准确性，尤其是在列表数据发生变动时。

1. Page({
3. data: {
5. userList:[
7. {id:1,name:'小红'},
9. {id:2,name:'小黄'},
11. {id:3,name:'小白'}
13. ]
15. },
17. })

复制代码

1. <view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

复制代码

4、WXSS 模板样式

什么是 WXSS
WXSS 是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。

4.A、WXSS 和 CSS 的关系

WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 举行了扩充以及修改，以适应微信小步伐的开发。与 CSS 相比，WXSS 扩展的特性有：

• rpx 尺寸单元
  
• @import 样式导入
  

4.A.1、什么是 rpx 尺寸单元

rpx 是微信小步伐独有的，用来解决屏幕适配的尺寸单元。

        4.A.1.a、rpx 的实现原理

        rpx 的实现原理非常简单：鉴于不同设备屏幕的巨细不同，为了实现屏幕的主动适配，rpx 把全部设备的屏幕，在宽度上平分为 750 份（即：当前屏幕的总宽度为 750 rpx）。

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

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

        4.A.1.b、rpx 与 px 之间的单元换算（* 了解即可）

        在 iPhone6 上，屏幕宽度为 375 px（逻辑像素），共有 750 个物理像素（一些屏幕会用多个物理像向来代替一个逻辑像素），平分为 750 rpx。则：
        750 rpx = 375 px = 750 物理像素
        1 rpx = 0.5 px = 1 物理像素
设备rpx 换算 px （屏幕宽度 / 750） px 换算 rpx （750 / 屏幕宽度）
iPhone51 rpx = 0.42 px1 px = 2.34 rpxiPhone61 rpx = 0.5 px1 px = 2 rpxiPhone6 Plus1 rpx = 0.552 px1 px = 1.81 rpx 官方建议：开发微信小步伐时，设计师可以用 iPhone6 作为视觉稿的尺度。
开发举例：在 iPhone6 上假如要绘制宽 100px，高 20px 的盒子，换算成 rpx 单元，宽高分别为 200 rpx 和 40 rpx。

4.A.2、什么是样式导入

使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

4.A.2.a、@import 的语法格式

@import 后跟必要导入的外联样式表的相对路径，用 ；表现语句结束。示例如下：

1. /* common.wxss */
3. .small-p{
5. padding:5px;
7. }

复制代码

1. /* app.wxss */
3. @import "common.wxss";
5. .middle-p{
7. padding:15px;
9. }

复制代码

示例：

1. /* common.wxss */
3. .username{
5. color: red;
7. }

复制代码

1. /* index.wxss */
3. @import "/common/common.wxss";

复制代码

1. <view class="username">hello world</view>
3. <!-- class 用样式名即可 -->

复制代码

4.B、全局样式和局部样式

4.B.a、全局样式

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

4.B.b、局部样式

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

留意：
①、当局部样式和全局样式辩论时，根据就近原则，局部样式会覆盖全局样式
②、当局部样式的权重大于或等于全局样式的权重时。才会覆盖全局的样式

举例：

1. /* index.wxss 这个是局部样式 */
3. view{
5. padding: 10rpx;
7. margin: 10rpx;
9. background-color: lightcoral; /* 红色 */
11. }

复制代码

1. /* app.wxss 这个是全局样式 */
3. view{
5. padding: 10rpx;
7. margin: 10rpx;
9. background-color: lightskyblue; /* 蓝色 */
11. }

复制代码

1. <view>hello world</view>

复制代码

把鼠标挂在 view 上面就会出现，谁人（0,0,1）就是权重，会发现两个地方的权重都一样

5、全局设置

全局设置文件及常用的设置项
小步伐根目录下的 app.json 文件是小步伐的全局设置文件。常用的设置项如下：
①、pages

• 记录当前小步伐全部页面的存放路径（也会根据路径创建）
  
• 
  
  

②、window

• 全局设置小步伐窗口的外观
  
• 
  
  

③、tabBar

• 设置小步伐底部的 tabBar 效果
  
• 
  
  

④、style

• 是否启用新版的组件样式（或者选用新版样式）
  
• 
  
  

window 详解：

1、小步伐窗口的组成部分

2、了解 window 节点常用的设置项

属性名类型默认值说明navigationBarTitleTextString字符串导航栏标题文字内容 navigationBarBackgroundColor
HexColor#000000导航栏背景颜色，如#000000navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black / whitebackgroundColorHexColor#ffffff窗口的背景致backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark / lightenablePullDownRefreshBooleanfalse是否全局开启下拉革新onReachBottomDistanceNumber50页面上拉触底变乱触发时距页面底部隔断，单元为 px
大体分为三大类：

• navigationBar 开头的是对导航栏的利用
  
• background 开头的是对窗口背景的利用
  
• 剩下的两个是对页面效果的利用
  

3、设置导航栏的标题

设置步骤：app.json -> window -> navigationBarTitleText
需求：把导航栏上的标题，从默认的 “Weixin” 修改为 “李叶”，

4、设置导航栏的背景致

设置步骤：app.json -> window -> navigationBackgroundColor
需求：把导航栏标题的背景致，从默认的 #ffffff 修改为 #2b4b6b，效果如图所示：

5、设置导航栏的标题颜色

设置步骤：app.json -> window -> navigationBarTextStyle
需求：把导航条上的标题，从默认的 black 修改为 white，效果如图所示：

留意：navigationBarTextStyle 的可选值只有 black 和 white

6、全局开启下拉革新功能

概念：下拉革新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动利用，从而重新加载页面数据的活动。
设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true

留意点 1：在 app.json 中启用下拉革新功能，会作用于每个小步伐页面！
留意点 2：在模拟器上，下拉革新后过几秒会主动合上，而在真机利用时，却不会主动合上，这个会在后面举行解说

7、设置下拉革新时窗口的背景致

当全局开启下拉革新功能之后，默认的窗口背景为白色。假如自定义下拉革新窗口背景致，设置步骤为： app.json -> window -> 为 backgroundColor 指定 16 进制的颜色值 #efefef。效果如下：

留意：必须是 # 还有的 16 进制颜色值

8、设置下拉革新时 loading 的样式

当全局开启下拉革新功能之后，默认窗口的 loading 样式为白色，假如要更改 loading 样式的效果，设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值。效果如下：

留意：backgroundTextStyle 的可选值只有 light 和 dark

9、设置上拉触底的隔断

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的拉滑动利用，从而加载更多数据的活动。
设置步骤：app.json -> window -> 为 onReachBottomDistance 设置新的数值

留意：默认隔断为 50 px，假如没有特别需求，建议使用默认值即可。

留意：数值后面不必要加单元，一般情况下使用默认值就好，不必要特意去修改它

tabBar详解：

1、什么是 tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小步伐中通常将其分为：

• 底部 tabBar
  
• 顶部 tabBar
  

留意：

• tabBar 中只能设置最少 2 个、最多 5 个 tab 页签
  
• 当渲染顶部 tabBar 时，不表现 icon，只表现文本
  

2、tabBar 的 6 个组成部分

①、backgroundColor：tabBar 的背景致
②、selectedlconPath：选中时的图片路径
③、borderStyle：tabBar 上边框的颜色
④、iconPath：未选中时的图片路径
⑤、selectedColor：tab 上的文字选中时的颜色
⑥、color：tab 上文字的默认（未选中）颜色

在 app.json ,中添加，与 Window 谁人设置同级

3、tabBar 节点的设置项

属性类型必填默认值形貌positionString否bottomtabBar 的位置，仅支持 bottom / topborderStyleString否blacktabBar 上边框的颜色，仅支持 black / whitecolorHexColor否tab 上文字的默认（未选中）颜色selectedColorHexColor否tab 上的文字选中时的颜色backgroundColorHexColor否tabBar 的背景致listArray是tab 页签的列表，最少 2 个，最多 5 个 tab （红色是必填项）

4、每个 tab 项的设置选项

属性类型必填形貌pagePathString是页面路径，页面必须在 pages 中预先定义textString是tab 上表现的文字iconPathString否未选中时的图标路径；当 postion 为 top 时，不表现 iconselectedIconPathString否选中时的图标路径；当 postion 为 top 时，不表现 icon （红色是必填项）

示例：

1. //app.json
3. "tabBar": {
5. "list": [
7. {
9. "pagePath": "pages/index/index",
11. "text": "index"
13. },
15. {
17. "pagePath": "pages/logs/logs",
19. "text": "logs"
21. }
23. ]
25. },

复制代码

5、案例：设置 tabBar

步骤1、拷贝图标资源

①、恣意找几个图，拷贝到小步伐项目根目录中
②、将必要用到的小图标分为 3 组，每组两个，其中：

• 图片名称中包含 -active 的是选中之后的图标
  
• 图片名称中不包含 -active 的是默认图标
  

步骤2、新建 3 个对应的 tab 页面

通过 app.json 文件的 pages 节点，快速新建 3 个对应的 tab 页面，示例代码如下：

其中，index是首页，logs是消息页面，test是联系我们页面。
当然了，不一定是这些页面，大家按自己需求设置即可

步骤3、设置 tabBar 选项

①、打开 app.json 设置文件，如 pages、Window 平级，新增 tabBar 节点
②、tabBar 节点中，新增 list 数组，这个数字中存放的，是每个 tab 项的设置对象
③、在 list 数组中，新增每一个 tab 项的设置对象。对象中包含的属性如下：

• pagePath 指定当前 tab 对应的页面路径【必填】
  
• text 指定当前 tab 上按钮的文字【必填】
  
• iconPath 指定当前 tab 未选中时候的图片路径【可选】
  
• selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
  

1. "tabBar": {
3. "list": [
5. {
7. "pagePath": "pages/index/index",
9. "text": "index",
11. "iconPath": "/images/index.png",
13. "selectedIconPath": "/images/index-active.png"
15. },
17. {
19. "pagePath": "pages/logs/logs",
21. "text": "logs",
23. "iconPath": "/images/loge.png",
25. "selectedIconPath": "/images/loge_active.png"
27. }
29. ]
31. },

复制代码

推荐一个免费下载图标资源的网站

小步伐 icon_图标_矢量素材 免费下载 - 爱给网 (aigei.com)

6、页面设置

6.1、页面设置文件的作用

• 小步伐中，每个页面都有自己的 .json 设置文件，用来对当前页面的窗口外观、页面效果等举行设置。
  

6.2、页面设置和全局设置的关系

• 小步伐中，app.json 中的 Window 节点，可以全局设置小步伐中每个页面的窗口表现。
  
• 假如某些小步伐页面想要拥有特别的窗口表现，此时，“页面级别的 .json 设置文件” 就可以实现这种需求。
  

留意：当前页面设置与全局设置辩论时，根据就近原则，最终的效果以页面设置为准。

6.3、页面设置中常用的设置项

属性类型默认值形貌navigationBarBackgroundColorHexColor#000000当前页面导航栏背景颜色，如#000000navigationBarTextStyleStringwhite当前页面导航栏标题颜色，仅支持 black / whitenavigationBarTitleTextString当前页面导航栏标题文字内容backgroundColorHexColor#ffffff当前页面窗口的背景致backgroundTextStyleStringdark当前页面下拉 loading 的样式，仅支持 dark / lightenablePullDownRefreshBooleanfalse是否为当前页面开启下拉革新的效果onReachBottomDistanceNumber50页面上拉触底变乱触发时距页面底部隔断，单元为 px
示例：

1. "navigationBarBackgroundColor": "#ff0000",
3. "navigationBarTextStyle":"black"

复制代码

7、网络数据请求（暂时跳过）

7.1、小步伐中网络数据请求的限制

出于安全性方面的考虑，小步伐官方对数据接口的请求做出了如下两个限制：
①、只能请求 HTTPS 类型的接口
②、必须将接口的域名添加到信任列表中

7.2、设置 request 合法域名

需求形貌：假设在自己的微信小步伐中，希望请求 替换接口 域名下的接口
设置步骤：登录微信小步伐管理背景 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

提示：原视频的接口全部都失效了，无法使用，老师在评论区给出了新的接口地址（大概也没用了）https://applet-base-api-t.itheima.net/

留意：
①、域名只支持 https 协议
②、域名不能使用 IP 地址或 localhost
③、域名必须颠末 ICP 备案
④、服务器域名一个月内最多可申请 5 次修改

7.3、发起GET请求

调用微信小步伐提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下：

1. getInfo(){
3. wx.request({
5. url: 'https://applet-base-api-t.itheima.net/api/get', //请求的接口地址，必须基于 https 协议
7. method:"GET", //请求的方式
9. data:{ //发送到服务器的数据
11. name:"zs",
13. age:20
15. },
17. success:(res)=>{ //请求成功之后的回调函数
19. console.log(res.data)
21. }
23. })
25. }

复制代码

1. <button bind:tap="getInfo">发起get请求</button>

复制代码

7.4、发起 POST 请求

调用微信小步伐提供的 wx.request() 方法，可以发起 POST 数据请求，示例代码如下：

1. postInfo(){
3. wx.request({
5. url: 'https://applet-base-api-t.itheima.net/api/post', //请求的接口地址，必须基于 https 协议
7. method:"POST", //请求的方式
9. data:{ //发送到服务器的数据
11. name:"ls",
13. gender:"男"
15. },
17. success:(res)=>{ //请求成功之后的回调函数
19. console.log(res.data)
21. }
23. })
25. }

复制代码

1. <button bind:tap="postInfo">发起POST请求</button>

复制代码

在页面刚加载时请求数据
在很多情况下，我们必要在页面刚加载的时候，主动请求一些初始化的数据。此时必要在页面的 onLoad 变乱中调用获取数据的函数，示例代码如下：

1. onLoad:function(options){
3. this.getSwiper()
5. this.getGridList()
7. },
10. //获取轮播图的数据
12. getSwiper(){
15. },
18. //获取九宫格的数据
20. getGridList(){
23. }

复制代码

那么我们可以联合前面的例子，页面在加载的时候就发起 GET 和 POST 请求

1. postInfo(){
3. wx.request({
5. url: 'https://applet-base-api-t.itheima.net/api/post',
7. method:"POST",
9. data:{
11. name:"ls",
13. gender:"男"
15. },
17. success:(res)=>{
19. console.log(res.data)
21. }
23. })
25. },
28. getInfo(){
30. wx.request({
32. url: 'https://applet-base-api-t.itheima.net/api/get',
34. method:"get",
36. data:{
38. name:"rous",
40. gender:"女"
42. },
44. success:(res)=>{
46. console.log(res.data)
48. }
50. })
52. },
55. onLoad:function(options){
57. this.postInfo()
59. this.getInfo()
61. },

复制代码

1. <button bind:tap="postInfo">发起POST请求</button><button bind:tap="getInfo">发起GET请求</button>

复制代码

页面加载完不必要点按钮发起请求，主动就请求完成了

7.5、跳过 request 合法域名校验

假如后端步伐员仅仅提供了 http 协议的接口，暂时没有提供 https 协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，暂时开启 【开发环境不校验请求域名、TLS 版本及 HTTPS 证书】选项，跳过 request 合法域名的校验。

留意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

7.6、关于 跨域 和 Ajax 的说明

①、跨域题目只存在于基于欣赏器的 Web 开发中。由于小步伐的宿主环境不是欣赏器，而是微信客户端，以是小步伐中不存在跨域的题目。
②、Ajax 技能的焦点是依赖于欣赏器中的 XMLHttpRequest 这个对象，由于小步伐的宿主环境是微信客户端，以是小步伐中不能叫做 “发起 Ajax 请求”，而是叫做 “发起网络数据请求”。

8、案例 - 当地生活

效果图：（视频）

效果图：（我的）

8.1、首页效果以及实现步骤
①、新建项目并梳理项目结构
②、设置导航栏效果
③、设置 tabBar 效果
④、实现轮播图效果
⑤、实现九宫格效果
⑥、实现图片结构

1. <!--pages/test/test.wxml-->
2. <swiper>
3. <swiper-item wx:for="{{swiperList}}" wx:key="id">
4. <view>{{item.name}}</view>
5. </swiper-item>
6. </swiper>
7. <!-- 九宫格 -->
8. <view class="grid-list">
9.         <view class="grid-item" wx:for="{{gridList}}" wx:key="id" >
10.                 <image src="/img/android-brain.png" mode="widthFix"/>
11.                 <text>{{item.name}}</text>
12.         </view>
13. </view>
14. <view>
15.         <image class="img-box" src="/img/cabinet.png" mode=""/>
16.         <image class="img-box" src="/img/cabinet.png" mode=""/>
17. </view>
19. /* pages/test/test.wxss */
20. swiper {
21.         text-align: center;
22.         height: 250rpx;
23.         padding: 10px 10px;
27. }
29. swiper view {
30.         text-align: center;
33.         background-color: burlywood;
34.         width: 100%;
35.         height: 100%;
36. }
38. /* 九宫格 */
39. .grid-list {
40.         display: flex;
41.         flex-wrap: wrap;
42.         border-left: 1rpx solid #eabbbb;
43.         border-top: 1rpx solid black;
44.         background-color: darkgray;
45. }
47. .grid-item {
48.         margin: 6.66%;
49.         width: 20%;
50.         height: 100rpx;
51.         /* 居中 */
52.         display: flex;
53.         flex-direction: column;
54.         align-items: center;
55.         justify-content: center;
56.         border-right: 1rpx solid #eabbbb;
57.         border-bottom: 1rpx solid black;
58.         box-sizing: border-box;
59.         background-color: darkcyan;
60. }
62. .grid-item image {
63.         width: 60rpx;
64.         height: 60rpx;
65.         border-radius: 10%;
67.         background-color: burlywood;
68. }
70. .grid-item text {
71.         background-color: darkgray;
72.         border-radius: 10%;
74.         font-size: 24rpx;
75.         margin-top: 10rpx;
76. }
78. .img-box {
79.         background-color: rgb(41, 184, 100);
80.         border-radius: 10%;
81.         margin: 8%;
82.         width: 33.33%;
83.         height: 100rpx;
84.         display: inline-block;
85. }
86. // pages/test/test.js
87. Page({
89.   /**
90.    * 页面的初始数据
91.    */
92.   data: {
93.     swiperList:[{id:1,name:"ni"},{id:2,name:"nih"},{id:3,name:"niha"},{id:4,name:"nihao"}],
94.     gridList:[{id:1,name:"ni"},{id:2,name:"nih"},{id:3,name:"niha"},{id:4,name:"nihao"},{id:5,name:"ni"},{id:6,name:"nih"},{id:7,name:"niha"},{id:8,name:"nihao"},{id:9,name:"ni"}]
95.   },
96. /**
97.    * 生命周期函数--监听页面加载
98.    */
99. })
100. app.json---------------
101.   "tabBar": {
102.     "list": [{
103.       "pagePath": "pages/test/test",
104.       "text": "首页",
105.       "iconPath": "/img/android-brain.png",
106.       "selectedIconPath": "/img/android-brain.png"
107.     },{
108.       "pagePath": "pages/logs/logs",
109.       "text": "消息",
110.       "iconPath": "/img/art-tools.png",
111.       "selectedIconPath": "/img/art-tools.png"
112.     },{
113.       "pagePath": "pages/index/index",
114.       "text": "登录",
115.       "iconPath": "/img/bag.png",
116.       "selectedIconPath": "/img/bag.png"
117.     }]
118.   },
119. 标题栏没改

复制代码

三、视图与逻辑

学习目的

• 能够知道如何实现页面之间的导航跳转
  
• 能够知道如何实现下拉革新效果
  
• 能够知道如何实现上拉加载更多效果
  
• 能够知道小步伐中常用的生命周期函数
  

1、页面导航

1.1、什么是页面导航

页面导航指的是页面之间的相互跳转。例如，欣赏器中实现页面导航的方式有如下两种：
①、<a> 链接
②、location.href

1.2、小步伐中实现页面导航的两种方式

①、声明式导航

• 在页面上声明一个 <navigator> 导航组件
  
• 通过点击 <navigator> 组件实现页面跳转
  

②、编程式导航

• 调用小步伐的导航 API ，实现页面的跳转
  

1.2.1、声明式导航

1.2.1.1、导航到 tabBar 页面

tabBar 页面指的是被设置为 tabBar 的页面。
在使用 <navigator> 组件跳转到指定的 tabBar 页面时，必要指定 url 属性和 open-type 属性，其中：

• url 表现要跳转的页面的地址，必须以 / 开头
  
• open-type 表现跳转的方式，必须为 switchTab
  

示例代码如下：

1. <navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

复制代码

会出现下图所示文字，点击即可跳转

1.2.1.2、导航到非 tabBar 页面

非 tabBar 页面指的是没有被设置为 tabBar 的页面。
在使用 <navigator> 组件跳转到普通的非 tabBar 页面时，则必要指定 url 属性和 open-type 属性，其中：

• url 表现要跳转的页面的地址，必须以 / 开头
  
• open-type 表现跳转的方式，必须为 navigate
  

示例代码如下：

1. <navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

复制代码

留意：为了轻巧，在导航到非 tabBar 页面时，open-type="navigate" 属性可以省略。

1.2.1.3、后退导航（非tabBar页面）

假如要后退到上一页面或多级页面，则必要指定 open-type 属性和 delta 属性，其中：

• open-type 的值必须是 navigateBack，表现要举行后退导航
  
• delta 的值必须是数字，表现要后退的层级
  

示例代码如下：

1. <!-- 首页写导航跳转到 info -->
3. <navigator url="/pages/info/info" open-type="navigate">导航到 info 页面</navigator>

复制代码

1. <!-- info 写返回到上一级（首页，因为我们是从首页跳过来的） -->
3. <navigator open-type="navigateBack" delta="1">后退</navigator>

复制代码

留意：为了轻巧，假如只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1

1.2.2、编程式导航

1.2.2.1、导航到 tabBar 页面

调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：
属性类型是否必选说明urlstring是必要跳转的 tabBar 页面的路径，路径后不能带参数successfunction否接口调用乐成的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用乐成、失败都会实行）
代码示例如下：

1. gotoCart(){
3. wx.switchTab({
5. url: '/pages/cart/cart',
7. })
9. },

复制代码

1. <button bindtap="gotoCart">跳转到 Cart 页面</button>

复制代码

留意：一定要是 tabBar 页面才可以跳转

1.2.2.2、导航到非 tabBar 页面

调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：
属性类型是否必选说明urlstring是必要跳转到的非 tabBar 页面的路径，路径后可以带参数success function否接口调用乐成的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用乐成，失败都会实行）
代码示例如下：

1. gotoInfo(){
3. wx.navigateTo({
5. url: '/pages/info/info',
7. })
9. },

复制代码

1. <button bindtap="gotoInfo">跳转到 info 页面</button>

复制代码

1.2.2.3、后退导航（非tabBar页面）

调用 wx.navigateBack(Object object) 方法，可以返回上一级页面或多级页面。其中 Object 参数对象可选的属性列表如下：
属性类型默认值是否必须说明deltanumber1否返回的页面数，假如 delta 大于现有页面数，则返回到首页successfunction否接口调用乐成的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用乐成、失败都会实行）
代码示例如下：

1. gotoBack(){
3. wx.navigateBack()
5. },

复制代码

1. <button bind:tap="gotoBack">后退</button>

复制代码

接 1.2.2.2 的导航，跳转到 info 页面，然后在 info 页面写返回

留意：假如要后退多级的话，代码如下

1. gotoBack(){
3. wx.navigateBack({
5. delta:3
7. })
9. },

复制代码

后退一级可以省略，因为默认值就是一级

1.3、导航传参

1.3.1、声明式导航传参（非tabBar页面）

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

• 参数与路径之间使用  ？分隔
  
• 参数键与参数值用 = 相连
  
• 不同参数用 & 分隔
  

示例代码：

1. <navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

复制代码

1.3.2、编程式导航传参

调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，代码示例如下：

1. <button bind:tap="gotoInfo2">跳转到info页面</button>

复制代码

1. gotoInfo2(){
3. wx.navigateTo({
5. url: '/pages/info/info?name=ls&gender=男',
7. })
9. },

复制代码

1.3.3、在 on Load 中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 变乱中直接获取到，示例代码如下：
在跳转到的页面文件下的 .js 文件里写

1. onLoad(options) {
3. console.log(options)
5. },

复制代码

1.3.3.1、声明式导航传参

1. <navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

复制代码

1.3.3.2、编程式导航传参

1. <button bind:tap="gotoInfo2">跳转到info页面</button>

复制代码

1. //这个是写在跳转前的页面文件里的 .js 文件的，例如说，从 index 跳到 info，那么就写在 index.js 里gotoInfo2(){
3. wx.navigateTo({
5. url: '/pages/info/info?name=ls&gender=男',
7. })
9. },

复制代码

另一种访问方式，将传进来的参数保持到数组中，通过数组访问，代码示例如下：

1. //我们跳转到 info 所以下列内容写到 info.js
4. data: {
6. //保持传递进来的参数的数组
8. query:[]
10. },
13. onLoad(options) {
15. console.log(options)
17. this.setData({
19. query:options
21. })
23. },

复制代码

2、页面变乱

2.1、下拉革新变乱

概念：下拉革新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动利用，从而重新加载页面数据的活动。

2.1.1、启用下拉革新

启用下拉革新有两种方式：
①、全局开启下拉革新

• 在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true
  

②、局部开启下拉革新

• 在页面的 .json 设置文件中，将 enablePullDownRefresh 设置为 true
  

【实际开发中，推荐使用第二种方式，为必要的页面单独开启下拉革新的效果】

这个知识点前面已经讲过，这里再提一下，不明确可以往前翻看

2.1.2、设置下拉革新窗口的样式

在全局或页面的 .json 设置文件中，通过 backgroundColor 和 backgroundTextStyle 来设置下拉革新窗口的样式，其中：

• backgroundColor 用来设置下拉革新窗口的背景颜色，仅支持 16 进制的颜色值
  
• backgroundTextStyle 用来设置下拉革新 loading 的样式，仅支持 dark 和 light
  

2.1.3、监听页面的下拉革新变乱

在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉革新变乱。

1. onPullDownRefresh() {
3. console.log("触发了下拉刷新")
5. },

复制代码

1. "enablePullDownRefresh": true

复制代码

在页面下拉革新后就会出现

当然，我们也可在下拉革新变乱去完成一些东西，例如，在页面的 wxml 中有如下的 UI 结构，点击按钮可以让 count 值自增 +1：

1. data: {
3. count: 0
5. },
8. countAdd(){
10. this.setData({
12. count:this.data.count + 1
14. })
16. },

复制代码

1. <view>count值为：{{count}}</view>
3. <button bind:tap="countAdd">+1</button>

复制代码

在触发页面的下拉革新变乱的时候，把 count 的值重置为 0

1. onPullDownRefresh() {
3. this.setData({
5. count:0
7. })
9. },

复制代码

2.1.4、制止下拉革新的效果

【前面我们讲下拉革新的时候说过，在真机演示的时候下拉革新并不会主动结束，下面我们就通过实例解决该题目】

当处理完下拉革新后，下拉革新的 loading 效果会一直表现，不会主动消失，以是必要手动隐藏下拉革新的 loading 效果。此时，调用 wx.stopPullDownRefresh() 可以制止当前页面的下拉革新。示例代码如下：

1. onPullDownRefresh() {
3. this.setData({
5. count:0
7. })
9. //但数据重置成功之后，调用此函数，关闭下拉刷新的效果
11. wx.stopPullDownRefresh()
13. },

复制代码

2.2、上拉触底变乱

2.2.1、什么是上拉触底

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动利用，从而加载更多数据的活动。

2.2.2、监听页面的上拉触底变乱

在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底变乱。示例代码如下：

1. onReachBottom(){
3. console.log("触底了");
5. },

复制代码

留意：页面没有下拉状态是无法触发的，我们可以手动写一个下拉的状态

1. .box{
3. height: 2000rpx;
5. background-color: lightblue;
7. }

复制代码

1. <view class="box"></view>

复制代码

【这里会发现一个题目，每一次触底都会触发变乱，如上图所示触发了7次，但是在实际开发过程中，我们是要处理这个题目的，必要举行节流处理，用户在触底后请求还未完成的情况下不答应再发起额外的请求】

2.2.3、设置上拉触底隔断

①、上拉触底隔断指的是触发上拉触底变乱时，滚动条隔断页面底部的隔断。
②、可以在全局或页面的 .json 设置文件中，通过 onReachBottomDistance 属性来设置上拉触底的隔断。
③、小步伐默认的触底隔断是 50 px，在实际开发中，可以根据自己的需求修改这个默认值。

2.3、案例：上拉触底案例（未写）

案例实现步骤
①、定义获取随机颜色的方法
②、在页面加载时获取初始数据
③、渲染 UI 结构并美化页面效果
④、在上拉触底时调用获取随机颜色的方法
⑤、添加 loading 提示效果
⑥、对上拉触底举行节流处理




拓展：自定义编译模式

在开发的时候会发现每一次编译都会回到首页，不会停留在我们正在开发的页面，如许就很麻烦，通过自定义编译模式就可以解决这个题目

3、生命周期

3.1、生命周期

概念：生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。例如：

• 张三出生，表现这个人生命周期的开始
  
• 张三离世，表现这个人生命周期的结束
  
• 中间张三的一生，就是张三的生命周期
  

我们可以把每个小步伐运行的过程，也概括为生命周期：

• 小步伐的启动，表现生命周期的开始
  
• 小步伐的关闭，表现生命周期的结束
  
• 中间小步伐运行的过程，就是小步伐的生命周期
  

3.2、生命周期的分类

在小步伐中，生命周期分为两类，分别是：
①、应用生命周期

• 特指小步伐从启动 -> 运行 -> 销毁的过程
  

②、页面生命周期

• 特指小步伐中，每个页面的加载 -> 渲染 -> 销毁的过程
  

其中，页面的生命周期范围较小，应用步伐的生命周期范围较大，如图所示：

3.3、生命周期函数

生命周期函数：是由小步伐框架提供的内置函数，会伴随着生命周期，主动按序次实行。

生命周期函数的作用：答应步伐员在特定的时间点，实行某些特定的利用。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。

留意：生命周期强调的是时间段，生命周期函数强调的是时间点

3.4、生命周期函数的分类

小步伐中的生命周期函数分为两类，分别是：
①、应用的生命周期函数

• 特指小步伐从启动 -> 运行 -> 销毁期间依次调用的那些函数
  

②、页面的生命周期函数

• 特指小步伐中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数
  

4、WXS 脚本

4.1、WXS

概念：WXS （WeiXin Script）是小步伐独有的一套脚本语言，联合 WXML ，可以构建出页面的结构。

4.2、WXS 的应用场景

WXML 中无法调用在页面的 .js 中定义的函数，但是，WXML 中可以调用 WXS 中定义的函数。因此，小步伐 WXS 的典范应用场景就是 “过滤器”。

4.3、WXS 和 JavaScript 的关系

虽然 WXS 的语法类似于 JavaScript，但是 WXS 和 JavaScript 是完全不同的两种语言：
①、WXS 有自己的数据类型

• number 数值类型、string 字符串类型、object 对象类型、
  
• function 函数类型、array 数组类型、date 日期类型、regexp 正则
  

②、WXS 不支持类似于 ES6 及以上的语法情势

• 不支持：let、const、解构赋值、睁开运算符、箭头函数、对象属性简写、etc...
  
• 支持：var 定义变量、普通 function 函数类似于 ES5 的语法
  

③、WXS 遵照 CommonJS 规范

• module 对象
  
• require () 函数
  
• module.exports 对象
  

4.4、WXS 的根本用法

4.4.1、内嵌 WXS 脚本

        WXS 代码可以编写在 WXML 文件中的 <WXS> 标签内，就像 JavaScript 代码可以编写在 html 文件中的 <script> 标签内一样。
        WXML 文件中的每个 <wxs></wxs> 标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在 wxml 中访问模块中的成员：

1. <view>{{ml.toUpper("lll")}}</view>
4. <wxs module="ml"> //ml 就是模块名称
6. // 通过 module.exports 向外共享成员
8. module.exports.toUpper = function(str){
10. // 调用 toUpperCase() 方法，小写转大写
12. return str.toUpperCase()
14. }
16. </wxs>

复制代码

4.4.2、定义外联的 WXS 脚本

        WXS 代码还可以编写在以 .wxs 为后缀的文件内，就像 Javascript 代码可以可以编写在以 .js 为后缀名的文件中一样。示例代码如下：

1. function toLower(str){
3. return str.toLowerCase()
5. }
8. module.exports = {
10. toLower:toLower
12. }

复制代码

4.4.3、使用外联的 wxs 脚本

        在 wxml 中引入外联的 wxs 脚本时，必须为 <wxs> 标签添加 module 和 src 属性，其中：

• module 用来指定模块的名称
  
• src 用来指定要引入的脚本的路径，且必须是相对路径
  

示例代码如下：

1. <view>{{m2.toLower("lll")}}</view>
4. <!-- 导入 wxs -->
6. <!-- src:相对路径 ；module:给模块命名 -->
8. <wxs src="../../utils/tools.wxs" module="m2"/>

复制代码

4.5、WXS 的特点

4.5.1、与 JavaScript 不同

        为了低落 WXS 的学习本钱，WXS 语言在设计时大量借鉴了 JavaScript 的语法。但是本质上，WXS 和 JavaScript 是完全不同的两种语言！

4.5.2、不能作为组件的变乱回调

wxs 典范的应用场景就是 “过滤器” ，常常共同 Mustache 语法进利用用，但是，在 wxs 中定义的函数不能作为组件的变乱回调函数。


4.5.3、隔离性

隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。表如今如下两方面：
①、wxs 不能调用 js 中定义的函数
②、wxs 不能调用小步伐提供的 API

4.5.4、性能好

• 在 IOS 设备上，小步伐内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
  
• 在 Android 设备上，二者的运行服从无差别
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。