微信小程序转发、收藏、分享的实现

转发

---

点击分享后的效果图

• 使用微信APIwx.showActionSheet一起使用 详情点击

<image catchtap="handleShare" src="/images/icon/share.png">image>

handleShare(){
    wx.showActionSheet({
      itemList: ['分享到朋友圈', '分享到qq空间', '分享到微信好友'],
      itemColor: '#666'
    })
},

收藏

---

• 一般收藏前和收藏后的图片是不同的，使用三元运算符解决
• 这里我们把收藏存储到了本地，注意使用同步还是异步
  • getStorageSync 详情点击
  • setStorage 详情点击
  • showToast 详情点击

<image catchtap="handleCollection" src="{{isCollected?'/images/icon/collection.png': '/images/icon/collection-anti.png'}}">image>

handleCollection(){
    let isCollected = !this.data.isCollected;
    let obj = wx.getStorageSync('isCollected');
    
    obj[this.data.index] = isCollected;
    // 提示用户收藏的状态
    let title = isCollected?'收藏成功': '取消收藏';
    wx.showToast({
      title,
      icon: 'success'
    });
    wx.setStorage({
      key: 'isCollected',
      data: obj
    });
    this.setData({isCollected});
 }

而当我们使用本地存储的时候，会在声明周期函数中获取这个存储的值

onLoad: function (options) {
  // 获取本地存储数据
  let storageObj = wx.getStorageSync('isCollected');
  // 判断是否存储过数据
  if(!storageObj){
    storageObj = {};
    wx.setStorage({
      key: 'isCollected',
      data: storageObj
    });
  }else {
    // 根据是否收藏当前页面文章的的标识动态生成isCollected
    let isCollected = storageObj[options.id]?true: false;
    // 更新isCollected的值。
    this.setData({isCollected});
  }
},

分享

---

• 需要使用到button的open-type属性 详情点击

<button open-type="share">转发此文章button>

• 而我们只需要这一个属性就可以了