使用最新版微信小程序,通过接口去获取背景图,二维码
二维码文档:获取小程序码 | 微信开放文档 (qq.com)
此方法使用canvas画布绘制出来二维码,是一个单独的页面,如果是想点击显示弹窗出来的那种,就需要写一个点击事件,去调用就行了
wxml:
<view class="promotion-head">
<view class="promotion-background">
<image src="/image/tome.jpg" mode=""/>
</view>
<canvas type="2d" id="myCanvas" ></canvas>
</view>
js:
代码中,请求接口的方式是url: getApp().globalData.url + '/api/personal/getWxcode',
这个方法是提取了公共部分,将接口的前半部分写到全局,使用的时候调用一下,再将后段接口补齐,若和代码段中方法不一样就直接将getApp到加号位置删除就行,直接将自己的接口写全
拿数据的时候是在接口里面直接去写,是因为试过了很多办法,在接口之外的话没办法拿到那个code,也许是自己方法使用不当..当然,肯定不值这一种方法,可以多尝试,这个方法也是和朋友沟通,看了他的方法才整出来的
Page({
data: {
code: '',
},
onReady() {
wx.request({
url: getApp().globalData.url + '后半接口域名',
method: "POST",
data: {
//其余数据根据自己接口所需去拿
},
success: (res) => {
var code = res.data;
console.log(code);
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr // 获取宽
canvas.height = res[0].height * dpr // 获取高
ctx.scale(dpr, dpr)
// 到这里就可以直接绘制
let image = canvas.createImage(); //创建iamge实例
image.src = '/image/friend.jpg'; // 引入本地图片,也可以使用网络路径的图片
image.onload = function () {
ctx.drawImage(image, 0, 0, 289, 370); // 背景图
// 绘制base64图片
//声明文件系统
const fs = wx.getFileSystemManager();
var times = new Date().getTime();
var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
//将base64图片写入
fs.writeFile({
filePath: codeimg,
data: code.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)
encoding: 'base64',
success: () => {
wx.createSelectorQuery().select('#myCanvas').fields({
node: true,
size: true
})
.exec((res) => {
let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文
let canvas = res[0].node;
const bg = canvas.createImage();
bg.src = codeimg;
bg.onload = function () {
ctx.drawImage(bg, 76, 175, 140, 140);
}
})
}
});
}
})
}
})
}
})