1.调用接口获取出小程序码
解释:获取小程序首先需要获取到accessToken,然后通过传递accessToken,scene和page掉生成小程序码接口返回小程序码.
//跳转到分享页面
goShare() {
const that = this;
uni.showLoading({
title: '加载中',
mask: true
});
accesstoken().then((res) => {
let valll = {
accessToken: res[1].data.accessToken,
scene: that.seriesToSportsId,
page: "pages/...../....."//这里按照需求设置值和参数
}
getwxacodeunlimit(valll).then((ress) => {
uni.hideLoading()
let organizer = that.titleDetail.organizer
let organizerName = organizer?('主办单位:' + organizer):'';
let params = {
organizer: organizerName,//主办单位
title: that.titleDetail.title,//赛事名称
time:'比赛时间:2020年12月22日',
logo:that.titleDetail.logo,//赛事logo
qrcode:ress[1].data.url,//小程序码链接
typeVal:'联赛首页',
}
uni.navigateTo({
url:'/pages/.../share/share?params='+JSON.stringify(params)
})
})
})
}2.跳转带share生成海报页面
<template>
<view class="qiun-columns">
<topNavi title="保存分享图片" bgColor='#CC0E0E'></topNavi>
<canvas canvas-id="shareImg"></canvas>
<view class="fixed proj_styl bg_000"></view>
<view class="fixed proj_styl" v-if="tempFilePath" v-bind:style="{top:topBarHeight+'px'}">
<view class="flex-align-center" v-bind:style="{height:scrollHeight+'px'}">
<scroll-view class="bg-fff width-100 blog">
<image class="height-100 width-100" :src="tempFilePath"></image>
</scroll-view>
</view>
<view class="width-100 flex-align-center border-box btol" v-bind:style="{height:bottomBarHeight+'px'}">
<view class="bg_CC0E0E width-100 ti_btl align-center color-fff font-32" @click='onSave'>保存分享图</view>
</view>
</view>
</view>
</template>
<script>
import topNavi from '../../../components/topNavi.vue';
import {
base64Img
} from '../../../api/match.js';
export default {
data() {
return {
scrollHeight: getApp().globalData.useHeight,
statusBarHeight: getApp().globalData.statusBarHeight,
bottomBarHeight: getApp().globalData.bottomBarHeight,
topBarHeight: 0,
hidden: true,
useHeight: getApp().globalData.useHeight,
screenWidth: getApp().globalData.screenWidth,
tempFilePath: null, //导出的图片
athlete: null,
option: null,
transmitVal: null,
}
},
components: {
topNavi
},
onLoad(option) {
const that = this;
that.transmitVal = JSON.parse(option.params);
that.transmitVal.word1 = that.transmitVal.title.substring(0, 7);
that.transmitVal.word2 = that.transmitVal.title.substring(7, 11);
that.transmitVal.word3 = that.transmitVal.title.substring(11,21);
that.transmitVal.word4 = that.transmitVal.title.substring(21,31);
wx.getSavedFileList({
success(res) {
if (res.fileList.length > 0) {
wx.removeSavedFile({
filePath: res.fileList[0].filePath,
complete(val) {
that.GoCanvas()
console.log('清除文件')
}
})
} else {
console.log('没有清除文件', res)
that.GoCanvas()
}
}
})
},
methods: {
GoCanvas() {
const that = this;
this.topBarHeight = this.statusBarHeight + 40;
uni.showLoading({
title: '加载中',
mask: true
});
let png2 = that.transmitVal.logo; //logo
let png3 = that.transmitVal.qrcode; //小程序码
let img = [png2, png3];
console.log('图片显示', img);
base64Img({
url: img
}).then((res) => {
let path = res[1].data;
const ctx = uni.createCanvasContext('shareImg');
let grd = ctx.createLinearGradient(0, 0, 330, 540)
grd.addColorStop(0, 'blue')
grd.addColorStop(1, 'red')
ctx.setFillStyle(grd)
ctx.fillRect(0, 0, 330, 540)
ctx.beginPath();
ctx.moveTo(20, 20)
ctx.lineTo(20, 520)
ctx.moveTo(20, 20)
ctx.lineTo(310, 20)
ctx.moveTo(310, 20)
ctx.lineTo(310, 520)
ctx.moveTo(20, 520)
ctx.lineTo(310, 520)
ctx.setStrokeStyle('#fff');
ctx.stroke()
ctx.setTextAlign('center')
ctx.setFontSize(25);
ctx.setFillStyle('#fff');
ctx.fillText(that.transmitVal.word1, 165, 180);
ctx.setFontSize(23);
ctx.setFillStyle('#fff');
ctx.fillText(that.transmitVal.word2, 165, 210);
ctx.setFontSize(20);
ctx.setFillStyle('#fff');
ctx.fillText(that.transmitVal.word3, 165, 240);
ctx.fillText(that.transmitVal.word4, 165, 270);
ctx.setFontSize(12);
ctx.setFillStyle('#fff');
ctx.fillText('扫码进入赛事官网', 165, 500);
ctx.fillText(that.transmitVal.time, 165, 350);
if(that.transmitVal.address){
ctx.fillText(that.transmitVal.address, 165, 370);
}
if(that.transmitVal.organizer){
ctx.fillText(that.transmitVal.organizer, 165, 330);
}
that.send_code(path[0], ctx, 125, 50, 80, 80, 46, 1).then(() => {
that.send_code(path[1], ctx, 125, 380, 80, 80, 10, 2).then(() => {
ctx.draw(true, () => {
that.share();
})
})
})
})
},
//点击生成图片
share() {
const that = this;
wx.canvasToTempFilePath({
canvasId: 'shareImg',
success: function(res) {
that.tempFilePath = res.tempFilePath;
that.canvasShow = true;
uni.hideLoading();
console.log('绘制成功', res.tempFilePath)
}
})
},
//保存分享的图片
onSave() {
const that = this;
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.saveImage()
},
fail() {
wx.openSetting({
success: (res) => {}
})
}
})
} else {
that.saveImage()
}
}
})
},
//保存图片到本地
saveImage() {
const that = this;
wx.saveImageToPhotosAlbum({
filePath: that.tempFilePath,
success: function(res) {
setTimeout(function() {
uni.navigateBack({
delta: 1
})
}, 2000)
uni.showToast({
title: '保存图片成功',
duration: 2000
});
},
fail: function(err) {
uni.showToast({
title: '保存图片失败',
icon: 'none',
duration: 2000
});
}
})
},
//将base64图片转网络图片
send_code(code, ctx, x, y, width, height, radius, pathVal) {
/*code是指图片base64格式数据*/
//声明文件系统
return new Promise(function(resolve, reject) {
const that = this;
const fs = wx.getFileSystemManager();
//随机定义路径名称
var times = '1585102296120';
var codeimg = wx.env.USER_DATA_PATH + '/' + times + pathVal + '.png';
console.log('codeimg', wx.env.USER_DATA_PATH);
//将base64图片写入
fs.writeFile({
filePath: codeimg,
data: code.slice(22),
encoding: 'base64',
success: (res) => {
//写入成功了的话，新的图片路径就能用了
if (radius) {
ctx.save();
ctx.strokeStyle = "#fffbff";
ctx.beginPath();
ctx.moveTo(x, y + radius);
ctx.lineTo(x, y + height - radius);
ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
ctx.lineTo(x + width - radius, y + height);
ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
ctx.lineTo(x + width, y + radius);
ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
ctx.lineTo(x + radius, y);
ctx.quadraticCurveTo(x, y, x, y + radius);
if (codeimg) {
ctx.clip();
ctx.drawImage(codeimg, x, y, width, height); // logo
}
resolve(true);
ctx.restore()
} else {
ctx.drawImage(codeimg, x, y, width, height) //背景
console.log('路径', res);
resolve(true);
}
},
fail: () => {
uni.hideLoading()
}
});
})
},
}
}
</script>
<style>
canvas {
position: fixed;
top: 0;
left: 999px;
width: 330px;
height: 540px;
}
.proj_styl {
top: 0;
width: 100%;
bottom: 0;
z-index: 3;
}
.blog {
margin: 0 2rem;
height: 1000rpx;
border-radius: 10rpx;
/* padding: 0.5rem 0.5rem 1rem 0.5rem; */
box-sizing: border-box;
}
.btol {
position: fixed;
bottom: 0;
box-sizing: border-box;
padding: 0 2rem;
}
</style>注意:画http图片时需要先将图片转化为base64格式后再调用send_code方法将其画出.
版权声明：本文为Seven_Ting原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。