一芥炭、開發(fā)需求
最近項目中遇到一個需求恃慧，就是實現(xiàn)一個可以分享到朋友圖的海報痢士，朋友圈用戶掃碼進(jìn)入小程序。
二善延、開發(fā)思路
- 這個需求城侧，在微信小程序很常見嫌佑，我這邊主要是參考金數(shù)據(jù)，以及開發(fā)者頭條的小程序分享海報進(jìn)行界面和功能設(shè)計
- 界面元素有：
- 微信頭像
- 海報背景
- 小程序二維碼
- 授權(quán)
- 保存
- 小程序推出來好幾年了揩魂，生成朋友圈海報的功能也不復(fù)雜火脉，應(yīng)該有很多輪子，可以借用一下棋枕。
三妒峦、參考
功能上，主要參考了金數(shù)據(jù)和開發(fā)者頭條的小程序
技術(shù)上：小程序海報生成組件肯骇，參考了以下代碼
- https://github.com/WGinit/mini-poster
- https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813
- https://github.com/kuckboy1994/mp_canvas_drawer.git
- https://github.com/jasondu/wxa-plugin-canvas.git
- https://github.com/yicm/WxPoster.git
四笛丙、技術(shù)難點及關(guān)鍵代碼
-
授權(quán)獲取微信頭像，并下載到本地
獲取用戶的頭像
-
下載骨稿，注意需要增加 https://thirdwx.qlogo.cn到小程序控制臺頁面中uploadFile合法域名的的下載domian list中坦冠，否則手機(jī)端會報錯：
url not in domain list
在微信控制臺配置好以后哥桥，還需要等一段時間拟糕，才能生效。我是等了1個小時侠草。
async getUserInfo() {
? console.log('enter getUserInfo')
? let that = this;
? return new Promise((resolve, reject) => {
? wx.getUserInfo({
? success(res) {
? // console.log("獲取用戶信息成功", res)
? app.globalData.wxUserInfo = res.userInfo;
? that.data.isUserInfoAuth = true
? resolve(res)
? },
? fail(err) {
? wx.getSetting({
? success(res) {
? //已授權(quán)
? if (res.authSetting['scope.userInfo']) {
? wx.showToast({
? title: '獲取用戶權(quán)限失敗梦抢，請重試',
? icon: 'none',
? duration: 4000
? })
? }else{
? wx.showToast({
? title: '獲取用戶權(quán)限失敗奥吩，請授權(quán)',
? icon: 'none',
? duration: 4000
? })
? that.setData({
? modalName: 'bottomModalUserInfo',
? isUserInfoAuth:false
? })
? }
? },fail : error=>{
? wx.showToast({
? title: '獲取用戶權(quán)限失敗霞赫，請重試',
? icon: 'none',
? duration: 4000
? })
? }
? })
? reject(err)
? }
? })
? })
},
-
授權(quán)將海報保存到本地
? eventSave() {
? let that = this;
? if(this.data.shareImage===''){
? wx.showToast({
? title: '請先生成海報',
? icon:'none',
? duration: 4000
? })
? return
? }
? wx.saveImageToPhotosAlbum({
? filePath: this.data.shareImage,
? success(res) {
? console.log(res,that.data.shareImage)
? wx.showToast({
? title: '保存圖片成功',
? icon: 'success',
? duration: 2000
? })
? wx.previewImage({
? urls: [this.data.shareImage,...this.data.tempFileList],
? })
? },
? fail: err => {
? console.log(err)
? wx.showToast({
? title: err.errMsg,
? })
? //顯示授權(quán)圖片頁面
? that.setData({
? modalName:'bottomModalSetting'
? })
? }
? })
},
-
小程序二維碼的生成以及下載
- 二維碼的生成以及下載端衰，參考https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html
- 因為生成二維碼會用到token旅东，token是放到服務(wù)器端統(tǒng)一保存的，所以建議后端生成二維碼后腾节，供前端下載使用荤牍，不過我在寫前端的時候康吵，還是基于前端生成二維碼，做了個demo
async getQrCode() {
? wx.showLoading({
? title: '獲取二維碼',
? })
? let that = this;
? if (this.data.accessToken === '') {
? await this.getAccessToken()
? }
? console.log('accessToken',this.data.accessToken )
? return new Promise((resolve, reject) => {
? wx.request({
? url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + this.data.accessToken,
? method: 'POST',
? data: {
? scene: 1012,
? "width": 430,
? // 是否為Png同辣，默認(rèn)jpeg
? is_hyaline: true,
? // 是否自動取色
? auto_color: true,
? // page: 'pages/credit/survey/survey',
? page: 'pages/index/index'
? },
? responseType: 'arraybuffer',
? success:function(res){
?
? const fs = wx.getFileSystemManager(); //獲取全局唯一的文件管理器
? console.log(wx.env.USER_DATA_PATH+"/1.jpeg")
? fs.writeFile({ // 寫文件
? filePath: that.data.qrCodeTmpPath, // wx.env.USER_DATA_PATH 指定臨時文件存入的路徑邑闺，后面字符串自定義
? data: res.data,
? encoding: "binary", //二進(jìn)制流文件必須是 binary
? success (res){
? that.data.qrCodeLocalPath = that.data.qrCodeTmpPath;
? resolve(res)
? },
? fail(err){
? console.log(err)
? reject(err)
? }
? });
? },
? fail:function(err){
? console.log(err)
? reject(err)
? }
? })
? })
?
}
-
海報背景圖的的存儲
可以放本地，也可以放在服務(wù)器上面伴挚，不過基于小程序的項目大小限制灾炭，所以建議放到服務(wù)器上蜈出。可以使用騰訊的云開發(fā)模式偷厦，把圖片放到云存儲上只泼。
-
生成海報
大部分github的demo都是基于canvas來生成的卵洗。因為元素不太復(fù)雜，可以直接硬編碼十绑，不過也有一些是進(jìn)行了json配置化。我覺得主要難點是扳躬，坐標(biāo)不太好確定勋功。
-
權(quán)限控制
- 需要申請讀取用戶信息狂鞋，以及相冊信息
<button class="bg-green" open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo">微信授權(quán)用戶信息</button>
<button type='primary' class='openSetting' open-type="openSetting"
bindopensetting='handleSetting'>微信授權(quán)寫入本地相冊</button>
五骚揍、代碼
參考：
https://github.com/ghl116/wxposterdemo.git
poster2的相關(guān)頁面
