//小程序分享

//开启右上角分享按钮

  wx.showShareMenu({

      withShareTicket: true

    })

//按钮分享

<button open-type="share" class='share small' data-name='{{item.goods_name}}' data-goods='{{item.goods_id}}'><image src='/images/shear.png'></image></button>

 

 

 

//处理分享事件

  // 分享

  onShareAppMessage: function (res) {

    if (res.from === 'button') {

      // 来自页面内转发按钮

      console.log(res.target.dataset)

      var name = res.target.dataset.name

      var goods_id = res.target.dataset.goods

      return {

        title: name,

        path: '/pages/index/goods/goods?id=' + goods_id,

        success:function(e){    //分享回调

          

        }

      }

      

    }else{

      return {

        title: this.data.name,

        path: '/pages/index/goods/goods?id=' + this.data.goods_id,

        success: function (e) {    //分享回调

        }

      }

    }

  },

 

 

------2020-07-07------

重磅消息重磅消息重磅消息重磅消息重磅消息重磅消息重磅消息

目前小程序已经支持分享到朋友圈，

只有安卓机好使。

测试机型：小米9 miui12  20.7.2  微信版本7.0.16

体验地址：扫码进入小程序 ---- 点击右上角三个点

技术公众号



 

1.先看案例





2.微信开发文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline



https://developers.weixin.qq.com/miniprogram/dev/api/share/wx.showShareMenu.html

 

3.代码

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    
  },
  
  onLoad: function () {
   
    wx.showShareMenu({
      menus: ['shareAppMessage', 'shareTimeline'],
      success(res) {
        console.log(res)
      },
      fail(e) {
        console.log(e)
      }
    })
    
  },
  
  onShareAppMessage(){
    
  },
  onShareTimeline(){
    
  }
  
})


4.我的微信   LJT-917

 

 

在开发小程序的时候遇到自定义分享按钮分享卡片到好友的需求，由于小程序的分享只有在页面js中定义了onShareAppMessage(Object)方法才会出现右上角的分享按钮,所以需要在页面中自定义分享方法。具体见下：

object参数

onShareAppMessage(Object)事件需要返回一个Object对象对象里面包含要分享的标题，转发的路径，以及自定义图片的路径。完成了这一系列操作就可以愉快的去分享微信小程序的页面了。

// 在页面中使用
import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";

class index extends Component {
  onShareAppMessage() {
    return {
      title: "自定义标题",
      path: '/page/user?id=123',  // 自定义的分享路径，点击分享的卡片之后会跳转这里定义的路由
      imageUrl: '' // 图片路径
    };
  }
  render(){
  	return(
	  <View>微信分享</View>
	)
  }
}
export default index;


自定义分享按钮事件的实现。有时候，在大多数的业务场景下我们需要在页面中点击某个按钮触发分享的事件，此时需要监听用户点击页面内转发按钮（Button 组件 openType=‘share’）就会自动触发onShareAppMessage方法。如果需要在button中携带信息，需要自定义button属性，通过res.target.dataset获取。

// 在页面中使用
import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";

class index extends Component {
 onShareAppMessage(res) {
    if (res.from === "button") {
      const {share = {}} = res.target.dataset
      return {
        title:`自定义分享按钮${share.title}`,
        path: `/pages/bill/index`,
        imageUrl: ''
      };
    } else {
      return {
        title: "右上角分享事件",
        path: `/pages/bill/index`,
        imageUrl: ''
      };
    }
  }
  render(){
  	return(
	  <View>
		<Button open-type="share" data-share={data} >
           点击分享
         </Button>
	  </View>
	)
  }
}
export default index;


需要注意的是，onShareAppMessage不支持异步调用，如果有需求是先请求接口的数据再分享会因为拿不到数据导致分享信息不正确的错误。

小程序分享功能开发

接触小程序不久，在第一次开发分享功能的过程中遇到了些许波折，此文介绍在小程序中，如何应对不同业务场景下的分享功能开发需求。



功能介绍

小程序转发分享功能，跟开发相关的内容并不多，主要通过onShareAppMessage定制页面分享内容，但有两个重要约束：


  
无法从代码内触发转发，只能通过open-type="share"的按钮在页面内触发
  
转发内容（title、url、imageUrl）需要同步返回
  

这两个约束，对实际业务的开发带来了不小的影响，如果需要用户在一个操作内保存数据并分享，因为上述两个限制，该功能就能很难实现，因为保存，涉及网络请求，必然是异步的。



异步指定分享内容的解决方案

这里提供两种解决方案，都是曲线救国，多少有些瑕疵。



方案一

将用户行为拆分为两个步骤，先保存数据，成功后再由用户主动分享给他人。这种方案在技术上相比第二种更为安全，但在某些业务场景下，用户体验并不完美，比如“给好友发送xxx”这种场景模式。



方案二

在用户分享成功后再保存数据，采用这个方案需要结合具体业务思考，标准是：“数据如果没有保存成功，会造成多大的影响与后果？是不是可接受的？”。

常规POST/CREATE操作，一般数据ID都是后端负责生成，操作成功后接口返回ID，但为了面对目前这种情况，在接口设计上需要做出部分调整：


  
尽最大可能降低接口的失败可能性
  
保存数据时支持指定ID
  
为避免ID冲突，后端提供ID预生成接口
  

其他的就不过多废话了，一切尽在代码中：



Page({
    data: {
        id: null
    },

    onLoad: function () {
        return this.fetchId();
    },

    onShow: function () {
        if (!this.loading && !this.data.id) {
            return this.fetchId();
        }
    },

    onShareAppMessage: function () {
        if (!this.data.id) {
            // todo 返回默认分享信息，比如小程序首页
        }

        return {
            title: 'xxx',
            path: 'xxx?id=' + this.data.id,
            success: function (res) {
                if (this.data.savedId === this.data.id) {
                    return;
                }

                this.saveData().then(() => {
                    this.setData({
                        savedId: this.data.id
                    });
                    // todo 如果跳转到其他页面，删除this.data.id
                });
            }
        };
    },

    fetchId: function () {
        // fetch id and set to data
    },

    saveData: function () {
        // save data to server
    }
});



canvas绘制分享图片

针对上一部分，如果分享内容是异步生成的，往往分享图片也是动态的（非固定的本地资源或者网络资源）。

针对动态分享图片，通常有两种解决方案：

服务器动态生成所需图片

  
依赖服务器的图片处理功能，灵活合成所需图片，缺点很明显，图片处理会消耗过多的服务器资源，影响服务器整体吞吐量


客户端使用canvas绘制动态图片

  
在客户端本地使用canvas绘制内容，最后通过wx.canvasToTempFilePath保存图片临时路径用于分享，这种方式的缺点：兼容性不够好，可能遇到各种BUG


在第一次开发过程中，选择了canvas绘制分享图片，主要步骤如下：

在wxml文件中声明canvas区块

  
此处有一个主意事项：canvas区块应该不影响布局且不可见，但经过实践发现不能使用display: none;或opacity: 0;这种方式。最终摸索出一种可行方式：使用view容器包裹canvas，然后设置view的style为height: 0; overflow: hidden;


在js中通过wx.createCanvasContext获取绘图上下文
通过上下文使用canvas相关api绘图
使用wx.canvasToTempFilePath获取图片路径
这种方式的优点是不依赖服务器，节省了服务器性能开销，但是也有一个致命缺点：图片生成是异步的，与onShareAppMessage需要同步返回数据有冲突。

为解决该问题，采取的方案是在影响分享图片因素变化时，立即重新生成，且需要考虑失败时的替代图片。这种做法，因为频繁的使用canvas绘制与保存图片，可能会影响小程序的运行流畅度。

最后贴上针对输入框内容动态生成分享图片的核心代码：



App({
    drawLock: false,        // 避免同时对一个canvas进行操作
    shareImageCache: {},    // 尽可能优化

    drawShareImage: function (canvasId, ctx, text) {
        if (this.drawLock) {
            return;
        }
        this.drawLock = true;

        let that = this;
        let cacheKey = util.hash(text);
        if (this.shareImageCache[cacheKey]) {
            return Promise.resolve(this.shareImageCache[cacheKey]);
        }

        ctx.clearRect(0, 0, 500, 400);

        return new Promise(resolve, reject => {
            ctx.setFillStyle('#333333');
            ctx.setFontSize(40);
            ctx.fillText(text, 20, 60);

            ctx.draw(true, () => {
                promisify(wx.canvasToTempFilePath)({
                    canvasId: canvasId
                }).then(res => {
                    this.drawLock = false;

                    that.shareImageCache[cacheKey] = res.tempFilePath;
                    resolve(res.tempFilePath);
                }).catch(err => {
                    this.drawLock = false;

                    reject(err);
                });
            });
        });
    }
});

Page({
    data: {
        canvasId: 'share-canvas',
    },
    shareImagePath: null,

    onLoad: function () {
        this.ctx = wx.createCanvasContext(this.data.canvasId);

        this.drawShare();
    },

    onInput: function () {
        if (this.preInputTimer) {
            clearTimeout(this.preInputTimer);
        }
        this.preInputTimer = setTimeout(() => {
            this.drawShare();
        }, 1000);       // 这个数字最好是比一般人连续输入时间间隔大一丢丢
    },

    drawShare: function () {
        return app.drawShareImage(this.data.canvasId, this.ctx, e.detail.value).then(path => {
            this.shareImagePath = path;
        }).catch(err => {
            logger.error(err);
        });
    }
});

以上代码是从自己小程序代码中提炼的部分内容，把绘制行为放在app中，是为了与其他页面共享。

上述是一个极端例子，因为用户的输入实时反馈到分享图片上，如果在产品层面考虑变通，可能会有更好的思路与解决方案。

博客原文