小程序分享与点赞—小程序入门与实战【二十一】

上一章节我们复习了分页数据的处理,小程序触底分页跟循环渲染。

这一章节我们来完成之前首页遗留的点赞跟分享,这章讲解完,我们前端的部分就告一段落了。

点赞

代码预览

首页侧边栏 .wxml 代码

 <view class="left-operation">
 <!--头像-->
    <view class="avatar">
         <image src="{{item.avatarUrl}}"></image>
    </view>
    <!--点赞-->
    <view class="operation-item {{item.is_praise == 1 ? 'active' : ''}}" bindtap="likeMe" data-index="{{index}}" data-idx="{{idx}}" data-id="{{item.id}}">
        <view class="iconfont icon-dianzan"></view>
        <view class="num">{{item.praise_count}}</view>
    </view>
    <!--分享-->
     <view class="operation-item">
         <view class="iconfont icon-fenxiang"></view>
        <view class="num">分享</view>
    </view>
 </view>

点赞的 .js 代码

//点击按钮
    likeMe(e){
        let token = wx.getStorageSync('user_token');
        let id = e.currentTarget.dataset.id;
        let idx = e.currentTarget.dataset.idx;
        let index = e.currentTarget.dataset.index;
        if(token){
            //发送点赞请求
            this.postPraise(id,idx,index)
        } else {
            wx.navigateTo({
                url:"/pages/personal/personal"
            })
        }
    },
    postPraise(id,idx,index){
        let token = wx.getStorageSync('user_token');
        sandBox.post({
            api:'api/sir/card/praise',
            header:{
                Authorization:token
            },
            data:{
                punch_card_id:id
            }
        }).then(res=>{
            res = res.data;
            if(res.status){
                //需要将点赞的数字+1
                //需要将点赞之后的样式变掉
                this.setData({
                    [`cardList[${idx}][${index}].praise_count`]:this.data.cardList[idx][index]+1,
                    [`cardList[${idx}][${index}].is_praise`]:1
                })
            } else {
                wx.showModal({
                    content: res.message || '请求失败,请重试',
                    showCancel: false,
                })
            }
        }).catch(rej=>{
            wx.showModal({
                content: rej.message || '内部错误,请重试',
                showCancel: false,
            })
        })
    }
解析代码
  • 通过三元表达式动态绑定样式
 class="{{item.is_praise == 1 ? 'active' : ''}}"

如果 值为 true 则是选择样式 active,反之。

  • 使用模板字符串来改变二维数组的某一项里面值
  //需要将点赞的数字+1
//需要将点赞之后的样式变掉
 this.setData({
        [`cardList[${idx}][${index}].praise_count`]:this.data.cardList[idx][index]+1,
        [`cardList[${idx}][${index}].is_praise`]:1
    })

分享给好友

//wxml
<view class="operation-item">
    <button open-type="share"></button>
     <view class="iconfont icon-fenxiang"></view>
     <view class="num">分享</view>

 </view>
 //less
  button {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top:0;
          opcity:0;
        }
//js
 onShareAppMessage() {
        return {
            title:"果酱先生",
            path:"/pages/index/index"
        }
    },

onShareAppMessage()

监听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。

此事件处理函数需要 return 一个 Object,用于自定义转发内容,返回内容如下:

参数

  • title:转发标题
  • path:转发路径
  • imageUrl:自定义图片路径
return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      imageUrl:'https:.....'
    }
解析代码
  • 将 button 组件的 open-type="share"
<button open-type="share"></button>
  • 监听用户页面,自定义转发内容
 onShareAppMessage() {
        return {
            title:"果酱先生",
            path:"/pages/index/index"
        }
    }

总结

  • 点赞数据处理
  • 分享给好友

我们还有一些该跳页面的地方没用跳,那就留一个作业吧,自己去把这些跳页面补充完整。

不会的,可以去仓库拿我的代码。至此,果酱先生小程序前端的部分已经讲解完毕,我们剩下小程序的功能完成之后,我们应该怎么去发布上线,上线之后又该怎么去更新小程序的版本。