Solo  当前访客:1 开始使用

布丁与画家的博客

努力改变一小部分人解决问题的方式

微信小程序使用前端实现动态二维码海报分享(涉及云函数)

2019-09-21 09:50:31 iwh718
0  评论    0  浏览

null

最近给自己的拼团小程序添加一个海报分享的功能,由于要分享特定的商品,需要动态路由的二维码,这样的话,就没办法直接内置一个二维码了,只能向后端请求,然后保存到本地。但是不想动后端的接口了,就想到了只用前端生成:

下面是实现流程思路:

1.向后端请求指定商品id路由的参数,后端返回该页面的二维码海报:放弃!
2.使用云函数获取小程序二维码,支持路由参数,保存到小程序本地,通过canvas绘制,生成海报:Bingo!

然后就是编码的问题:

1.云函数的使用
2.canvas绘制网络图片(需要先使用wx.getImageInfo拿到临时路径)
3.动态设置海报的尺寸
4.定制其它内容(头像,文本)

效果图:

1.gif

在这个过程中:点击分享按钮,把canvas的hidden关闭(canvas层级太高),开始绘制封面图(网络路径),请求小程序码,绘制小程序码,绘制文本,由于有时候延迟很大,所以去除了头像绘制,代码会给出示例。

开始代码

//绘制海报

renderShare()  {

let that =  this;

//绘制背景

ctx.save();

ctx.fillStyle =  "#FFFFFF";

ctx.fillRect(0,  0,  this.data.windowWidth *  .8,  this.data.windowWidth *  .8  +  120);

ctx.draw()

ctx.restore();

ctx.setFontSize(18)

ctx.fillStyle =  "#000000";

ctx.fillText(`一起来扫码领【${this.data.goods_info.coupon_discount /  100}元券】`,  90,  this.data.windowWidth *  .8  +  75)

ctx.draw(true)

ctx.save()

  

//console.log(e);

// let avatarurl_width = 60,

// avatarurl_heigth = 60,

// avatarurl_x = 30, //绘制的头像在画布上的位置

// avatarurl_y = 30; //绘制的头像在画布上的位置

  

// ctx.beginPath();

//先画个圆 前两个参数确定了圆心 (x,y) 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针

//ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

// ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸

console.log('开始绘制')

// ctx.drawImage(e.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片

wx.getImageInfo({

src: that.data.goods_info.goods_gallery_urls[0],

success(ee)  {

console.log(ee)

ctx.restore()

//计算海报宽度

let paperW = that.data.windowWidth *  .8;

//计算图片居中

ctx.drawImage(ee.path,  0,  0, paperW, paperW)

ctx.draw(true)

console.log(ctx);

//获取小程序码

const res = wx.cloud.callFunction({

// 要调用的云函数名称

name:  'getCodeImg',

data:  {

goods_id: that.data.goods_info.goods_id

}

});

res.then((code)  =>  {

console.log(code)

console.log(code_filePath)

fsm.writeFile({

filePath: code_filePath,

data: code.result.buffer,

encoding:  'binary',

success()  {

console.log(code_filePath)

console.log(code_filePath)

wx.getImageInfo({

src: code_filePath,

success(code_result)  {

console.log(code_result)

ctx.drawImage(code_result.path,  30, that.data.windowWidth *  .8  +  40,  52.2,  59.4)

ctx.draw(true)

//canvas生成图片

wx.canvasToTempFilePath({

canvasId:  'shareImg',

success(canvas_img)  {

canvas_imgPath = canvas_img.tempFilePath;

  

},

fail(canvas_fail)  {

console.log(canvas_fail)

},

complete(e){

wx.hideToast(tips)

}

},  this)

}

})

},

fail()  {

  

},

});

  

});

}

})

  
  

},

这里注意几个地方:canvas绘制网络图一定要先用wx的API转换成临时文件再绘制。

没有使用过云函数的小伙伴看这里:微信官方为我们提供了云函数的便利,我们需要在本地建立一个云函数的目录,开发工具会自动识别,比如我这里建立了cloudfunctions后面的| shell-goods是工具自动添加的!

在里面我们可以建立云函数目录,比如这个getCodeImg

一个函数是一个目录哦,打开只有config.js和index.js 下面就是index.js的内容,具体请移步微信文档:云开发

捕2获.PNG

一个小提示:关于引入

const cloud = require('wx-server-sdk')

需要使用NPM安装哦

然后最后一步就是不要忘记,右键云函目录,点击部署!!!

之后在其它页面我们就可以使用下面的方式调用了,参数也是可以传的。

// 云函数入口文件

const cloud = require('wx-server-sdk')

  

cloud.init()

  

// 获取小程序码

exports.main =  async(event, context)  =>  {

let result =  await cloud.openapi.wxacode.createQRCode({

path:  'pages/shop/goods/goods?goods_id='  + event.goods_id,

//是否透明底图

is_hyaline:  true,

width:  300

});

console.log(result)

return result

}

其实如果可以,还是尽量从后端生成比较好,快速,尤其是想绘制背景的时候,前端本地每次都要将网络转为临时文件再绘制到canvas太慢了。

onLoad拿到入口参数

if  (lauchInfo.query.goods_id !=  undefined  && lauchInfo.query.goods_id.goods_id !=  ""){

mThis.initData(lauchInfo.query.goods_id);

console.log("sc")

return  false

}

标题:微信小程序使用前端实现动态二维码海报分享(涉及云函数)
作者:iwh718
地址:看看我的CSDN

web站点:骇客猫科技资讯



今日诗词
QQ交流群:914105779

标签

友链

存档

TOP