微信小程序入门与实战之缓存机制与异步API的async和awai

app.js的作用和意义

App.js写逻辑内容，内置有函数，有三大作用

1、判断用户以什么方式进入小程序
2、获取用户信息
3、定义全局数据

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

app.js中保存全局变量

在app.js中设置全局变量：

在具体页面的js文件中获取全局变量并打印：

小程序缓存的增删查改与清除

    wx.setStorageSync('flag',true)//增加缓存
    wx.setStorageSync('flag', false)//修改缓存
    wx.setStorageSync('flag1', 1)
    //wx.clearStorageSync() 清除所有缓存
    //wx.removeStorageSync('flag') 删除缓存
    const flag=wx.getStorageSync('flag1')
    console.log(flag)

在调试器的storage中我们可以查看到当前小程序的缓存

我们在开发工具中也可以直接清除缓存：

异步函数的几个方案：回调函数、promise与await

回调函数：

    const flag=wx.getStorage({
      key:'flag',
      success(value)
      {
        console.log(value.data)
      }
    })

promise:

    const flag=wx.getStorage({
      key:'flag',
    })
    flag.then((value)=>{
      console.log(value)
    })

await(这里我们写在onload函数里，需要在onload函数名前加async):

    const flag=await wx.getStorage({
      key:'flag',
    })
     console.log(flag)

文章收藏

文章详情页编译模式我们设置启动参数可以显示出具体的页面

我们为具体的文章的收藏图片设置点击事件：

 <image bind:tap="onCollect"src="/images/collection-anti.png"></image>

在界面的onload的函数中我们通过options参数拿到传递过来的pid，为了使不同函数之可以共享pid，在data里面创建一个pid：

javascript对象的修改：

收藏图标的点击事件里进行缓存：

  onCollect(event)
  {
    //假设 未收藏->收藏
    //哪篇文章被收藏
    //数据结构 多篇文章是否被收藏
    const posts_collected={}
    posts_collected[this.data._pid]=true
    wx.setStorageSync('posts_collected', posts_collected)
  },

收藏与未收藏（图标）的切换，要改变UI状态要进行数据绑定（用条件渲染）：
页面初始数据设置未被收藏：

收藏图标点击事件中数据绑定：

wxml代码中使用条件渲染：

但是按照我们上面的实现方式，在每次刷新页面的时候文章都会变成未收藏，所以我们初始化的时候要从缓存中读取：

缓存如何不被覆盖

若文章收藏情况没有被缓存，我们还从缓存中获取这时候获取到的就是undefined,undefined默认是false，完善逻辑可以加个判断：

但是我们前面写的代码还是有问题，我们在点击事件中创建了一个postCollected，所以每次点击事件都会在缓存中覆盖这一个：

解决办法：把postCollected在data中设置，在初始化函数中获取到缓存，在点击事件中直接使用获取到的缓存，而不是重新创建：

完善代码，使已收藏时点击可以变成未收藏：

showToast接口的应用

showToast换成showModal

showModal的回调函数和promise

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

showActionSheet的使用

为分享图标设置点击事件：

  onShare()
  {
      wx.showActionSheet({
        itemList: ['分享到QQ','分享到微信','分享到朋友圈'],
        success(res)
        {
          console.log(res)
        }
      })
  }