小程序生成二维码分享朋友圈的功能

一、如何生成小程序分享页面的二维码？

通过后台接口可以获取小程序任意页面的二维码，具体可以参考https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html

可以选择你所需要的小程序码，给到后台相应的参数生成即可。

这里说一下B接口的参数scene，关于scene参数，小程序的解释如下：

注意：通过该接口生成的小程序码，永久有效，数量暂无限制。用户扫描该码进入小程序后，开发者需在对应页面获取的码中 scene 字段的值，再做处理逻辑。使用如下代码可以获取到二维码中的 scene 字段的值。调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟，开发工具模拟时的 scene 的参数值需要进行 urlencode

其实我理解的这个scene参数就是你要分享的那个页面的id，所以在你要分享的那个页面（也就是page参数）得做个逻辑判断，是否为二维码扫进去的。

可以使用这个编译工具帮助你测试，注意这个pages里面的页面必须是已经发布的小程序存在的页面。

onLoad: function (options) {var that = this;if (options.id ) {that.setData({ id: options.id });} else {that.setData({ id: decodeURIComponent(options.scene) });}

二、如何制作画布及分享朋友圈？

小程序没有自带分享朋友圈的功能，因此需要自己把下载的二维码及你要分享的内容利用canvas绘制上去，画布转成图片后保存到相册，分享图片后通过长按二维码进入到相对应的页面。

wxml里面画布布局，就随便简单写了个分享按钮。注意canvas布局的时候要定位到看不到的地方。

<button class='share_quan' bindtap='share_quan'>分享朋友圈</button>
<!-- 画布 -->
<canvas  canvas-id="shareImg" style="width:600px;height:800px;"></canvas>
<view hidden='{{hidden}}'>
<image src='{{imgurl}}'></image>
<button  bindtap='save'>保存图片到相册</button>
</view>

1、下载图片，必须要通过wx.downloadFile（）先把图片下载到本地，不然后面画不上去

Page({data: {hidden: true,code: "",title: "",imgs:"",imgUrl:""},

//我这里的imgurl是已经请求出来的图片路径。这里需要注意的是，img的域名如果是http的可能要改为https的，不然后面图片不会出来。wx.setStorage({ //数据存储下来，当时做这个需求时并没有存储，直接下载的图片去绘制的，但是电脑上可以出来，手机不能。所以就多了这一步，有点坑key: "key",data: that.data.imgUrl,success:function(res){// 下载图片wx.downloadFile({url: that.data.imgUrl,success: function (res) {console.log('我是下载的图片：' + res.tempFilePath);that.setData({imgs: res.tempFilePath  })}})}})

2、下载二维码

 // 下载二维码wx.downloadFile({url: '二维码接口scene=id&page=pages/index/index',//下载的二维码的地址和参数success: function (res) {that.setData({code: res.tempFilePath  })},fail: function (res) {}})

3、有了图片和二维码之后，就是绘制画布了

 // canvas绘制文字和图片const ctx = wx.createCanvasContext('shareImg');ctx.drawImage(that.data.code, 210, 525, 115, 145); //绘制二维码ctx.drawImage(that.data.imgs, 90, 50, 380, 350);  //绘制图片ctx.setTextAlign('center')                        ctx.setFillStyle('black')                      ctx.setFontSize(28)                              ctx.fillText("我是文字部分....", 600 / 2, 450,600)ctx.setFillStyle('gray') ctx.fillText("长按二维码....", 600/2, 740)ctx.stroke()ctx.draw()

4、画布生成图片

share_quan: function () { //点击分享朋友圈，画布生成图片var that = this;wx.showLoading({title: '图片正在生成中...'})setTimeout(function () {  //这里要加定时器，转成图片需要一定的时间，不然是不出来图片的哦// canvas画布转成图片wx.canvasToTempFilePath({x: 0,y: 0,width: 600,height: 800,destWidth: 480,destHeight: 550,canvasId: 'shareImg',fileType: 'jpg' ,  //这里为图片格式，最好改为jpg，如果png的话，图片存到手机可能有黑色背景部分success: function (res) {that.setData({imgurl: res.tempFilePath,hidden: false    })wx.hideLoading()},fail: function () {console.log("保存失败......")}})}, 2000)},

5、点击保存到相册

  save: function () {var that = thiswx.saveImageToPhotosAlbum({filePath: that.data.imgurl,success(res) {wx.showModal({content: '图片已保存到相册',showCancel: false,confirmText: '好的',success: function (res) {if (res.confirm) {console.log('用户确定了');that.setData({hidden: true})}}})},},

这上面的画布大小自己和那些文字以及图片的位置根据需求定，生成的图片大小也一样

小程序生成二维码分享朋友圈的功能相关推荐

微信小程序参数二维码生成朋友圈分享图片
前言小程序目前无法分享到微信朋友圈,可朋友圈是一个非常重要的传播途径,所以得想办法把这个资源利用起来微信小程序支持通过扫描/长按识别二维码或小程序码图片的方式进入一个小程序首页或小程序中某个特定页 ...
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
【微信小程序生成二维码并下载，分享】
微信小程序生成二维码并保存,分享,下载依赖工具使用weapp-qrcode-base64库生成二维码的base64编码链接:weapp-qrcode-base64 安装 npm install ...
小程序生成二维码海报
在小程序开发完成之后,我们会时常遇到这样的一个问题,小程序该怎么推广,增加曝光量,让更多的人看到?我们都知道,小程序推广一般是给小程序增加一个分享的功能,可以分享到群里面. 但是不能发朋友圈,若是想发 ...
一个很好用的小程序生成二维码海报的组件库
在小程序开发完成之后,我们会时常遇到这样的一个问题,小程序该怎么推广,增加曝光量,让更多的人看到?我们都知道,小程序推广一般是给小程序增加一个分享的功能,可以分享到群里面. 但是不能发朋友圈,若是想发 ...
【微信小程序】微信小程序生成二维码报错errcode=41030,invalid page rid
场景调用微信小程序生成二维码接口,提示报错错误内容 array(2) {["errcode"] => int(41030)["errmsg"] =&g ...
微信小程序生成二维码的两种方式
微信小程序生成二维码的两种方式 2020/11/10 第一种,利用网络api自动生成 <image class="xin-erma" src="{{'https:/ ...
微信小程序生成二维码js
微信小程序生成二维码js 参考:https://github.com/tomfriwel/weapp-qrcode 最新的二维码工具:https://github.com/KeeeX/qrcodejs ...
微信小程序生成二维码带参海报
微信小程序生成二维码带参海报没错,就是用 canvas 来实现文章目录微信小程序生成二维码带参海报获取屏幕分辨率比生成二维码获取网络图片并转为本地临时文件绘制背景图片以及二维码代码片段 ...

小程序生成二维码分享朋友圈的功能

小程序生成二维码分享朋友圈的功能相关推荐

最新文章

热门文章