微信小程序 — 二维码海报分享到好友功能

上一篇文章有微信里面生成二维码功能。微信小程序 — 生成二维码功能_棒怡情的博客-CSDN博客

下面把生成的二维码加上对应的文字，分享给微信好友功能。

第一步：把内容进行绘制生成图片。用到canvasdrawer

第二步：把图片分享出去。

把 components 中的 canvasdrawer 拷贝到自己项目下。

json文件中：引入组件

{"usingComponents": {"canvasdrawer": "../../components/canvasdrawer/canvasdrawer"}
}

wxml中：

<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"  class="canvasdrawer"/>
<button bindtap='eventDraw' style="margin-top: 10rpx;">2.绘制</button>
<button bindtap="share"  style="margin-top: 10rpx;">3.分享</button>

painting 是需要传入的 json。 getImage 方法是绘图完成之后的回调函数，再次回调里面获取绘制生成的图片地址

js文件代码如下：

 data: {painting: {},shareImage: '',wxappName: "测试分享标题",text1: "测试分享的二维码如下", text2: "", //小程序名称qrcodePath: ''},eventDraw() {var self = this;wx.showLoading({title: '绘制分享图片中',mask: true})/*** 店铺*/this.setData({painting: {width: 750,height: 1000,clear: true,views: [{type: 'rect',// url: '../../images/bg.png', //背景图top: 0,left: 0,width: 750,height: 1000,background:'#EDF5FD'},{type: 'text',content: this.data.wxappName, //公司名字  center起作用。left设置375 750的一半就行fontSize: 32,textAlign: 'left',color: "#1a1a1a",top: 80,left:240,width:400,bolder: true},{type: 'text',content: this.data.text1, //金额fontSize: 28,textAlign: 'left',color: "#1a1a1a",top: 150,left: 180,bolder: true},{type: 'image',url: this.data.qrcodePath,top: 200,left: 180,width: 300,height: 300},{type: 'text',content: this.data.text2, //订单编号fontSize: 23,textAlign: 'left', //居中，但是还是要left 自己left到居中 然后不管什么型号的都会居中了center必须要有color: "#1a1a1a",top: 620,left: 180,bolder: true}]}})},//  //绘图完成之后的回调函数eventGetImage(event) {console.log("绘制完成")console.log(event.detail.tempFilePath)wx.hideLoading()const {tempFilePath,errMsg} = event.detailif (errMsg === 'canvasdrawer:ok') {this.setData({shareImage: tempFilePath})}},share() {console.log(this.data.shareImage)//分享wx.showShareImageMenu({path: this.data.shareImage})},

微信小程序 — 二维码海报分享到好友功能相关推荐

【精】微信小程序生成二维码海报分享 [原理+源码]
关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定; 首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边 ...
Java生成微信小程序二维码，5种实现方式，一个比一个简单
文章目录前言先看官网一.JDK自带的URLConnection方式二.Apache的HttpClient方式三.okhttp3方式四.Unirest方式五.RestTemplate方式 ...
【java】Java生成微信小程序二维码
文章目录前言应用场景微信小程序官网 1.RestTemplate方式核心代码 getAccessToken 2. Unirest方式 Maven依赖核心代码 3. okhttp3方式 Mav ...
小程序如何关联微信小程序二维码，实现二码聚合
相信大家在停车场遇到过这样的场景,在停车场入场和出场时,不管我们是用微信还是支付宝,只需台扫同一个二维码,自动识别打开各端小程序,并带入参数停车场id和通道id. 这种方式一般统称为二维码聚合或者说是 ...
微信小程序二维码如何生成？
微信小程序二维码能够方便小程序的推广,那么微信小程序的二维码如何生成?微信小程序二维码都有哪些? 正式二维码在"设置"中查看小程序的正式二维码,该二维码只用于访问小程序的线上正式 ...
java创建微信小程序二维码
创建微信小程序二维码有两个接口需要一个是获取tocken的接口一个是生成二维码的接口获取tocken接口 //**********填写你的小程序appid 和 secret public sta ...
Java生成微信小程序二维码
Java生成微信小程序二维码 import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.Byt ...
java获取微信小程序二维码
java获取微信小程序二维码近期正好遇到了,随手记录下首先获取微信小程序二维码需要小程序的appid 以及secret 然后根据appid和secret去获取小程序的token 即 access_ ...
生成微信小程序二维码（携带参数跳转指定页面）
需求:生成微信小程序二维码并携带参数,扫码跳转指定页面获取WxMaService对象 WxMaDefaultConfigImpl config = new WxMaDefaultConfigImpl ...

微信小程序 — 二维码海报分享到好友功能

微信小程序 — 二维码海报分享到好友功能相关推荐

最新文章

热门文章