微信小程序分享朋友圈 详细教程及注意事项

微信官方文档

分享所需要的条件

  小程序页面默认为不开启朋友圈分享 需要开发者进行手动设置 需满足以下条件 才能开启朋友圈分享

  1. 页面需设置允许“发送给朋友 官方文档 Page.onShareAppMessage 通常是在页面js文件中加入这段函数即可 也可以自定义转发内容 更多去官方文档查看

onShareAppMessage: function() {} 

  2. 满足条件 1 后，页面需设置允许“分享到朋友圈”，同时可自定义标题、分享图等，自定义数据等。 官方文档 Page.onShareTimeline 接口文档

  - 我们需要在页面进来后去调用官方文档 wx.showShareMenu 这个接口 去设置需要转发的按钮

    wx.showShareMenu({
      withShareTicket: true,
      // shareAppMessage表示“发送给朋友”按钮，shareTimeline表示“分享到朋友圈”按钮 
      // 这里选择两个都开启
      menus: ['shareAppMessage', 'shareTimeline']
    })

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义发享内容。

  只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮自定义转发内容

  - 这里我们需要用到官方文档 wx.onShareTimeline 这个接口 去监听用户点击了分享到朋友圈按钮
  - 此函数需要返回一个Object，用于自定义分享内容

	onShareTimeline: function () {
		return {
            title: 自定义标题,默认值小程序名称
            imageUrl:自定义图片路径,支持本地文件或者网络图片,仅支持PNG及JPG, 默认使用小程序 Logo
            query:自定义页面路径中携带的参数  如 'a=' + a + '&b=' + b，默认值为当前页面路径携带的参数
	    }
	},

注意事项

  - 当页面数据为onLoad里上一个页面传来的id再去接口请求时 如果没有其他的需要 一般不需要传query 因为query的默认值就是为当前页面路径携带的参数
  - 但如果你的数据为全局变量 或者 本地缓存时 那你请注意了

  onLoad: function(options) {
       var info = app.globalData.info
       var value = wx.getStorageSync('key')
  }

  - 这两个例子 都会导致分享页面出错 因为单页面模式不能访问这些数据 这时候需要通过 传query解决这个问题

    //用户点击右上角分享朋友圈 
  onShareTimeline: function () {
		return {
            title: this.data.info.title,
            query: 'info=' +  JSON.stringify(this.data.info) + '&value=' + JSON.stringify(wx.getStorageSync('key')),
            imageUrl:this.data.info.image[0] 
	    }
  },
  onLoad: function(options) {
       // 获取当前场景值 以适应单页面模式
       // 1154 为单页面模式的场景值
       var pathData = wx.getLaunchOptionsSync()
       if(pathData.scene==1154){
            var info = JSON.parse(options.info)
            var value = JSON.parse(options.value)
            app.globalData.info = JSON.parse(options.info)
       }else{
            var info = app.globalData.info
            var value = wx.getStorageSync('key')
       }
    }

- 大佬勿喷

- 如果觉得我写的还不错的话 可以分享 点赞