微信小程序之分享功能

一、介绍

微信小程序的分享功能可以分享页面给朋友或群聊,但是不能分享到朋友圈,需要分享朋友圈的话,可以在小程序内设计一个分享页面,利用小程序提供的canvas把小程序码绘制到分享图里保存到本地分享到朋友圈。

小程序调起分享分两种方式:1.通过页面右上方自带的分享功能  2.页面内自定义分享 。

本篇主要介绍第2种方式:通过给button组件设置属性 open-type="share" 

最新的微信开发者工具新建页面的时候,在页面js文件里会有onShareAppMessage: function () {} 事件,当button设置了open-type="share" 属性后,点击 button 会调用该事件,看下官方给的该事件的文档:

微信小程序之分享功能

二、应用

在商品详情页加上分享按钮,如图:

微信小程序之分享功能

点击后效果:

微信小程序之分享功能

代码:

 wxml页面里放入:

<button open-type="share">分享</button>

js:

onLoad: function (options) {
    var id = options.id;//获取参数,当用户通过分享进来页面时获取到id,根据id获取产品的信息
 },

onShareAppMessage: function (res) {
    var that = this;
    var goods_id=that.data.goods_id;//获取产品id
    var goods_title=that.data.goods_title;//获取产品标题
    var goods_img=that.data.goods_img;//产品图片
    if (res.from === 'button') {
        // 来自页面内转发按钮
        return {
          title: goods_title,
          path: '/page/details?id=' +goods_id,
          imageUrl:goods_img //不设置则默认为当前页面的截图
        }
      }
  }