转发
点击分享后的效果图
- 使用微信API
wx.showActionSheet
一起使用 详情点击
<image catchtap="handleShare" src="/images/icon/share.png"></image>
handleShare(){
wx.showActionSheet({
itemList: ['分享到朋友圈', '分享到qq空间', '分享到微信好友'],
itemColor: '#666'
})
},
收藏
<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>
- 而我们只需要这一个属性就可以了