微信小程序> 小程序怎么分享二维码-小程序生成二维码分享朋友圈的功能-小程序二维码

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

浏览量:2054 时间: 来源:TinaAsura

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

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

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

4.这里说一下B接口的参数scene,关于scene参数,小程序的解释如下:

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

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

7.

8.

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

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

10.二、如何制作画布及分享朋友圈?

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

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

buttonclass='share_quan'bindtap='share_quan'分享朋友圈/button!--画布--canvascanvas-id="shareImg"style="width:600px;height:800px;"/canvasviewhidden='{{hidden}}'imagesrc='{{imgurl}}'/imagebuttonbindtap='save'保存图片到相册/button/view

13.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})}})}})

14.2、下载二维码

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

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

//canvas绘制文字和图片constctx=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()

16.4、画布生成图片

share_quan:function(){//点击分享朋友圈,画布生成图片varthat=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)},

17.5、点击保存到相册

save:function(){varthat=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})}}})},},这上面的画布大小自己和那些文字以及图片的位置根据需求定,生成的图片大小也一样

18.

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎