全国服务热线:4008-888-888

行业新闻

html怎么做网页-微信小程序如何生成海报分享微信

--------

html怎么做网页

------- 导语: 新项目要求写完有一段時间了,可是還是想回过来总结一下,一是对新项目的回望优化等,二是对坑的地区做个纪录,防止之后遇到相近的难题。


新项目要求写完有一段時间了,可是還是想回过来总结一下,一是对新项目的回望优化等,二是对坑的地区做个纪录,防止之后遇到相近的难题。

运用手机微信强劲的社交媒体工作能力根据小程序做到裂变的目地,拉取新客户。

转化成的海报以下

要求剖析

1、运用小程序官方出示的api能够立即共享转发到手机微信群开启小程序

2、运用小程序转化成海报储存照片到相册共享到朋友圈,客户长按鉴别二维码关心微信公众号或开启小程序来做到裂变的目地

完成计划方案 一、剖析怎样完成

坚信大伙儿应当都会有相近的蒙蔽,就是怎样依照商品设计方案的那样绘图成海报,实际上那时候我也是不知道道怎样着手,用心想了下得根据canvas绘图成照片,这样客户储存这个照片到相册,便可以共享到朋友圈了。可是要绘图的照片上面不但有文本也有数据、照片、二维码等且都是活的,这个要如何动态性转化成呢。用心想了下,需要一点一点的将文本和数据,情况图绘图到画布上去,这样根据api最后生成一个照片导出来得手机相册中。

二、需要处理的难题

1、二维码的动态性获得和绘图(包含怎样转化成小程序二维码、微信公众号二维码、开启网页页面二维码)

2、情况图怎样绘图,获得照片信息内容

3、将绘图进行的照片储存到当地相册

4、解决客户是不是撤销受权储存到相册

三、完成流程 这里我实际写下围绕上面所提出的难题,叙述大约完成的全过程

①最先建立canvas画布,我把画布精准定位设成负的,是以便不让它显示信息在网页页面上,是由于我尝试把canvas根据分辨标准动态性的显示信息和掩藏,在绘图的情况下会出現难题,因此选用了这类方式,这里也有一定要设定画布的尺寸。

 canvas canvas-id= myCanvas >

②建立好画布以后,先绘图情况图,由于情况图我是放在当地,因此获得 canvas 组件 canvas-id 特性,根据createCanvasContext建立canvas的制图左右文 CanvasContext 目标。应用drawImage绘图图象到画布,第一个主要参数是照片的当地详细地址,后边两个主要参数是图象相对性画布左上角部位的x轴和y轴,最终两个主要参数是设定图象的宽高。

const ctx = wx.createCanvasContext('myCanvas')

ctx.drawImage('/img/study/shareimg.png', 0, 0, 690, 1085)

③建立好情况图后,在情况图上绘图头像,文本和数据。根据getImageInfo获得头像的信息内容,这里需要留意下在获得的互联网照片要先配备download网站域名才可以起效,实际在小程序后台管理设定里配备。

获得头像详细地址,最先量取头像在画布中的尺寸,和x轴Y轴的座标,这里的result[0]是我用promise封裝回到的一个照片详细地址

let headImg = new Promise(function (resolve) {
wx.getImageInfo({
src: `${app.globalData.baseUrl2}${that.data.currentChildren.headImg}`,
success: function (res) {
resolve(res.path)
},
fail: function (err) {
console.log(err)
wx.showToast({
title: '互联网不正确请重试',
icon: 'loading'
})
}
})
})

let avatarurl_width = 60, //绘图的头像宽度
avatarurl_heigth = 60, //绘图的头像高宽比
avatarurl_x = 28, //绘图的头像在画布上的部位
avatarurl_y = 36; //绘图的头像在画布上的部位

ctx.save(); // 先储存情况 已便于画完圆再用
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(); //画了圆 再裁切 原始画布中裁切随意样子和尺寸。一旦裁切了某个地区,则全部以后的制图都会被限定在被裁切的地区内
ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推动去照片

这里举个事例说下怎样绘图文本,例如我要绘图以下这个 字 ,需要动态性获得前面篇幅的总宽度,这样才可以设定 字 的x轴座标,这里我原本是想根据measureText来精确测量字体样式的宽度,可是在iOS端第一次获得的宽度值不对,有关这个难题,我还在手机微信开发设计者小区提了bug,因此我想用另外一个方式来完成,就是先获得一切正常状况下一个字的宽度值,随后乘以总篇幅就得到了总宽度,亲试是能够的。

let allReading = 97 / 6 / app.globalData.ratio * wordNumber.toString().length + 325;
ctx.font = 'normal normal 30px sans-serif';
ctx.setFillStyle('#ffffff')
ctx.fillText('字', allReading, 150);

④绘图微信公众号二维码,和获得头好像一样的,也是先根据插口回到照片互联网详细地址,随后再根据getImageInfo获得微信公众号二维码照片信息内容

⑤怎样绘图小程序码,实际官方网站文本文档也给出世成无尽小程序码插口,根据转化成的小程序能够开启随意一个小程序网页页面,而且二维码永久性合理,实际启用哪一个小程序二维码插口有不一样的运用场景,实际能够看下官方文本文档如何说的,也就是说前端开发根据传送主要参数调取后端开发插口回到的小程序码,随后绘图在画布上(和上面写的绘图头像和微信公众号二维码一样的)

ctx.drawImage('小程序码的当地详细地址', x轴, Y轴, 宽, 高)

⑥最后绘图完把canvas画布转成照片并回到照片详细地址

 wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
canvasToTempFilePath = res.tempFilePath // 回到的照片详细地址储存到一个全局性自变量里
that.setData({
showShareImg: true
})
wx.showToast({
title: '绘图取得成功',
})
},
fail: function () {
wx.showToast({
title: '绘图不成功',
})
},
complete: function () {
wx.hideLoading()
wx.hideToast()
}
})

⑦储存到系统软件相册;先分辨客户是不是开启客户受权相册,解决不一样状况下的結果。例如客户假如依照一切正常逻辑性受权是没难题的,可是有的客户假如点一下了撤销受权该怎样解决,假如不解决会出現一定的难题。因此当客户点一下撤销受权以后,来个弹框提醒,当它再度点一下的情况下,积极跳到设定正确引导客户去开启受权,从而做到储存到相册共享朋友圈的目地。

// 获得客户是不是开启客户受权相册
if (!openStatus) {
wx.openSetting({
success: (result) = {
if (result) {
if (result.authSetting[ scope.writePhotosAlbum ] === true) {
openStatus = true;
wx.saveImageToPhotosAlbum({
filePath: canvasToTempFilePath,
success() {
that.setData({
showShareImg: false
})
wx.showToast({
title: '照片储存取得成功,快去共享到朋友圈吧~',
icon: 'none',
duration: 2000
})
},
fail() {
wx.showToast({
title: '储存不成功',
icon: 'none'
})
}
})
}
}
},
fail: () = { },
complete: () = { }
});
} else {
wx.getSetting({
success(res) {
// 假如沒有则获得受权
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
openStatus = true
wx.saveImageToPhotosAlbum({
filePath: canvasToTempFilePath,
success() {
that.setData({
showShareImg: false
})
wx.showToast({
title: '照片储存取得成功,快去共享到朋友圈吧~',
icon: 'none',
duration: 2000
})
},
fail() {
wx.showToast({
title: '储存不成功',
icon: 'none'
})
}
})
},
fail() {
// 假如客户回绝过或沒有受权,则再度开启受权对话框
openStatus = false
console.log('请设定容许浏览相册')
wx.showToast({
title: '请设定容许浏览相册',
icon: 'none'
})
}
})
} else {
// 有则立即储存
openStatus = true
wx.saveImageToPhotosAlbum({
filePath: canvasToTempFilePath,
success() {
that.setData({
showShareImg: false
})
wx.showToast({
title: '照片储存取得成功,快去共享到朋友圈吧~',
icon: 'none',
duration: 2000
})
},
fail() {
wx.showToast({
title: '储存不成功',
icon: 'none'
})
}
})
}
},
fail(err) {
console.log(err)
}
})
}

至此全部的流程都已完成,在绘图的情况下会遇到一些多线程恳求后台管理回到的数据信息,因此我用promise和async和await开展了封裝,保证导出来的照片信息内容是详细的。在绘图的全过程的确遇到一些坑的地区。例如初刚开始导出来的照片占比尺寸不对,也有用measureText精确测量文本宽度不对,数次绘图(将会受互联网缘故)有时导出来的照片上的文本色调会有偏差等。假如你也遇到一些比较坑的地区能够一起讨论下做个纪录

手机微信扫描仪二维码关心官方手机微信 ▲长按照片鉴别二维码 ---------

html怎么做网页

------------


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服