微信小程序在基礎庫2.11.3之前沒有分享到朋友圈的功能，分享的思路是用 canvas畫布生成一張分享圖片，保存到相冊，用戶將帶有分享二維碼的圖片發到朋友圈，其他人可以識別圖中二維碼的方式進入小程序的指定分享頁面。可參考智行火車票的助力搶票功能。

1、wxml文件

<view class='share'><canvas canvas-id="shareCanvas" style="width:300px;height:380px"></canvas> </view> <view class='btn-box'><button bindtap='downloadImg'>分享到朋友圈</button> </view>

2、wxss樣式文件（如果不想顯示canvas，可以將canvas定位到可視區域外部）

page{background: #eee; } .share{width: 300px;height: 380px;position: fixed;left: 0;right: 0;top: 0;bottom: 100rpx;margin: auto; } .btn-box{padding: 1060rpx 60rpx 0 60rpx; } button{background: darkturquoise; }

3、js文件

Page({data: {sharebg: 'http://qiniu.jnwtv.com/H520181206092255188568494.png', // 分享底部背景圖shareTitle: '哈哈哈男孩從小就沒有地位，看來一萬個心酸哈哈哈男孩從小就沒有地位，看來一萬個心酸', // 分享標題shareCoverImg: 'http://qiniu.jnwtv.com/H520181210164154569520223.jpeg', // 分享封面圖shareQrImg: 'http://qiniu.jnwtv.com/H520181210164146322557972.jpg', // 分享小程序二維碼userInfo: {headImg: 'http://qiniu.jnwtv.com/H520181210164138180428653.jpg', //用戶頭像nickName: '打豆豆', // 昵稱},seeDate: '2018-12-04', //看視頻日期},onLoad: function (options) {},downloadImg:function(){let that = this;// 創建畫布const ctx = wx.createCanvasContext('shareCanvas')// 白色背景ctx.setFillStyle('#fff')ctx.fillRect(0, 0, 300, 380)ctx.draw()// 下載底部背景圖wx.getImageInfo({src: that.data.sharebg,success: (res1) => {ctx.drawImage(res1.path, 0, 250, 300, 130)// 下載視頻封面圖wx.getImageInfo({src: that.data.shareCoverImg,success: (res2) => {ctx.drawImage(res2.path, 0, 0, 300, 168)// 分享標題// ctx.setTextAlign('center') // 文字居中ctx.setFillStyle('#000') // 文字顏色：黑色ctx.setFontSize(20) // 文字字號：20pxif (that.data.shareTitle.length <= 14) {// 不用換行ctx.fillText(that.data.shareTitle, 10, 200, 280)} else if (that.data.shareTitle.length <= 28) {// 兩行let firstLine = that.data.shareTitle.substring(0, 14);let secondLine = that.data.shareTitle.substring(14, 27);ctx.fillText(firstLine, 10, 200, 280)ctx.fillText(secondLine, 10, 224, 280)} else {// 超過兩行let firstLine = that.data.shareTitle.substring(0, 14);let secondLine = that.data.shareTitle.substring(14, 27) + '...';ctx.fillText(firstLine, 10, 200, 280)ctx.fillText(secondLine, 10, 224, 280)}// 下載二維碼wx.getImageInfo({src: that.data.shareQrImg,success: (res3) => {let qrImgSize = 70ctx.drawImage(res3.path, 212, 256, qrImgSize, qrImgSize)ctx.stroke()ctx.draw(true)// 用戶昵稱ctx.setFillStyle('#000') // 文字顏色：黑色ctx.setFontSize(14) // 文字字號：16pxctx.fillText(that.data.userInfo.nickName, 38, 284)// 觀看日期ctx.setFillStyle('#999') // 文字顏色：黑色ctx.setFontSize(10) // 文字字號：16pxctx.fillText('在' + that.data.seeDate + '觀看這個視頻', 38, 298)// 下載用戶頭像wx.getImageInfo({src: that.data.userInfo.headImg,success: (res4) => {// 先畫圓形，制作圓形頭像(圓心x，圓心y，半徑r)ctx.arc(22, 284, 12, 0, Math.PI * 2, false)ctx.clip()// 繪制頭像圖片let headImgSize = 24ctx.drawImage(res4.path, 10, 272, headImgSize, headImgSize)// ctx.stroke() // 圓形邊框ctx.draw(true)// 保存到相冊wx.canvasToTempFilePath({canvasId: 'shareCanvas',success: function (res) {wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function (res) {wx.showToast({title: '分享圖片已保存到相冊'})}})}}, this)}})}})}})}})} })

4、生成canvas的圖片資源需要緩存到本地，所以需要在微信公眾平臺，將需要用到的分享圖片，包括二維碼的圖片域名添加到微信安全域名范圍內，否則會報下載圖片失敗的錯誤。剛開始也可以將微信開發者工具的校驗安全域名關掉，進行測試。開發者工具對canvas圖片的生成可能會有問題，請盡量使用真機測試。

5、通過api獲取的小程序二維碼是二進制格式，后臺返回的圖片應該是base64形式的圖片，前端需要把二維碼base64格式轉換成本地圖片，方法見我的另一篇博客?https://blog.csdn.net/bocongbo/article/details/84954567

?

基礎庫2.11.3版本以后，小程序支持安卓手機分享到朋友圈。

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

總結

以上是生活随笔為你收集整理的微信小程序分享朋友圈的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。