和我一起学习微信小程序(十),修改默认分享朋友圈内容

 0 0条评论

小程序可以点击右上角,可以发送给朋友,如下图


从2.11.3开始可以分享到朋友圈了,官方文档如下:

从基础库 

2.11.3

 开始支持

支持平台:Android

可将小程序页面分享到朋友圈。适用于内容型页面的分享,不适用于有较多交互的页面分享。

好了,这里就来配置一下吧,官方的文档写的非常杂乱,我也是整理了半天,才搞定了。

每个页面都有onShareAppMessage和onShareTimeline两个生命周期函数,分辨代表点击右上角按钮,和点击分享到朋友按钮。在onShareAppMessage里必须生命以下代码,才会点亮分享到朋友圈这个按钮。

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage () {
    wx.showShareMenu({
      withShareTicket: true,
      //shareTimeline代表分享到朋友圈按钮
      menus: ['shareAppMessage', 'shareTimeline']
    })
    //返回你所需要的标题和图片
    return {
      title: this.data.articleModel.title,
      imageUrl: this.data.articleModel.cover
    }
  },

当你点击分享到朋友圈按钮的时候,就会触发onShareTimeline这个事件,也很简单,代码如下:

 //点击分享到朋友圈按钮
  onShareTimeline(e){
    return {
      title: this.data.articleModel.title,
      imageUrl: this.data.articleModel.cover
    }
  }

点击之后就会出现以下内容:


当用户在朋友圈点击之后,会进入一个“单页模式”,官方文档有详细解释,我这里大致说一下,这个单页模式并非直接进入小程序,只有点击底部前往小程序按钮,才会进入真正的小程序,还是一个阉割版的小程序界面,很多函数和功能不能用的。


在单页模式里云函数就不能用,如果要使用云函数就必须另外设置一下,如果你没有使用云函数就忽略下面的操作。

你需要在云开发的权限设置里,先允许未登录用户访问,如下图:


然后在云函数权限里,设置允许所有用户访问。


至此,就可以实现分享自定义发送给朋友和分享到朋友圈的界面啦。

第十一篇:和我一起学习微信小程序(十一),自定义组件

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客