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

这篇具有很好参考价值的文章主要介绍了微信小程序入门与实战之缓存机制与异步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中设置全局变量：
微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript

在具体页面的js文件中获取全局变量并打印：
微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript

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

    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)

微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript
在调试器的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)

文章收藏

文章详情页编译模式我们设置启动参数可以显示出具体的页面
微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript
我们为具体的文章的收藏图片设置点击事件：

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

在界面的onload的函数中我们通过options参数拿到传递过来的pid，为了使不同函数之可以共享pid，在data里面创建一个pid：
微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript
javascript对象的修改：

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

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

收藏与未收藏（图标）的切换，要改变UI状态要进行数据绑定（用条件渲染）：
页面初始数据设置未被收藏：
微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript
收藏图标点击事件中数据绑定：

wxml代码中使用条件渲染：

但是按照我们上面的实现方式，在每次刷新页面的时候文章都会变成未收藏，所以我们初始化的时候要从缓存中读取：
微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript

缓存如何不被覆盖

若文章收藏情况没有被缓存，我们还从缓存中获取这时候获取到的就是undefined,undefined默认是false，完善逻辑可以加个判断：
微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript
但是我们前面写的代码还是有问题，我们在点击事件中创建了一个postCollected，所以每次点击事件都会在缓存中覆盖这一个：

解决办法：把postCollected在data中设置，在初始化函数中获取到缓存，在点击事件中直接使用获取到的缓存，而不是重新创建：
微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript

微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript

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

showToast接口的应用

微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript

showToast换成showModal

微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript

showModal的回调函数和promise

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

微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript

showActionSheet的使用

微信小程序 async,微信小程序入门与实战,微信小程序,缓存,javascript
为分享图标设置点击事件：文章来源地址https://www.toymoban.com/news/detail-524074.html

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