[小程序] 导航 navigator 编程式导航 消息提示框 网络请求

导航方式

小程序的路由章节并不是需要学习怎么定义路由，因为路由已经在app.json全局配置文件中声明好了。在本章节我们需要掌握的就是如何实现page的切换。

page的切换小程序提供了两种实现方式，一种是通过组件来实现（声明式导航），另外一种是通过api实现（编程式导航）

1、基于组件

基于组件式的导航方式其实就是之前的声明式导航。

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

组件：navigator

该组件的属性比较多，需要注意下open-type，这里属性值稍微常用一点的就是switchTab，其是用来切换tabBar的

<!--pages/navigator/navigator.wxml-->
<text>pages/navigator/navigator.wxml</text>

<!-- 
    声明式导航：基于组件的导航方式
    组件：navigator
    可以将其看作是html的a标签
    url属性：去的地址，地址要带“/”
 -->
<navigator url="/pages/index/index">去首页</navigator>

<!-- 声明式导航也支持传递参数 -->
<navigator url="/pages/index/index?id=1&age=22">带参数去首页</navigator>

<!-- 菜单的切换 -->
<!-- 无效方式 -->
<navigator url="/pages/scrollView/scrollView">尝试切菜单</navigator>
<!-- 可用 -->
<navigator url="/pages/logs/logs" open-type="switchTab">尝试切菜单</navigator>

跳转去其他页面的时候，如果带参，则接收参数的页面需要在onLoad生命周期函数中接收形参options，其是一个普通对象，里面存放着传递过来的数据。

open-type 的合法值

值	说明	最低版本
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	对应 wx.redirectTo 的功能
switchTab	对应 wx.switchTab 的功能
reLaunch	对应 wx.reLaunch 的功能	1.1.0
navigateBack	对应 wx.navigateBack 的功能	1.1.0
exit	退出小程序，target="miniProgram"时生效	2.1.0

2、基于Api

基于Api的导航实质上就是基于事件+编程的方式来实现导航。

文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

具体的api可以参考文档，例如演示2个常用的api：

<!-- 基于Api形式的导航实现 -->
<view bindtap="tapHandler1">去tab中的index</view>
<view bindtap="tapHandler2">去nav1</view>
<view bindtap="tapHandler3">去nav1</view>

// 编程式导航方式
// wx.switchTab  等于  navigator + open-type=switchTab
tapHandler1: function(){
    
    
    wx.switchTab({
    
    url: "/pages/index/index"});
},

// wx.navigateTo  等于  navigator
// navigateTo，保留当前页面（目标页面左上角出现“返回”按钮），去应用内其它页面，但不能是tabbar中页面
tapHandler2: function(){
    
    
    wx.navigateTo({
    
    url: "/pages/nav1/nav1"});
},

// wx.redirectTo  等于  navigator + open-type=redirect
// redirectTo，不保留当前页面（目标页面左上角出现“首页”按钮），去应用内其它页面，但不能是tabbar中页面
tapHandler3: function(){
    
    
    wx.redirectTo({
    
    url: "/pages/nav1/nav1"});
},

tapHandler4: function(){
    
    
   wx.navigateTo({
    
    
      url:"/pages/index/index?id="+this.data.dataId+"&name="+this.data.name//导航传参
   })
},

事件方法传参

在事件注册所在的dom上

<button bindtap="事件处理方法" data-参数="值">点我去首页</button>

在事件处理方法里面获取传参:
toIndex(event){
    
    
   event.currentTarget.dataset.参数 //获取事件处理方法的传参的值
}

页面接受传来的参数

界面交互方法

1、显示消息提示框

wx.showToast({
    
    
  title: '成功',
  icon: 'success',
  duration: 2000
})

2、显示模态对话框

wx.showModal({
    
    
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    
    
    if (res.confirm) {
    
    
      console.log('用户点击确定')
    } else if (res.cancel) {
    
    
      console.log('用户点击取消')
    }
  }
})

3、显示 loading 提示框

注意：需主动调用 wx.hideLoading 才能关闭提示框

wx.showLoading({
    
    
  title: '加载中',
})

setTimeout(function () {
    
    
  wx.hideLoading()
}, 2000)

网络请求

文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

请注意：小程序只支持https和wss（WebSocket，其具备ws协议与wss协议）协议的网络请求。但是允许开发者在开发环境下使用http请求，不过在最终上线时必须要修改为小程序支持的协议类型。

1、网络请求的相关设置

虽然小程序只支持https和wss协议的网络请求。但是允许开发者在开发环境下使用http请求。如果需要在开发环境下使用http协议进行开发测试并且不对域名合法性进行校验，请记得开启支持：

最终上线时，需要有https的接口服务，并且需要在小程序官方后台中设置接口域名（为了安全，添加域名白名单），设置路径：小程序管理后台 / 开发 / 开发设置 / 服务器域名。如果条件允许，建议尽量在开发时就使用符合要求的域名配置而不是等到上线的时候再返工。

如果使用的测试号，请在测试号管理页面添加白名单。

域名可以使用给定测试域名：

• https://api.i-lynn.cn
• https://mpapi.iynn.cn

2、发起网络请求

在小程序的wx对象中，其已经提供了网络请求方法。

语法：wx.request(请求参数的对象)

文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

示例代码

wx.request({
    
    
    url: 'test.php', //仅为示例，并非真实的接口地址
    data: {
    
    
        x: '',
        y: ''
    },
    method: "GET",
    header: {
    
    
        'content-type': 'application/json' // 默认值
    },
    success (res) {
    
    
        console.log(res.data)
    }
})

注：在发起请求之前，需要在app.json文件中设置request请求的超时时间以防止网络堵塞导致程序卡死，时间单位为毫秒：

"networkTimeout": {
     
     
 "request": 10000
}

wx.request()的方法返回的对象信息包含如下几个属性：

• cookies：返回的cookies
• data：响应体
• header：响应头
• statusCode：http状态码
• errMsg：错误信息

例如：点击按钮发送一个网络请求请求数据并循环渲染

wxml代码

<!--pages/request/request.wxml-->
<text>pages/request/request.wxml</text>

<button type="primary" bindtap="send">发送请求</button>

<block wx:for="{
   
   {data}}" wx:key="index">
    <view>地区id：{
   
   {item.id}}，地区名：{
   
   {item.name}}</view>
</block>

js代码

Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
        data: []
    },

    /**
     * 发送网络请求
     */
    send() {
    
    
        wx.request({
    
    
            // 请求地址
            url: 'https://api.i-lynn.cn/area',
            // 请求方式
            method: "GET",
            // 请求参数
            data: {
    
    
                id: 1
            },
            // 成功请求的回调
            success: (res) => {
    
    
                console.log(res);
                this.setData({
    
    
                    data: res.data
                })
            }
        })
    }
})

3、缓存

文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html

小程序是有缓存的，但是它缓存没有过期时间，单个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB。如果缓存达到了上限，清除缓存，清除缓存机制：最久未被使用。

例如：在wxml结构中设置2个按钮，分别用于设置和获取缓存的数据

<!-- 设置缓存 -->
<button type="primary" bindtap="setCache">设置</button>
<!-- 获取缓存 -->
<button type="primary" bindtap="getCache">获取</button>

setCache: function () {
    
    
    // 同步存储
	wx.setStorageSync('key', 'value')
    // 异步存储
    wx.setStorage({
    
    
      key:"key",
      data:"value"
    })
},
    
getCache: function () {
    
    
    // 同步获取
	var value = wx.getStorageSync('key')
    // 异步获取
    wx.getStorage({
    
    
      key: 'key',
      success (res) {
    
    
        console.log(res.data)
      }
    })
},

重要的数据不要放在小程序缓存中。

需要注意，获取缓存数据的方法wx.getStorage方法为异步方法，在获取的时候要么加.then进行处理，要么加async + await进行处理。（推荐：再或者就是在方法名后面加上Sync来使用其同步的方法）在小程序开发工具中默认是不允许使用async和await的，如有使用需求，请开启增强编译功能，如图：