新手小白上手微信小程序这一篇就够了白话讲解关于宿主环境提供的常用api第二篇

官网
小程序管理平台
小程序开放社区
本文记录学习宿主环境（微信客户端）为小程序提供的api。

1. wx.showToast() 一闪而过的弹出式提示。

wx.showToast({
	title: "提示的内容",
	icon: "弹框提示的类型",
	duration: 2000,
})

其中：
1. title: 弹框显示的内容。最多只能显示7个中文。
2. icon：可选值有：success-默认显示\error\loading\none-没有图标
3. duration: 弹框显示时间，默认是1500毫秒

一般这种会显示一定时间自动消失。当然你也可以在设定时间之前手动关闭弹框。wx.hideToast()

2. wx.showModal()模态对话框

一般需要用户明确知晓操作结果状态的话，会使用模态对话框来提示，同时附带下一步操作的指引。比如说错误提示，需要明确告知用户具体原因，就不适合用那种一闪而过的toast提示了。

wx.showModal({
      title: '标题',
      content: "需要告知用户的一些信息",
      confirmText: '确定',
      cancelText: '取消',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击次取消')
        }
      }
})

其中：
confirmText： 确定按钮的文本，默认是确定
cancelText： 取消按钮显示的文本，默认取消。
showCancel: 是否显示取消按钮，默认true。这个配置不显示，后面即使设置取消的文本取消按钮也是不显示的。
success： 用户点击按钮的回调函数。通常在这里做下一步的指引、操作。

3. wx.showLoading()、wx.hideLoading()弹出式加载状态

直接拿来用即可。这个特别说的。

wx.showLoading();
wx.request({
	success(){
		wx.hideLoading();
	}
})

4. wx.scanCode()调用设备的扫描功能

handleScanCode() {
    const _this = this;
    wx.scanCode({
      success(res) {
        _this.setData({
          qrCodeInfo: res.result
        })
        console.log('>>> 扫描二维码得到的信息', res);
      }
    })
  }

可以看到，我在回到函数里要用到当前实例的一些方法或者操作数据，都要提前保存下当前的this。这也是我把回调函数写成普通函数的形式，自己埋的一个坑。虽然解决了，但是不太好。
于是，后面我改写成箭头函数的形式就可以直接使用this了。因为箭头函数得特殊性：其内部没有this，this总是指向运行环境得this。

wx.scanCode({
      success: (res) => {
        this.setData({
          qrCodeInfo: res.result
        })
        console.log('>>> 扫描二维码得到的信息', res);
      }
    })

5. wx.getNetworkType()获取网络状态

当前连接的网络是哪种：Wifi、2G、3G、4G、5G。
使用场景：比如，你要下载很费流量的文件，提示用户当前网络状态，或者只允许wifi下下载文件、并预览。

wx.getNetworkType({
      success: (res) =>  {
        this.setData({
          nowNetworkType: res.networkType,
        })
        console.log('获取网络状态的回调res', res);
        if(this.data.nowNetworkType == 'wifi') {
          console.log('======');
          // 获取文件并打开预览文件等操作
        }else {
          wx.showToast({
            title: '当前为非wifi环境',
          })
        }
      }
    })

其中:

1. res.networkType的返回值有：wifi/2g/3g/4g/unknown/none(无网络)

补充：某些情况下，我们的手机连接到网络的方式会动态变化，例如手机设备连接到一个信号不稳定的Wifi热点，导致手机会经常从Wifi切换到移动数据网络。小程序宿主环境也提供了一个可以动态监听网络状态变化的接口wx.onNetworkStatusChange，让开发者可以及时根据网络状况去调整小程序的体验。—来自官网

6. wx.getStorage()读写本地数据缓存相关

读取：wx.getStorage/wx.getStorageSync
写入：wx.setStorage/wx.setStorageSync
其中Sync后缀的接口表示是同步接口[9]，执行完毕之后会立马返回。
以异步为例：

写入：
 wx.setStorage({
      key: this.data.localKey,
      data: data,
      success(res) {
        console.log('>>> setStorage-res', res);
      },
      fail() {
      }
    })
读取：
wx.getStorage({
      key: this.data.localKey,
      success(res) {
        console.log('>>> getStorage-res', res.data);
        wx.showToast({
          title: '读取成功',
          icon: 'success',
        })
      },
      fail() {
        console.log('读取失败');
      }
    })

其中：

1. 当读取一个不存在的key，会读取失败。调用读取失败的回调函数fail()
2. 每个小程序的缓存控件上限是10MB，超过再写入数据，会触发fail回调。

补充：小程序的本地缓存不仅仅通过小程序这个维度来隔离空间，考虑到同一个设备可以登录不同微信用户，宿主环境还对不同用户的缓存进行了隔离，避免用户间的数据隐私泄露。
–来自官网

来自小程序小白的补充，小程序在js里读取data中的数据，需要this.data.a；不能像vue读取data中数据那样，直接this.a。别问我咋知道，问就是踩坑了😂。

未完待续（后续会在下一篇中写）。。。。。。
如有不妥欢迎指正，谢谢~