導(dǎo)語(yǔ)：在小程序項(xiàng)目開發(fā)中，分享能力幾乎是每個(gè)項(xiàng)目必備的要求，但原生的分享能力比較有限，不夠靈活，今天就我們就一起來(lái)研究下，如何在現(xiàn)有基礎(chǔ)上，增強(qiáng)小程序分享的能力，使信息傳遞更加直觀、靈活。
示例項(xiàng)目地址: https://github.com/ycvcb123/share-system
微信分享的 API 只提供了分享給微信好友的能力，并沒(méi)有提供分享朋友圈的能力，這是為啥子呢！！！
從網(wǎng)上收集的一些咨詢來(lái)看，主要有如下兩點(diǎn)原因:
其實(shí)一些童鞋應(yīng)該留意到了在朋友圈，官方已經(jīng)推了一些小程序的廣告，只不過(guò)這項(xiàng)能力還沒(méi)有完全放開，以后會(huì)不會(huì)放開先不討論，智慧的開發(fā)小哥哥早已想到了通過(guò)生成帶有小程序碼的海報(bào)作為替代方案（撒花！！！），本文后面的部分也會(huì)說(shuō)到，我們先回到正題。
onShareAppMessage -- 轉(zhuǎn)發(fā)
用法：
Page({ onShareAppMessage: function(){ return { title: 'xxxxx', //自定義轉(zhuǎn)發(fā)標(biāo)題 path: '/page/user?id=123', //分享頁(yè)面路徑 imageUrl: '/common/images/xxx.png' //分享圖片 寬高比 5:4 } }})//如果只寫成如下形式，title默認(rèn)是小程序名，path為當(dāng)前頁(yè)面路徑（不帶參數(shù)），imageUrl為當(dāng)前頁(yè)面截圖Page({ onShareAppMessage: function(){}}) 觸發(fā)方法（一定要在 page 中先寫入上述方法）:
<button> 組件 open-type="share" 即 <button open-type="share"> ,點(diǎn)擊后觸發(fā)。觸發(fā)后效果如下：
觀察上述結(jié)果，不難看出， title 能分享出去的信息非常有限，那我們能不能對(duì)分享的圖片做些文章，讓它帶出更多的信息呢？下面進(jìn)入到我們的第二個(gè)部分基于 canvas 動(dòng)態(tài)繪制分享圖片
因?yàn)槊總€(gè)頁(yè)面的信息很多都是通過(guò)接口返回或者用戶輸入產(chǎn)生，是在不斷變化的，設(shè)計(jì)師所畫的靜態(tài)圖片肯定是不足以去展示這些信息的，那么我們就要想，有沒(méi)有一種辦法，是可以把 靜態(tài)圖片 和 動(dòng)態(tài)信息 繪制在一起后在生成一張 新的圖片 ?答案是肯定的！！！
把圖片和文字畫在一起？我們就一定會(huì)想到神奇的 canvas ，根據(jù)小程序 畫布 相關(guān)的 API 繪制如下：
//創(chuàng)建畫布（組件中一定要綁定this,切記！！！）var ctx = wx.createCanvasContext('myCanvas', this);//畫布上繪制圖片ctx.drawImage(path, 0, 0, width, height);//畫布上繪制文字ctx.setFillStyle('#fff');ctx.setFontSize(32);ctx.fillText(startTime, 24, 54);//其他信息繪制//... ctx.draw(); 上述已經(jīng)通過(guò) canvas 把圖片和文字繪制到了一起，那如何把這個(gè)畫布轉(zhuǎn)成一個(gè)圖片，供開發(fā)者使用呢？
強(qiáng)大的小程序給我們提供了原生的方法: wx.canvasToTempFilePath
//在上面代碼的draw()的回調(diào)中使用wx.canvasToTempFilePathvar that = this;ctx.draw(true, () => { setTimeout(() => { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { that.setData({ //res.tempFilePath 生成圖片的臨時(shí)路徑 picUrl: res.tempFilePath }); } }, that); //在組件中使用這里一定記得要綁定this，切記！！！ }, 300); //此處加入300毫秒延時(shí)是為了解決小程序繪制過(guò)程中的渲染問(wèn)題}); 把圖片路徑傳遞給 <image> 標(biāo)簽,得到下圖結(jié)果。
<image src="{{picUrl}}"/>
同理：把 picUrl 賦值給 onShareAppMessage 中的 imageUrl ,分享出去后的圖片則帶有了動(dòng)態(tài)信息！
在上面的例子中，繪制本地圖片時(shí)直接使用 ctx.drawImage(path, 0, 0, width, height) , path 直接傳入圖片路徑即可。但是如果是 網(wǎng)絡(luò)圖片 或者是 base64 的圖片時(shí)， drawImage 是無(wú)法直接繪制的 ，下面就介紹下針對(duì)上述兩種情況如何做兼容處理。
網(wǎng)絡(luò)來(lái)源圖片
//將網(wǎng)絡(luò)圖片轉(zhuǎn)換為本地路徑handleNetImg: function(imagePath) { var that = this; return new Promise((resolve, reject) => { wx.getImageInfo({ src: imagePath, success: function(res) { resolve(res); } }); });}handleNetImg('網(wǎng)絡(luò)圖片地址').then((res) => { console.log(res.path); //輸出轉(zhuǎn)換后的本地圖片路徑 ctx.drawImage(res.path, 0, 0, width, height); //此時(shí)圖片即可在畫布上繪制出來(lái)})base64 圖片
使用 ctx.drawImage(base64Data, 0, 0, width, height) 在小程序開發(fā)者工具上是可以繪制的， 然而！！！這個(gè)大騙紙！！！真機(jī)上是失效的！！！（心碎一分鐘。。。）
跟上面類似的思路，我們把 base64的圖片 轉(zhuǎn)為本地的 png圖片
var handleBase64Img = function() { //wx.getFileSystemManager 小程序文件管理器 var fsm = wx.getFileSystemManager(); var FILE_NAME = 'base64src'; var base64src = function(base64data) { return new Promise((resolve, reject) => { //解析base64，提取出圖片類型: imgtype,解析內(nèi)容bodyData（去掉data:image/png;base64,以后的內(nèi)容） var [, imgType, bodyData] = /data:image//(/w+);base64,(.*)/.exec(base64data) || []; if (!imgType) { reject(new Error('ERROR_BASE64SRC_PARSE')); } /** *wx.env.USER_DATA_PATH *本地用戶文件 *本地用戶文件是從 1.7.0 版本開始新增的概念。提供了一個(gè)用戶文件目錄給開發(fā)者，開發(fā)者對(duì)這個(gè)目錄有完全自由的讀寫權(quán)限。通過(guò) wx.env.USER_DATA_PATH 可以獲取到這個(gè)目錄的路徑。 */ var filePath = `${wx.env.USER_DATA_PATH}/${FILE_NAME}.${imgType}`; //按指定寫入文件的字符編碼encoding，向地址filepath，寫入數(shù)據(jù)data。 fsm.writeFile({ filePath, data: bodyData, encoding: 'base64', success() { resolve(filePath); }, fail() { reject(new Error('ERROR_BASE64SRC_WRITE')); }, }); }); }; return base64src;}var base64src = that.handleBase64Img();var handleBase64src = base64src(base64data);handleBase64src.then(res => { //res 即為base64 轉(zhuǎn)化為圖片后的本地路徑，即可在畫布上繪制成功 that.ctx.drawImage(res, left, top, width, height);}); 通過(guò)上述的一些內(nèi)容，我們已經(jīng)知道如何利用 canvas 把圖片和文字繪制在一起后生成一張新的圖片，這里就產(chǎn)生了一個(gè)新的問(wèn)題: 我們?nèi)绾伟焉傻膱D片保存下來(lái)呢 ？？？ 我們接著往細(xì)看canvas 生成圖片后如何保存到本地
想要保存到相冊(cè)中第一步首先當(dāng)然是要獲得訪問(wèn)相冊(cè)的權(quán)限！！！
//訪問(wèn)相冊(cè)授權(quán)wx.getSetting({ success: (res) => { //檢查是否有訪問(wèn)相冊(cè)的權(quán)限，如果沒(méi)有則通過(guò)wx.authorize方法授權(quán)(授權(quán)只需要一次就好，后面就可以直接訪問(wèn)相冊(cè)) if (!res.authSetting['scope.writePhotosAlbum']) { console.log('沒(méi)有獲取授權(quán)'); wx.authorize({ scope: 'scope.writePhotosAlbum', success: (res) => { //用戶點(diǎn)擊允許獲取相冊(cè)信息后邏輯進(jìn)入這里,如上圖所示 } }) } }});//獲取了相冊(cè)的訪問(wèn)權(quán)限，使用 wx.saveImageToPhotosAlbum 將圖片保存到相冊(cè)中wx.saveImageToPhotosAlbum({ filePath: that.data.sharePicPath, success: (res) => { //保存成功彈出提示，告知一下用戶 wx.showModal({ title: '已保存到手機(jī)相冊(cè)', content: '將圖片發(fā)送到朋友圈，邀請(qǐng)好友加入', confirmColor: '#0bc183', confirmText: '知道了', showCancel: false }) }})在小程序的分享朋友圈的解決方案中，往往在生成的海報(bào)頁(yè)面中都會(huì)有一個(gè)小程序碼，使得用戶有進(jìn)入小程序的入口，那么這個(gè)小程序碼如何生成呢？
官方文檔:獲取小程序碼
注意：因?yàn)樯尚〕绦虼a的接口參數(shù)需要 access_token，安全起見(jiàn)，一般都通過(guò)后臺(tái)調(diào)用在拿到base64的數(shù)據(jù)在返回給前端。
我們?cè)诨氐秸}:
上述三種生成接口，大家根據(jù)情況按需使用，因?yàn)槲业捻?xiàng)目里，需要經(jīng)常生成不同頁(yè)面對(duì)應(yīng)的小程序碼， B 類接口比較符合我的要求，這里就重點(diǎn)描述下 B 類接口的 使用 和 自測(cè)
B 類接口入?yún)ⅲ鰠⒐俜秸f(shuō)明-- 接口 B：適用于需要的碼數(shù)量極多的業(yè)務(wù)場(chǎng)景
重點(diǎn)看下 scene : 最大32個(gè)可見(jiàn)字符，有頁(yè)面路徑帶參數(shù)的情況下要尤其注意！！！
把 page , scene 等參數(shù)傳遞給后臺(tái)后，后臺(tái)調(diào)用 B 類接口，返回給前端一個(gè)base64的圖片數(shù)據(jù)，我們把這個(gè)數(shù)據(jù)繪制到海報(bào)上就好！！！
繪制方法上面已經(jīng)說(shuō)過(guò)canvas 對(duì)不同來(lái)源圖片的處理（本地圖片， 網(wǎng)絡(luò)圖片 ， base64圖片 ）
現(xiàn)在小程序碼的圖片已經(jīng)生成了，那么我們要如何自測(cè)呢？怎么才能知道小程序碼中所攜帶信息是否正確呢？
官方給出的方法:
上述方法在開發(fā)階段是比較方便，但是在正式的提測(cè)階段，此種方式顯得有些牽強(qiáng)，有人想到真機(jī)調(diào)試？
官方接口只能生成已發(fā)布的小程序的二維碼
也就是說(shuō)，你掃碼就連上生產(chǎn)環(huán)境了！！！沒(méi)有辦法調(diào)試，那到底怎么辦呢？？？
解決辦法就要借助強(qiáng)大的小程序開發(fā)者工具啦！！！
首先把生成的小程序碼保存到電腦里，方法見(jiàn)上述canvas 生成圖片后如何保存到本地部分。
然后通過(guò)開發(fā)者工具選擇二維碼編譯模式，文件夾中選擇帶有小程序碼的圖片即可！！！
注意： 獲取 scene 值時(shí)要 decodeURIComponent
Page({ onLoad(query) { // scene 需要使用 decodeURIComponent 才能獲取到生成二維碼時(shí)傳入的 scene const scene = decodeURIComponent(query.scene) }})抽離配置文件，使繪制更加靈活
我們觀察如下一個(gè)小程序海報(bào):
除了上圖紅框中的的內(nèi)容會(huì)發(fā)生寫變化以外，整體的結(jié)構(gòu)大部分是基本已經(jīng)固定了的，因?yàn)楹?bào)內(nèi)容和業(yè)務(wù)是強(qiáng)相關(guān)的，如果我把繪制的邏輯寫入組件里，那豈不是換個(gè)業(yè)務(wù)，我的組件就要改一次？這樣失去了組件的通用型肯定是不行的，那怎么辦呢？下面介紹一個(gè)業(yè)界比較好的解決方案:
小程序海報(bào)說(shuō)白了就是由 canvas 畫布上繪制的一些形狀，圖片，文字，線等等組成的，那我們是不是可以把這些繪制的基本能力封裝成方法，通過(guò)設(shè)計(jì)稿量出海報(bào)上每個(gè)元素的位置大小等信息，當(dāng)作一個(gè)配置文件傳遞給這些繪制方法，這樣就保證組件的通用型，而且繪制信息抽離成一個(gè)配置文件也更加方便后期維護(hù)。
share-config.js:
function setShareInfo(time, start, end, imageSrc) { return { width: 750, height: 1300, background: '#F2FCF8', views: [{ type: 'rect', parent: true, radius: true, radiusVal: 16, left: 40, width: 670, height: 1140, shadow: true, background: '#cacacd', shadowColor: 'rgba(0,0,0,.6)', line: true }, //.... { type: 'text', content: '長(zhǎng)按或掃描二維碼，查看這條線路', color: '#9B9BA1', top: 1052, left: 224, fontSize: 28, font: 'PingFangSC-Medium', }, { type: 'image', path: '/common/images/station-flag.png', top: 746, left: 80, width: 32, height: 104 } ] }}export { setShareInfo}只需要在幾個(gè)動(dòng)態(tài)信息改變時(shí)，傳入這些變化的值即可。
import { setShareInfo } from '../../common/config/share-config';page({ onLoad: function() { this.setData({ shareMessageInfoTimeline: setShareInfo('3月7號(hào) 下午16:30發(fā)車', '騰訊大廈', '平安國(guó)際中心', '') }); //... },}); 通過(guò) shareMessageInfoTimeline 獲取配置信息
<view class="container"> <mod-share-timeline timelineShow="{{timelineShow}}" picContent="{{shareMessageInfoTimeline}}" bindcloseTimelineShow="closeTimelineShow"/></view>本文對(duì)小程序分享所需的基礎(chǔ)能力進(jìn)行了拆分詳解，把上述能力進(jìn)行不同的組合，應(yīng)該可以滿足大部分的分享需求。
比如:
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
