微信小程序03

页面渲染

条件渲染

wx:if

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块

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

也可以用wx:elif和wx:else来添加一个else块

<view wx:if="{{length>5}}">1</view>
<view wx:elif="{{length>2}}">2</view>
<view wx:else>3</view>

block wx:if

因为wx:if是一个控制属性，需要将它添加到一个标签上，如果要一次性判断多个组件标签，可以使用一个标签将多个组件包装起来，并在上边使用wx:if控制属性

<block wx:if="{{length>5}}">
  <view>1</view>
  <view>1</view>
</block>

注意：并不是一个组件。它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

hidden

小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏

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

wx:if与hidden的对比

1.被wx:if控制的区域，框架有一个局部渲染的过程，会根据控制条件的改变，动态创建或销毁对应的uI结构

2.同时，wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染

3.相比之下，hidden简单得多，组件始终会被渲染，只是简单的控制显示与隐藏

4.总结:wx:if有更高的切换消耗而hidden有更高的初始化渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行条件不大可能改变则wx:if较好

列表渲染

wx:for

在组件使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项下标变量名默认为index,数组当前项的变量名默认为item

<view wx:for="{{list}}" wx:key="index">索引是：{{index}},item项是{{item}}</view>

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

1.使用wx:for-item可以指定数组当前元素的变量名

2.使用wx:for-index可以指定数组当前下标的变量名，示例代码如下：

<view wx:for="{{list}}" wx:key="index" wx:for-index="idx" wx:for-item="itname">索引是：{{idx}},item项是{{itname}}</view>

block wx:for

类似block wx:if，也可以将wx:for用在标签上，以渲染一个包含多节点的结构块，示例如下

<block wx:for="{{[1,2,3]}}" wx:key="index">
  <view>索引是：{{index}}</view>
  <view>item项是{{item}}</view>
</block>

列表渲染中key

1、key在列表循环中的作用

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态(如中输入内容，的选中状态),需要使用wx:key来指定列表中项目的唯一标识符

当数据改变触发渲染层重新渲染的时候，会校正带有key的组件,框架会确保他们被重新排序，而不是重新创建，以确保是组件保持自身的状态，并且提高列表渲染时的效率

2.key值的注意点

1.key值必须具有唯一性，且不能动态改变

2.key的值必须是数字或字符串

3.保留关键字*this代表在for循环中的item本身，它可以充当key值，但是有以下限制：需要item本身是一个唯一字符串或者数字

4.如果不提供wx:key;会报一个warning,如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

页面事件

下拉刷新

下拉刷新的概念及应用场景

概念:下拉刷新是移动端更新列表数据交互行为，用户通过手指在屏幕上自上而下的滑动，可以触动页面的下拉刷新，更新列表数据

应用场景：在移动端，数据列表是常见的页面效果，更新列表数据是最基本的页面需求，相比按钮刷新、定时刷新来说，下拉刷新的用户体验友好，已经成为移动端列表数据的最佳解决方案

启用下拉刷新

两种方式

1.需要在app.json的window选项中或者页面配置中开启enablePullDownRefresh.但是,一般情况下，推荐在页面配置中为需要的页面单独开启下拉刷新行为

2.可以通过wx.startPullDownRefresh()触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致

配置下拉刷新窗口的样式

需要在app.json的window选项中或者页面配置中修改backgroundColor和backgroundTextStyle选项

1.backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制颜色值

2.backgroundTextStyle用来配置下拉刷新loading的样式,仅支持dark和light.

监听页面下拉刷新事件

为页面添加onPullDownRefresh()函数，可以监听用户在当前页面的下拉刷新

停止下拉刷新效果

当处理下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的loading效果。此时，调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新

上拉加载更多

上拉加载更多的概念及应用场景

概念：在移动端，随着手指不断向上滑动，当内容要到达屏幕底部的时候，页面会随之不断地加载后续内容，直到没有内容为止，我们称之为上拉加载更多。上拉加载更多的本质是数据的分页加载。

应用场景：在移动端，列表数据的分页加载，首选的实现方式就是上拉加载更多

配置上拉触底的距离

配置上拉加载触底的距离

可以在app.json的window选项中或者页面配置中设置触底距离onReachBottomDistance.单位为px,默认的距离是50px.

监听页面的上拉触底事件

为页面添加onReachBottom()函数，可以监听用户在当前页面的上拉触底事件，从而实现上拉加载更多列表数据的效果

其它页面事件

1.onPageScroll(object)

监听用户滑动页面事件。其中object参数说明如下：

属性	类型	说明
scrollTop	Number	页面在垂直方向已经滚动的距离(单位px)

2.onShareAppMessage(object)

监听用户点击页面内转发按钮（转发）或者右上角菜单“转发”按钮的行为，并自定义转发内容。其中object参数说明如下：

参数	类型	说明
from	String	转发事件来源。button:页面内转发按钮；menu:右上角转发菜单
target	Object	如果from值是button,则target是触发这次转发事件的button,否则为undefined
webViewUrl	String	页面包含组件时，返回当前的url

同时，此转发事件需要return一个object，用于自定义转发内容，返回内容如下：

字段	说明	默认值
title	转发标题	当前小程序名称
path	转发路径	当前页面path，必须是以/开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径，代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是5:4	使用默认截图

onShareAppMessage: function (obj) {
    console.log(obj)
    return {
      title:'转发标题',
      path:'/pages/index/index',
      imageUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574138116103&di=fa7a559a2149efb8397937ac860225a3&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F12%2F20181012135421_yctdg.jpg'
    }
  }

3.onTabItemTap(object)

点击tab时触发，其中object参数说明

参数	类型	说明
index	String	被点击tabItem的序号，从0开始
pagePath	String	被点击tabItem的页面路径
text	String	被点击tabItem的按钮文字

页面导航

小程序页面导航的两种方式

1.声明式导航：通过点击navigator组件实现跳转的方式

2.编程式导航：通过调用小程序的API接口实现跳转的方式

声明式导航

1.导航到非tabBar页面

非tabBar页面指的是没有当作tabBar进行切换的页面

示例代码如下：

<navigator url="/pages/index/index">去index页面</navigator>

上述代码使用url属性指定要跳转到的页面路径；其中，页面路径应该以/开头，且路径必须提前在app.json的pages节点下声明，才能实现正常的跳转

2.导航到tabBar页面

tabBar页面指的是被当作tabBar进行切换的页面。如果navigator组件单纯使用urI属性，无法导航到tabBar页面，需要结合open-type属性导航。

示例代码如下：

<navigator url="/pages/home/home" open-type="switchTab">返回到home页面</navigator>

3.后退导航

如果后退到上一个页面或多级页面，需要把open-type设置为navigateBack，同时使用delta属性指定后退的层数，示例代码如下：

 <navigator open-type="navigateBack" delta="2">后退</navigator>

注意:此页面和上一级页面不能在tabBar里面注册，否则不能实现后退功能

编程式导航

1.导航到非tabBar页面

通过wx.navigateTo(Object object)方法，可跳转到应用内的某个页面。但是不能跳转到tabBar页面。其中Obeject参数对象的属性列表如下：

属性	类型	是否必填	说明
url	String	是	需要跳转的应用非tabBar的页面路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如path?key=value&key2=‘value2’
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功，失败都会执行）

示例代码：

 bindtap:function(){
    wx.navigateTo({
      url: '/pages/index/index',
    })
  }

2.导航到tabBar页面

通过wx.switchTab(Object object)方法，可以跳转到tabBar页面，并关闭其他所有非tabBar页面。其中Object参数对象属性列表如下：

属性	类型	是否必填	说明
url	String	是	需要跳转的tabBar页面（需要在app.json的tabBar字段定义的页面），路径后不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功，失败都会执行）

xx:function(){
    wx.switchTab({
      url: '/pages/home/home',
    })
  }

3.后退导航

通过wx.navigateBack(Object object)方法，关闭当前页面，返回上一页面或多级页面。其中Object参数对象属性列表如下

属性	类型	是否	说明
delta	number	是	返回的页面数，如果delta大于现有页面数，则返回到首页
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口结束的回调函数（调用成功，失败都会执行）

示例代码：

vvv:function(){
    wx.navigateBack({
      delta:1
    })
  }

导航传参

1.声明式导航传参

navigator组件的url用来指定导航到的页面路径，同时路径后面还可以携带参数，参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔

代码如下

<navigator url="/pages/index/index?name=zs&age=12">去index页面</navigator>

2.编程式导航

wx.navigateTo(Object object)方法的object参数中，url属性用来指定需要跳转的应用内非tabBar页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔。

代码如下

 wx.navigateTo({
      url: '/pages/index/index?name=zs & age=12',
    })

页面接受导航传递过来的参数

不论是声明式导航还是编程式导航，最终导航到的页面可以在onLoad生命周期函数中接收传递过来的的参数

代码如下：

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
  }

自定义编译模式快速传参

小程序每次修改代码并编译后，或默认从首页进入，但是在开发阶段，我们经常会针对特定的页面进行开发，为了方便编译后直接进入对应的页面，可以配置自定义编译模式，步骤如下：

1.单击工具栏上的“普通编译”下拉菜单；

2.单击下拉菜单中的“添加编译模式”选项

3.在弹出的“自定义编译条件窗口”，按需添加模式名称、启用页面、启用参数、进入场景等。

网络数据请求

配置服务器域名

每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定域名进行网络通信

服务器域名请在[小程序后台–开发–开发设置–服务器域名]中进行配置，配置时需要注意：

1.域名只支持https(request\uploadFile\downloadFile)和wss(connetSocket)协议

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

3.域名必须经过ICP备案

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

跳过域名校验

在微信开发者工具中，可以临时开启 「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机

开启调试模式时，不会进行服务器域名的校验

**注意：**在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配置正确。

发起网络数据请求

发起get请求

调用 wx.request(Object object) 方法发起 get 请求，代码示例如下

wx.request({// 请求的URL地址，必须基于 HTTPS 协议
    url: 'https://www.liulongbin.top:8082/api/get',
    // 发送到服务器的数据
    data: { name: 'zs', age: 20 },
    method: 'GET',
    // 成功之后的回调函数
    success: function(result) {
        //result.data 就能获取服务器返回的数据
        console.log(result)
    }
})

发起post请求

调用 wx.request(Object object) 方法发起 post 请求，代码示例如下：

wx.request({// 请求的URL地址，必须基于 HTTPS 协议
    url: 'https://www.liulongbin.top:8082/api/post',
    // 发送到服务器的数据
    data: { name: 'zs', age: 20 },
    method: 'POST',
    // 成功之后的回调函数
    success: function(result) {
        //result.data 就能获取服务器返回的数据
        console.log(result)
    }
})

小程序中没有跨域限制

在普通网站开发中，由于浏览器的同源策略限制，存在数据的跨域请求问题，从而衍生出了 JSONP 和 CORS 两种主流的跨域问题解决方案。但是，小程序的内部

运行机制与网页不同，小程序中的代码并不运行在浏览器中，因此小程序开发中，不存在数据的跨域请求限制问题

关于微信小程序更多的数据请求内容，请翻阅 wx.request() 的相关文档：

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html