小程序快速生成朋友圈海报分享图

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～

这里首先推荐一个开源的组件： painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能）

首先我们新增一个自定义组件，在该组件的json中引入painter

{"component": true,"usingComponents": {"painter": "/painter/painter"}
}

然后组件的WXML (代码片段在最后)

// 将该组件定位在屏幕之外，用户查看不到。
<painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" />

重点来了 JS (代码片段在最后)

Component({properties: {// 是否开始绘图isCanDraw: {type: Boolean,value: false,observer(newVal) {newVal && this.handleStartDrawImg()}},// 用户头像昵称信息userInfo: {type: Object,value: {avatarUrl: '',nickName: ''}}},data: {imgDraw: {}, // 绘制图片的大对象sharePath: '' // 生成的分享图},methods: {handleStartDrawImg() {wx.showLoading({title: '生成中'})this.setData({imgDraw: {width: '750rpx',height: '1334rpx',background: 'https://qiniu-image.qtshe.com/20190506share-bg.png',views: [{type: 'image',url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg',css: {top: '32rpx',left: '30rpx',right: '32rpx',width: '688rpx',height: '420rpx',borderRadius: '16rpx'},},{type: 'image',url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png',css: {top: '404rpx',left: '328rpx',width: '96rpx',height: '96rpx',borderWidth: '6rpx',borderColor: '#FFF',borderRadius: '96rpx'}},{type: 'text',text: this.data.userInfo.nickName || '青团子',css: {top: '532rpx',fontSize: '28rpx',left: '375rpx',align: 'center',color: '#3c3c3c'}},{type: 'text',text: `邀请您参与助力活动`,css: {top: '576rpx',left: '375rpx',align: 'center',fontSize: '28rpx',color: '#3c3c3c'}},{type: 'text',text: `宇宙最萌蓝牙耳机测评员`,css: {top: '644rpx',left: '375rpx',maxLines: 1,align: 'center',fontWeight: 'bold',fontSize: '44rpx',color: '#3c3c3c'}},{type: 'image',url: 'https://qiniu-image.qtshe.com/20190605index.jpg',css: {top: '834rpx',left: '470rpx',width: '200rpx',height: '200rpx'}}]}})},onImgErr(e) {wx.hideLoading()wx.showToast({title: '生成分享图失败，请刷新页面重试'})//通知外部绘制完成，重置isCanDraw为falsethis.triggerEvent('initData') },onImgOK(e) {wx.hideLoading()// 展示分享图wx.showShareImageMenu({path:  e.detail.path,fail: err => {console.log(err)}})//通知外部绘制完成，重置isCanDraw为falsethis.triggerEvent('initData') }}
})

那么我们该如何引用呢？

首先json里引用我们封装好的组件share-box

{"usingComponents": {"share-box": "/components/shareBox/index"}
}

以下示例为获取用户头像昵称后再生成图。

<button class="intro" bindtap="getUserInfo">点我生成分享图</button>
<share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}"  bind:initData="handleClose" />

调用的地方：

const app = getApp()Page({data: {isCanDraw: false},// 组件内部关掉或者绘制完成需重置状态handleClose() {this.setData({isCanDraw: !this.data.isCanDraw})},getUserInfo(e) {wx.getUserProfile({desc: "获取您的头像昵称信息",success: res => {const { userInfo = {} } = resthis.setData({userInfo,isCanDraw: true // 开始绘制海报图})},fail: err => {console.log(err)}})}
})

生成效果图如下

tips：

文字居中实现可以看下代码片段
文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号

代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5（下载片段前先打开微信开发者工具）

附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具详情里开启不校验合法域名进行代码片段的运行查看。
最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台开发>开发设置里配置，域名为你图片的域名前缀比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。

小程序快速生成朋友圈海报分享图相关推荐

2021年新微信小程序开发系统源码易客多小程序saas系统扫码点餐小程序支付宝小程序快速生成系统源码源代码
2021年新微信小程序开发系统源码小程序saas系统扫码点餐小程序支付宝小程序快速生成系统产品介绍:易客多多合一小程序快速生成系统是厦门四六开科技有限公司开发的快速开发微信百度支付宝小程序生成系统, ...
微信小程序自动生成打卡海报
1 背景最近在做一款背单词的小程序,用户在学习完成有对外展示的需求.计划小程序可以自动生成打卡海报,用户可以将海报保存,将保存的图片发布至朋友圈.除此之外,为推广小程序,还需要在海报中加入小程序的二 ...
合成海报的小程序插件－票圈海报
概述票圈海报是一个用于生成海报的小程序插件,通过灵活简单的配置(JSON)就可以生成精美的分享海报,适用于小程序的朋友圈分享等营销裂变场景. 可以绘制文字.图片.线条.色块到海报画布,支持设置宽高 ...
微信小程序之生成专属推广海报
现在老板一般都需要线上推广功能,通过给用户好处来刺激用户裂变分销,这就需要我们给用户生成专属的推广海报因为小程序的用户uid是唯一的并且是不变的,所以我们后台大哥就以用户的uid作为生成专属二维码的 ...
小程序-仿微信朋友圈拖动删除图片
♠ 目的微信小程序实现图片拖动删除,效果同朋友圈的图片拖动删除效果 ♠ 实现原理 1.使用微信小程序组件 movable-area 和 movable-view 进行拖动处理 2.根据屏幕高度.图片 ...
【微信小程序】小程序仿微信朋友圈效果
废话不多说直接上代码 HTML  <view class='scrtionList'> <view wx:i ...
记录下最近做的东西微信小程序仿微信朋友圈支持点赞取消点赞，评论回复评论删除评，删除朋友圈发布朋友圈查看@消息等功能
请添加图片描述 <movable-area class="w100_ h100_"><scroll-view scroll-y="true" ...
微信小程序仿发布朋友圈页面
发表动态可以选择图片和视频 wxml: <l-form name="form" l-form-btn-class="l-form-btn-class" b ...
河南分销小程序开发|分销系统|如何利用分销小程序快速裂变？
社交流量可以说是所有流量获取方式中成本最低的,小程序发展到现在,它本身已经有了巨大的流量爆发力.很多企业抓住这一次的难得的机遇,利用裂变和社群,为企业争取了更多的红利. 除了以上的方法,小程序还有什么 ...