慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第6章构建新闻详情页面-交互反馈 wx.showActionSheet

交互反馈 wx.showActionSheet

1.进入目录 pages/posts/post-detail，修改文件 post-detail.js，测试 wx.showActionSheet

<!-- 先静后动，先样式再数据 -->
<view class="container">
  <image class="head-image" src="{{postData.headImgSrc}}"></image>
  <image class="audio" src="/images/music/music-start.png"></image>
  <view class="author-date">
    <image class="avatar" src="{{postData.avatar}}"></image>
    <text class="author">{{postData.author}}</text>
    <text class="const-text">发表于</text>
    <text class="date">{{postData.dateTime}}</text>
  </view>
  <text class="title">{{postData.title}}</text>
  <view class="tool">
    <view class="circle-img">
      <image wx:if="{{collected}}" catchtap="onCollectionTap" src="/images/icon/collection.png"></image>
      <image wx:else catchtap="onCollectionTap" src="/images/icon/collection-anti.png"></image>
      <image catchtap="onSharpTap" class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">{{postData.detail}}</text>
</view>

2.进入目录 pages/posts/post-detail，修改文件 post-detail.js

var postsData = require('../../../data/posts-data.js')

Page({
  data:{},
  onLoad:function(option) {
    var postId = option.id;
    this.data.currentPostId = postId;
    var postData = postsData.postList[postId];
    // 如果在onLoad方法中，不是异步的去执行一个数据绑定
    // 则不需要使用 this.setData 方法
    // 只需要对 this.data 赋值即可实现数据绑定
    this.setData({
      postData:postData
    })

    // var postsCollected = {
    //   1:"true",
    //   2:"false",
    //   3:"true"
    //   ...
    // } 

    var postsCollected = wx.getStorageSync('posts_collected')
    if (postsCollected) {
      var postCollected = postsCollected[postId]  
      this.setData({
        collected:postCollected
      })
    } else {
      var postsCollected = {};
      postsCollected[postId] = false;
      wx.setStorageSync('posts_collected', postsCollected); 
    }
  },
  onCollectionTap:function(event) {
    var postsCollected = wx.getStorageSync('posts_collected');
    var postCollected = postsCollected[this.data.currentPostId];
    // 收藏变成未收藏，未收藏变成收藏
    postCollected = !postCollected;
    postsCollected[this.data.currentPostId] = postCollected;
    this.showToast(postsCollected, postCollected);   
  },
  showModal:function(postsCollected, postCollected){
    var that = this;
    wx.showModal({
      title: '收藏',
      content: postCollected?'收藏该文章？':'取消收藏该文章？',
      showCancel: 'true',
      cancelText: '取消',
      cancelColor: '#333',
      confirmText: '确认',
      confirmColor: '#405f80',
      success:function(request) {
        if (request.confirm) {
          // 更新文章是否的缓存值
          wx.setStorageSync('posts_collected', postsCollected);
          // 更新数据绑定变量，从而实现切换图片
          that.setData({
            collected: postCollected
          })
        }
      }
    })
  },
  showToast:function(postsCollected, postCollected) {
    // 更新文章是否的缓存值
    wx.setStorageSync('posts_collected', postsCollected);
    // 更新数据绑定变量，从而实现切换图片
    this.setData({
      collected: postCollected
    })
    wx.showToast({
      title:postCollected?"收藏成功":"取消成功",
      duration:1000,
      icon:"success"
    })
  },
  onSharpTap:function(event) {
    var itemList = [
      "分享给微信好友",
      "分享到朋友圈",
      "分享到QQ",
      "分享到微博"
    ]
    wx.showActionSheet({
      itemList: itemList,
      itemColor:"#405f80",
      success:function(res){
        // ret.cannel 用户是不是点击了取消按钮
        // ret.tapIndex 数组元素的序号，从0开始
        wx.showModal({
          title: '用户' + itemList[res.tapIndex],
          content: '用户是否取消?'+ res.cancel + '现在无法实现分享功能，什么时候能支持呢',
        })
      }
    })
  }
})

3.测试