项目功能整理:微信小程序生成二维码海报
刚做完一个微信小程序的项目,现在对项目里的一些功能进行整理,这篇文章记录下如何在小程序里实现生成带有二维码的海报,并保存到用户相册。 以此文章记录,便于后续项目使用。 项目是基于mpvue做的。 项目要求每个用户可以生成一个属于自己的推广二维码,拉新后记录推广人。 生成的海报最终效果也不复杂,如图: 下面保存图片是个白底的按钮,跟背景色混一块就看不到了。。。 需求分析通过查阅微信小程序的文档得知,可以借助于小程序提供的canvas绘图功能根据设计图来绘制个canvas图,然后通过保存图片到相册这个API把图片保存到用户的手机相册。 海报中有些内容是固定不变的,比如背景图、邀请话术以及下面长按图片的提示语,而还有些内容是动态的,比如用户名和小程序码,不同项目需求不一样,但都会有变动和不变两类内容,然后我们根据设计图一点一点把内容绘制到图上就行啦。 知道要做什么了,那么我们来罗列下要做的事情(吉德林法则有云:把要解决的问题清清楚楚的列下来,问题就解决了一半)
动手实现
<canvas class="cv-ct-canvas" canvas-id="cv-pic"></canvas>
.cv-ct-canvas {
position: absolute;
left: 800rpx;
width: 300px;
height: 500px;
}
复制代码
const { tempFilePath: bg } = await this.downloadFile('$(STATICFILE_URL)/prom-share-bg.png')
let name = this.userInfo.NickName;
// 下载图片到本地
const { tempFilePath } = this.downloadFile(this.qrcodeUrl);
复制代码
这里要说明下,这个downloadFile方法是把微信的downloadFile方法进行了同步处理,其实很简单,就是用个Promise包裹一下。
在最后用canvasToTempFilePath把图片先保存到了临时目录,并把临时目录的地址赋值给了savePic,因为界面上要展示这个图,所以在界面上会有个Image标签,这个标签的地址就是savePic。
)
// 因为用户第一次进行操作的时候,授权状态为undefined,只有在明确拒绝过的时候才会是false
if (status === true || status === undefined) {
this.canWriteToAlbum = true
} else {
false
}
}
复制代码
<div "cv-save" @click="saveToPhotosAlbum" v-if="canWriteToAlbum">保存图片</div>
<div "openAlbumSetting" v-else>保存图片</div>
复制代码
至于为什么要这么做,当然还是因为小程序的限制啦。如果用户拒绝过授权,再次点击保存按钮,要弹出授权界面,而微信明确要求,弹出授权界面必须是用户直接点击按钮触发,所以只能这样实现了。openAlbumSetting代码如下: async openAlbumSetting() {
// 还是对微信API的同步封装
let status = await this.openSetting(// false表示又拒绝了
false) return
// 只有明确授权了才进行保存到相册的操作
true
this.saveToPhotosAlbum()
}
复制代码 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |