微信小程序前端自定义分享的实现方法

背景 目前手上有一个小程序的项目，希望转发时分享消息的界面能够自定义,然而微信小程序只提供设置图片的url和title。 /** * 用户点击右上角分享 */ onShareAppMessage: function() { return { imageUrl:'', title:'' }; } 实现 我们要转发的显示内容多了一点东西:头像，用户名和点赞数。好在这个排版不是很复杂，所以我们思考了一下通过canvas去生成一张图片再return canvas所生成的图片url。 代码如下（其实还要作出一些显示上的优化，具体你们自己去调试）： 先在页面里 在微信小程序中，为了实现自定义分享的内容，通常我们需要扩展默认的分享功能，因为微信小程序提供的基础分享接口仅允许设置分享的图片URL和标题。针对这种情况，我们可以利用HTML5的Canvas API来创建自定义的分享图片，从而实现更加丰富的分享界面。 在小程序的页面中添加一个`canvas`元素，例如： ```html <canvas canvas-id="canvasid" style="width: 375px; height: 500px;" wx:if="{{canvasShow}}"></canvas> ``` 接下来，我们需要获取Canvas的上下文对象`context`，以便进行绘图操作。可以使用`wx.createCanvasContext`方法： ```javascript let context = wx.createCanvasContext('canvasid'); ``` 然后，我们可以通过`context.drawImage`方法绘制不同的元素，如背景图片、头像、文字等。例如，绘制背景图片： ```javascript context.drawImage(back.path, 0, 60, backWidth, backHeight); ``` 对于头像，由于涉及到圆形裁剪，我们可以利用`context.save()`和`context.restore()`来保存和恢复绘图状态，并使用`context.arc()`创建一个圆形路径，结合`context.clip()`进行裁剪： ```javascript context.save(); var d = 2 * 25; var cx = 0 + 25; var cy = 0 + 25; context.arc(cx, cy, 25, 0, 2 * Math.PI); context.clip(); context.drawImage(avatar.path, 0, 0, d, d); context.restore(); ``` 接着，我们可以绘制用户名和点赞数： ```javascript context.setFontSize(14); context.fillText('userName', 70, 32); let zanLength = ('100' + '次赞').length; context.fillText('100' + '次赞', 375 - 14 * zanLength, 32); ``` 完成绘制后，调用`context.draw()`并传入一个回调函数，用于在绘制完成后转换Canvas为图片URL： ```javascript context.draw(true, () => { wx.canvasToTempFilePath({ x: 0, y: 0, width: 375, height: 400, destWidth: 375, destHeight: 400, canvasId: 'canvasid', success: (res) => { // 设置onShareAppMessage所返回的数据格式 let shareInfo = { title: 'customTitle', imageUrl: res.tempFilePath, }; // 隐藏画布 that.setData({ canvasShow: false }); }, }); }); ``` 需要注意的是，由于同源策略限制，非同源的图片在Canvas中可能无法显示。为了解决这个问题，我们可以先使用`wx.getImageInfo`方法获取图片信息，然后使用返回的本地路径在Canvas中绘制图片： ```javascript wx.getImageInfo({ src: imgUrl, success: (res) => { let drawImgUrl = res.path; // 使用drawImgUrl在canvas中绘制图片 }, }); ``` 将生成的图片URL设置到`onShareAppMessage`返回的对象中，用户在分享时就会看到自定义的分享界面了。 总结来说，实现微信小程序前端自定义分享的关键在于利用Canvas API绘制自定义的分享图片，并通过`wx.canvasToTempFilePath`将其转换为临时文件路径，再结合`onShareAppMessage`方法来设置分享内容。在处理过程中，需要注意解决非同源图片在Canvas中的显示问题。通过这种方式，开发者可以为用户提供更加个性化和吸引人的分享体验。