微信小程序帆布分享海报,包含拒绝授权后重新打开授权设置。
这篇文章完善了第一次拒绝授权后再次点击可以打开授权设置,希望可以帮助到爱学习的道友
这里是效果图,图片可以百度上找。
话不多说,直接上代码
最重要的一点,千万不要忘记在json文件里面注册组件和wxml里面引用组件
wxml
& lt;按钮类=癰tn catchtap”=癱reatePoster”在生成海报& lt;/button>=& lt;一id=癵etPoster”类型“{{类型}}”isflag=" {{isflag}} " title=bigImg=皗{goods_title}}{{份额。img}} " qrcode="{{份额。rcode}}”在
& lt;/my-poster>之前
js
数据:{isflag:假//海报模态框}//生成海报
createPoster:函数(){
this.setData ({
isflag:真
})
this.selectComponent (# getPoster) .getAvaterInfo ();
},
组件wxml
& lt;视图隐藏=" {{!isflag}} " catchtouchmove="返回" class=" con-poster”bindtap=癱losePoster”比;
& lt; !——模态框——比;
& lt;视图类=modialog的祝辞
& lt;视图类=' canvas-box ' id=盎既萜鳌北?
& lt;帆布canvas-id=" myCanvas "/比;
& lt;/view>
& lt;/view>
& lt; !——保存图片按钮——比;
& lt;视图类=' save-img catchtap=' saveBtn祝辞保存图片& lt;/view>
& lt;/view>
组件wxs
.con-poster {
宽度:100%;
高度:100%;
背景:rgba (0, 0, 0, 0.5);
位置:固定;
上图:0;
左:0;
z - index: 999;
}
.modialog {
宽度:660 rpx;
身高:750 rpx;
保证金:100 rpx汽车0;
}
.canvas-box {
宽度:660 rpx;
身高:750 rpx;
背景:# fff;
}
.save-img {
宽度:660 rpx;
身高:100 rpx;
保证金:30 rpx汽车0;
字体大小:32 rpx;
显示:flex;
justify-content:中心;
对齐项目:中心;
颜色:# fff;
背景:线性渐变(90度,rgba (56219248 1), rgba (81171255,1));
}
组件js
属性:{
isflag:{//控制组件开关
类型:布尔,
值:true
}
bigImg:{//大图
类型:字符串,
价值:“
},
qrcode:{//二维码
类型:字符串,
价值:“
},
标题:{//标题
类型:字符串,
价值:“大幅度开发的
}
}
数据:{
imgHeight: 0
},
方法:{//关闭海报
closePoster:函数(){
this.setData ({
isflag:假
})
},//提示框
面包:函数(味精,调){
wx.showToast ({
标题:味精,
图标:“没有”,
成功(){
回调,,(setTimeout(函数(){
回调()
},1500))
}
})
},//下载产品大图
getAvaterInfo:函数(){
wx.showLoading ({
标题:“生成中……”
面具:真
});
var=这个;
that.setData ({
isflag:真
})
var productImage=that.data.bigImg;
如果(productImage) {
wx.downloadFile ({
url: productImage,
成功:函数(res) {
wx.hideLoading ();
如果(res.statusCode===200) {
var productSrc=https://www.yisu.com/zixun/res.tempFilePath;
那calculateImg (productSrc、功能(数据){
那getQrCode (productSrc、数据);
})
其他}{
那烤面包(“产品图片下载失败!”,()=祝辞{
var productSrchttps://www.yisu.com/zixun/=?
that.getQrCode (productSrc);
})
}
},
失败:函数(err) {
wx.hideLoading ();
那烤面包(“请求失败,网络错误的,()=比;{
that.closePoster ()
})
}
})
其他}{
wx.hideLoading ();
var productSrchttps://www.yisu.com/zixun/=?
that.getQrCode (productSrc);
}
},//下载二维码
getQrCode:函数(productSrc imgInfo=" ") {
wx.showLoading ({
标题:“生成中……”
面具:没错,
});
var=这个;
var productCode=that.data.qrcode;
如果(productCode) {
wx.downloadFile ({
url: productCode的,
成功:函数(res) {
wx.hideLoading ();
如果(res.statusCode===200) {
var codeSrc=https://www.yisu.com/zixun/res.tempFilePath;
那sharePosteCanvas (productSrc codeSrc imgInfo);
其他}{
那烤面包(“二维码下载失败!”,()=比;{
var codeSrchttps://www.yisu.com/zixun/=?
那sharePosteCanvas (productSrc codeSrc imgInfo);
})
}
},
失败:函数(){
wx.hideLoading ();
那烤面包(“请求失败,网络错误的,()=比;{
that.closePoster ()
})
}
})
其他}{
wx.hideLoading ();
var codeSrchttps://www.yisu.com/zixun/=?
那sharePosteCanvas (productSrc codeSrc);
}
},//帆布绘制分享海报
sharePosteCanvas:函数(avaterSrc codeSrc imgInfo) {
wx.showLoading ({
标题:“生成中……”
面具:没错,
})
var=这个;
const ctx=天气。createCanvasContext (“myCanvas”);
var宽度=" ";
const查询=wx.createSelectorQuery()在(这个);
query.select(“#画布容器”)。boundingClientRect(函数(矩形){
var宽度=rect.width;
var高度=rect.height;
var左=rect.left;
ctx.setFillStyle (“# fff”);
ctx。fillRect(0, 0,宽度、高度);//海报大图
如果(avaterSrc) {
如果(imgInfo) {
var imgheght=parseFloat (imgInfo);
}
ctx。drawImage (avaterSrc 0 0,宽度,imgheght & # 63;imgheght:宽度);
ctx.setFontSize (14);
ctx.setFillStyle (“# fff”);
ctx.setTextAlign(左);
}//海报标题
如果(that.data.title) {
const CONTENT_ROW_LENGTH=22;//正文单行显示字符长度
让[contentLeng contentArray contentRows]=that.textByteLength ((that.data.title)。substr (0, 40)、CONTENT_ROW_LENGTH);
ctx.setTextAlign(左);
ctx.setFillStyle (# 000);
ctx.setFontSize (15);
让contentHh=22 * 1;
(让m=0;m & lt;contentArray.length;m + +) {
ctx。imgheght fillText (contentArray [m], 15日+ 35 + contentHh *米);
}
}//绘制二维码
如果(codeSrc) {
ctx。drawImage (codeSrc,左+ 215,imgheght + 20,宽度/4,宽/4)
ctx.setFontSize (10);
ctx.setFillStyle (# 000);
}
}).exec ()
setTimeout(函数(){
ctx.draw ();
wx.hideLoading ();
}, 1000)
},//封装每行显示的文本字数
textByteLength(文本、num){//文本为传入的文本num为单行显示的字节长度
让strLength=0;
让行=1;
让str=0;
让arr=[];
(让j=0;j & lt;text.length;null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
