微信答题小程序怎么做-【E企盈微信小程序开发】

摘要: 引言:微信小程序出示了分享给朋友的插口,可是没出示共享到微信朋友圈的插口。因此,仅有正确引导客户储存照片共享到微信朋友圈。 二种计划方案:用手机微信 api 手动式储存,...

--------

微信答题小程序怎么做

------- 摘要:小程序出示了转发给朋友的插口,可是没出示共享到朋友圈的插口。因而,仅有正确引导客户储存照片共享到朋友圈。 两种计划方案:用手机微信 api 手动式储存,用 painter 。

小程序出示了转发给朋友的插口,可是没出示共享到朋友圈的插口。因而,仅有正确引导客户储存照片共享到朋友圈。 两种计划方案:用手机微信 api 手动式储存,用painter 。

手机微信 api

应用原生态插口的话,大致是应用 canvas 绘图出海报,随后免费下载。因此关键是绘图出海报,免费下载的步骤都是一样的。自然在储存照片到相册前,还会需要获得储存照片到相册的管理权限。总结下来就是canvas绘图,获得储存管理权限,储存照片这三个流程。 最先来看绘图海报,需要应用以下插口

wx.createCanvasContext 建立 canvas context

ctx.drawImage 绘图照片到 canvas

ctx.fillText 写文本

wx.getImageInfo 获得互联网照片的 tempFilePath

ctx.draw canvas 绘图

最后储存下来的海报是这样的

绘图的內容很简易,最先就是情况图;随后是共享者的头像;接下来是 @ xx 邀约你 这样一个文字叙述;最终就是底部的小程序码。

最先,建立 canvas 画布

应用小程序 createCanvasContext api ,需要传入 canvasid

const ctx = wx.createCanvasContext(\ canvas\ )

随后将情况照片绘图出来,情况照片是放在当地的照片。

ctx.drawImage(\ ../../../static/assets/img/poster_background.png\ , 0, 0, this.windowWidth,this.windowHeight)

随后写上文本

ctx.setFontSize(12);

ctx.setFillStyle(\ #FFFFFF\ );

ctx.setTextAlign(\ center\ );

ctx.fillText(`${this.privateUserInfo.nickname} 邀您领到`, this.windowWidth / 2,this.transformScale(520))

绘图照片

绘图头像与小程序码,这两张照片都是互联网資源,因此都要应用 wx. getImageInfo 插口将其免费下载下来放到手机微信运行内存中,随后应用其response.path 绘图。小程序其实不适用立即的绘图互联网照片,并且也不适用 base64照片的绘图(尽管仿真模拟器上会合理果)。头像的绘图也有有一个裁剪圆形头像的全过程。

wx.getImageInfo是多线程的,因此在回调函数涵数里绘图,自然这并不是好的方法。能够应用 promise 来处理,因为如今早已无需这个编码了,就沒有去改了。

wx.getImageInfo({
src: miniProgramCodeSrc,
success: (response) = {
const miniProgramCodeSize = this.transformScale(160)
ctx.drawImage(response.path, this.transformScale(85), this.transformScale(710),miniProgramCodeSize, miniProgramCodeSize)

wx.getImageInfo({

src: this.privateUserInfo.avatar,

const avatarSize = this.transformScale(100)

//先绘图圆,裁剪成圆形照片

ctx.save();

ctx.beginPath();

//圆的原点x座标,y座标,半径,起止弧度,停止弧度

ctx.arc(this.transformScale(320), this.transformScale(425), avatarSize / 2, 0, 2 * Math.PI);

ctx.setStrokeStyle(\ #ffffff\ );

ctx.stroke();

ctx.clip();

ctx.drawImage(response.path, this.transformScale(270), this.transformScale(375), avatarSize, avatarSize)

ctx.restore();

ctx.draw(false, () = {

this.saveToTempFilePath()

})

}

})

}

})

到这一步,绘图基本就完毕了。大家所要的海报內容早已能够在 canvas 上展现了,接下来就是将 canvas 的內容储存为照片了。值得提示的是,ctx.draw这个插口也是多线程的,需要在其回调函数中实行免费下载的实际操作。

获得 tempFilePath

wx.canvasToTempFilePath 获得全部 canvas 的tempFilePath

储存照片最关键的就是tempFilePath了,应用canvasToTempFilePath 获得 tempFilePath。需要留意的是canvasToTempFilePath插口二参需要传入 this。

saveToTempFilePath() {
wx.canvasToTempFilePath({
canvasId: \ canvas\ ,
success: (response) = {
//获得相册受权
}
}, this)
}

获得 tempFilePath 取得成功后再获得储存管理权限,自然还可以先获得储存管理权限,再获得tempFilePath。

获得储存管理权限

最先查询是不是有储存管理权限,有管理权限便可以立即储存了。沒有管理权限就先获得管理权限,再储存。

wx.getSetting 查询管理权限目录

wx.authorize 若沒有储存照片管理权限,开展受权

wx.getSetting({
success: (res) = {
if (!res.authSetting[\ scope.writePhotosAlbum\ ]) {
wx.authorize({
scope:\ scope.writePhotosAlbum\ ,
success: () = {
this.saveImageToPhotosAlbumByWX(response.tempFilePath)
}
})
} else {
this.saveImageToPhotosAlbumByWX(response.tempFilePath)
}
}
})

储存照片到相册

wx.saveImageToPhotosAlbum 储存照片到相册

这一步就很简易了,万事俱备,只差储存了。启用 wx.saveImageToPhotosAlbum 便可。
saveImageToPhotosAlbumByWX(tempFilePath) {
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
complete: () = {
// 别的实际操作
}
})
}

到这里,应用原生态 api 储存一张共享朋友圈的海报就行了。

painter

painter 是甚么呢?

小程序转化成照片库,轻松根据 json 方法绘图一张能够发到朋友圈的照片
painter 是酷家乐开源系统的小程序照片转化成库,相近 echarts,应用配备目标3D渲染照片到 canvas。3D渲染进行后回调函数会回到 tempFilePath,随后启用 wx.saveImageToPhotosAlbum 便可储存。储存的流程和第一种计划方案一致,重要是获得到 tempFilePath。

依照其 readme 来实际操作就行了,因为新项目是应用了 mpvue,因此应用了 mpvue接入计划方案 。
应用 painter

为何要应用 v-if 呢,需要在全部数据信息都提前准备好了后再3D渲染 painter,不然会无尽绘图。

data() {

return {
//painter 配备数据信息
palette: {
width: \ 640rpx\ ,
height: \ 1008rpx\ ,
background: \ /static/assets/img/poster_background.png\ ,
views: [
{
type: \ image\ ,
url: \ \ ,
css: {
top: \ 380rpx\ ,
left: \ 320rpx\ ,
align: \ center\ ,
width: \ 100rpx\ ,
height: \ 100rpx\ ,
borderRadius: \ 50rpx\
}
}, {
type: \ text\ ,
text: \ \ ,
css: {
top: \ 490rpx\ ,
left: \ 320rpx\ ,
align: \ center\ ,
fontSize: \ 24rpx\ ,
color: \ #fff\
}
},
{
type: \ image\ ,
url: \ \ ,
css: {
top: \ 690rpx\ ,
left: \ 85rpx\ ,
width: \ 180rpx\ ,
height: \ 180rpx\
}
}
]
}

}
},

computed: {

showPainter() {
const avatar = this.palette.views[0].url
const text = this.palette.views[1].text
const qrCodeUrl = this.palette.views[2].url
return avatar !== \ \ text !== \ \ qrCodeUrl!== \ \
}
}

在 painter绘图取得成功的回调函数里,将 tempFilePath 储存起来。接下来的管理权限获得和储存照片到相册步骤就和上一个计划方案一致了。可是,需要提示的是,tempFilePath 需要放在全局性自变量中,不可以放在data 中。

总结

总结一下,遇到的一些坑

小程序canvas不可以适用 base64

drow 有回调函数

drawImage 不可以立即应用互联网照片

需要解决获得管理权限,客户回绝后的场景

有关资讯: 手机微信小程序   手机微信小程序开发设计实例教程

---------

微信答题小程序怎么做

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


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:凡科小程序