小程序开发经验-二维码分享
先看一下效果图
一:wxml
<view class='page'>
<view class='img'>
<canvas class='shareImg' style='width:{{windowWidth}}px; height:{{windowHeight}}px;'
canvas-id="shareCanvas"
binderror="canvasIdErrorCallback"
></canvas>
</view>
<view class='btn'>
<button class='shareView' open-type='getUserInfo' bindtap="downImg">
<text class='iconfont icon-xiazai xiazai black'></text>保存到本地
</button>
<button class='shareFriend' data-name="shareBtn" open-type="share">
邀请好友为我点赞
</button>
</view>
</view>
二:js
1:页面初始化加载
onReady: function () {
var that = this;
wx.showLoading({
title: '正在生成...',
mask: true,
});
var i = setInterval(function () {
console.log(calDays);
if (share_like_code && share_bg_img && windowWidth && nickName && wxAvatarUrl && stepSize && days && calDays==days){
clearInterval(i);
createShareImg(that);
}
},200);
loadUserData(this);
loadUserInfo(this);
loadShareData(this);
},2:加载二维码
function loadShareLikeCode(that){
user_info_table.where({
_openid: openid
}).orderBy('createDate', 'desc').limit(1).get().then(res => {
var user = res.data[0];
console.log(' save user select user ', user);
var shareLikeCodeUrl = user.shareLikeCodeUrl;
if (shareLikeCodeUrl){
wx.getImageInfo({
src: shareLikeCodeUrl,
success: function (res) {
console.log('res', res);
share_like_code = res.path;
},
fail: function (e) {
console.log(e);
wx.showToast({
title: '加载失败',
icon: 'none',
mask: false,
duration: 2000
});
}
})
}else{
wx.cloud.callFunction({
name: 'img_upload_handle', // 云函数名称
data: { // 小程序码所需的参数
page: "pages/home/home",
scene: 'f:' + openid,
fileName: 'shareLike/' + openid + '/code/' + openid + '.png',
},
complete: res => {
console.log('callFunction test result: ', res)
console.log('callFunction test url: ', res.result.url);
var url = "https://" + res.result.url;
console.log("url:", url);
wx.getImageInfo({
src: url,
success: function (res) {
console.log('res', res);
share_like_code = res.path;
},
fail: function (e) {
console.log(e);
wx.showToast({
title: '加载失败',
icon: 'none',
mask: false,
duration: 2000
});
}
})
var user_id = user._id;
user_info_table.doc(user_id).update({
data: {
shareLikeCodeUrl: url,
}
})
.then(res => { })
.catch(console.error);
},
});
}
})
}2:加载背景图片
function loadShareData(that) {
dict_config_table.where({
type: 'share_bg_img',
sub_type: page_type,
}).orderBy('index', 'ASC').get().then(res => {
var content = res.data[0].content;
console.log(content);
wx.getImageInfo({
src: content,
success: function (res) {
console.log('res', res);
share_bg_img = res.path;
},
fail: function (e) {
console.log(e);
}
})
})3:绘制图片
function createShareImg(that){
const context = wx.createCanvasContext('shareCanvas');
context.drawImage(share_bg_img, 0, 0, windowWidth, windowHeight);
context.fillStyle = "rgba(0,0,0,0.4)";
context.fillRect(20 * rpx, 20 * hrpx, 280 * rpx, 464 * hrpx);
//头像
context.fillStyle = "rgba(255,255,255,1)";
context.fillRect(50 * rpx, 30 * hrpx, 50 * rpx, 50 * rpx);
context.drawImage(wxAvatarUrl, 50 * rpx, 30 * hrpx, 50 * rpx, 50 * rpx);
context.setFillStyle('#FFFFFF');
// context.setFontSize(30);
// context.fillText(avatar, 30, 60);
//昵称
context.setFontSize(15 * rpx);
context.fillText(nickName, 110 * rpx, 50 * hrpx);
//说明
context.setFontSize(11 * rpx);
context.fillText(titContent, 110 * rpx, 75 * hrpx);
// 完成度
context.setFontSize(27 * rpx);
context.fillText(stepSize, 50 * rpx, 120 * hrpx);
context.setFontSize(10 * rpx);
context.fillText(stepUnit, 105 * rpx, 120 * hrpx);
context.setFontSize(18 * rpx);
context.fillText(stepResult, 60 * rpx, 150 * hrpx);
context.setFontSize(27 * rpx);
context.fillText(days, 200 * rpx, 120 * hrpx);
context.setFontSize(10 * rpx);
context.fillText(daysUnit, 240 * rpx, 120 * hrpx);
context.setFontSize(18 * rpx);
context.fillText(daysResult, 210 * rpx, 150 * hrpx);
//中间提示
context.setFontSize(15 * rpx);
context.fillText(encontent1, 70 * rpx, 200 * hrpx);
context.setFontSize(15 * rpx);
context.fillText(encontent2, 30 * rpx, 230 * hrpx);
context.setFontSize(11 * rpx);
context.fillText(content, 75 * rpx, 260 * hrpx);
context.drawImage('/pages/utils/resources/image/dz.png', 140 * rpx, 290 * hrpx, 40 * rpx, 40 * rpx);
context.setFontSize(12 * rpx);
context.fillText(likeTip, 135 * rpx, 355 * hrpx);
// 二维码
context.drawImage(share_like_code, 65 * rpx, 390 * hrpx, 80 * rpx, 80 * rpx);
context.setFontSize(18 * rpx);
context.fillText(codeName, 175 * rpx, 410 * hrpx);
context.setFontSize(12 * rpx);
context.fillText(codeTip1, 175 * rpx, 440 * hrpx);
context.setFontSize(12 * rpx);
context.fillText(codeTip2, 175 * rpx, 460 * hrpx);
context.draw();
wx.hideLoading();
}
4:下载图片
downImg:function(){
wx.showLoading({
title: '正在保存...',
mask: true,
});
wx.getSetting({
success(res) {
console.log(res.authSetting)
console.log();
var isSave = res.authSetting['scope.writePhotosAlbum'];
console.log(isSave);
if (false == isSave) {
wx.openSetting({
success(res) {
console.log(res.authSetting)
}
})
wx.hideLoading();
}
}
})
wx.canvasToTempFilePath({
canvasId: 'shareCanvas',
success(res) {
console.log(res);
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
wx.showToast({
title: '已下载至相册',
icon: 'success',
mask: false,
duration: 2000
})
},
fail(){
wx.hideLoading();
},
complete(){
}
})
},
fail(e) {
console.log(e);
}
})
}
}, this);
},
三:云函数
1:img_upload_handle
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext();
var dataresult = await cloud.callFunction({
name: 'get_token', // 云函数名称
data: { // 小程序码所需的参数
page: event.page,
friendId: event.friendId,
},
})
var data = dataresult.result.data;
var access_token = dataresult.result.access_token;
var bytes = data;
var upresult = await cloud.callFunction({
name: 'weixin_bytes_uploader', // 云函数名称
data: { // 小程序码所需的参数
bybes: bytes,
fileName: event.fileName,
access_token: access_token,
page: event.page,
scene: event.scene,
},
})
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
dataresult: dataresult,
url: upresult.result.url
}
}2:云函数 get_token
// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext();
const request = require('request');
return new Promise((resolve, reject) => {
request('https://....getToken', function (error, response, body) {
var access_token = JSON.parse(body).data;
var result = {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
access_token: access_token
}
resolve(result);
});
});
}3: 云函数 weixin_bytes_uploader
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
var fileName = null;
var bybes = null;
if (event.fileName){
fileName = event.fileName;
}
if (event.bybes){
bybes = event.bybes;
}else{
return {
error:"no bybes",
}
}
var access_token = event.access_token;
var key = fileName;
var options = {
scope: 'scope',
expires: 7200,
};
var param = {
page: event.page,
width: 280,
scene: event.scene,
};
const request = require('request');
return new Promise((resolve, reject) => {
var COS = require('cos-nodejs-sdk-v5');
// 使用永久**创建实例
var cos = new COS({
SecretId: 'SecretId',
SecretKey: 'SecretKey'
})
request.post({
url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + access_token, form: JSON.stringify(param),
body: 'buffer',
encoding: null,
headers: [
{
name: 'responseType',
value: 'arraybuffer'
},
{
name: 'content-type',
value: 'application/x-www-form-urlencoded'
}
],
}, function (err, httpResponse, body) {
cos.putObject({
Bucket: 'Bucket', /* 必须 */
Region: 'Region', /* 必须 */
Key: key, /* 必须 */
Body: body, /* 必须 */
onProgress: function (progressData) {
console.log(progressData);
},
}, function (err, data) {
result.err = err;
result.data = data;
result.url = data.Location;
resolve(result);
if (err) {
console.log(err);
} else {
console.log(data);
}
});
});
});
}
四:生成效果图