小程序分享模塊超級詳解(推薦)
導語:在小程序項目開發(fā)中,分享能力幾乎是每個項目必備的要求,但原生的分享能力比較有限,不夠靈活,今天就我們就一起來研究下,如何在現(xiàn)有基礎(chǔ)上,增強小程序分享的能力,使信息傳遞更加直觀、靈活。
示例項目地址: https://github.com/ycvcb123/share-system
小程序分享基礎(chǔ) API 介紹
微信分享的 API 只提供了分享給微信好友的能力,并沒有提供分享朋友圈的能力,這是為啥子呢?。。?/p>
從網(wǎng)上收集的一些咨詢來看,主要有如下兩點原因:
- 由于微商泛濫,公眾號雞湯泛濫,朋友圈質(zhì)量已經(jīng)有所下降,如果小程序再開放分享朋友圈功能,可能會進一步影響到整個微信生態(tài),造成用戶活躍度下降,用戶流失等問題。
- 微信不讓小程序在朋友圈轉(zhuǎn)發(fā),更多是保護朋友圈的”廣告位”陣地,不能夠讓這塊”肥肉”變成了公益設(shè)施。
其實一些童鞋應該留意到了在朋友圈,官方已經(jīng)推了一些小程序的廣告,只不過這項能力還沒有完全放開,以后會不會放開先不討論,智慧的開發(fā)小哥哥早已想到了通過生成帶有小程序碼的海報作為替代方案(撒花!?。。?,本文后面的部分也會說到,我們先回到正題。
onShareAppMessage -- 轉(zhuǎn)發(fā)
用法:
Page({
onShareAppMessage: function(){
return {
title: 'xxxxx', //自定義轉(zhuǎn)發(fā)標題
path: '/page/user?id=123', //分享頁面路徑
imageUrl: '/common/images/xxx.png' //分享圖片 寬高比 5:4
}
}
})
//如果只寫成如下形式,title默認是小程序名,path為當前頁面路徑(不帶參數(shù)),imageUrl為當前頁面截圖
Page({
onShareAppMessage: function(){}
})
觸發(fā)方法(一定要在 page 中先寫入上述方法):
- 點擊小程序的膠囊菜單,會從底部彈出轉(zhuǎn)發(fā)選項。
<button>組件 open-type="share" 即<button open-type="share">,點擊后觸發(fā)。
觸發(fā)后效果如下:

觀察上述結(jié)果,不難看出, title 能分享出去的信息非常有限,那我們能不能對分享的圖片做些文章,讓它帶出更多的信息呢?下面進入到我們的第二個部分基于 canvas 動態(tài)繪制分享圖片
基于 canvas 動態(tài)繪制分享圖片
因為每個頁面的信息很多都是通過接口返回或者用戶輸入產(chǎn)生,是在不斷變化的,設(shè)計師所畫的靜態(tài)圖片肯定是不足以去展示這些信息的,那么我們就要想,有沒有一種辦法,是可以把 靜態(tài)圖片 和 動態(tài)信息 繪制在一起后在生成一張 新的圖片 ?答案是肯定的?。?!
把圖片和文字畫在一起?我們就一定會想到神奇的 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)通過 canvas 把圖片和文字繪制到了一起,那如何把這個畫布轉(zhuǎn)成一個圖片,供開發(fā)者使用呢?
強大的小程序給我們提供了原生的方法: wx.canvasToTempFilePath
//在上面代碼的draw()的回調(diào)中使用wx.canvasToTempFilePath
var that = this;
ctx.draw(true, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: (res) => {
that.setData({
//res.tempFilePath 生成圖片的臨時路徑
picUrl: res.tempFilePath
});
}
}, that); //在組件中使用這里一定記得要綁定this,切記?。?!
}, 300); //此處加入300毫秒延時是為了解決小程序繪制過程中的渲染問題
});
把圖片路徑傳遞給 <image> 標簽,得到下圖結(jié)果。
<image src="{{picUrl}}"/>

同理:把 picUrl 賦值給 onShareAppMessage 中的 imageUrl ,分享出去后的圖片則帶有了動態(tài)信息!
對不同來源圖片的處理(本地圖片, 網(wǎng)絡圖片 , base64圖片 )
在上面的例子中,繪制本地圖片時直接使用 ctx.drawImage(path, 0, 0, width, height) , path 直接傳入圖片路徑即可。但是如果是 網(wǎng)絡圖片 或者是 base64 的圖片時, drawImage 是無法直接繪制的 ,下面就介紹下針對上述兩種情況如何做兼容處理。
網(wǎng)絡來源圖片
//將網(wǎng)絡圖片轉(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)絡圖片地址').then((res) => {
console.log(res.path); //輸出轉(zhuǎn)換后的本地圖片路徑
ctx.drawImage(res.path, 0, 0, width, height); //此時圖片即可在畫布上繪制出來
})
base64 圖片
使用 ctx.drawImage(base64Data, 0, 0, width, height) 在小程序開發(fā)者工具上是可以繪制的, 然而?。?!這個大騙紙?。。≌鏅C上是失效的?。。。ㄐ乃橐环昼?。。。)
跟上面類似的思路,我們把 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 版本開始新增的概念。提供了一個用戶文件目錄給開發(fā)者,開發(fā)者對這個目錄有完全自由的讀寫權(quán)限。通過 wx.env.USER_DATA_PATH 可以獲取到這個目錄的路徑。
*/
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);
});
通過上述的一些內(nèi)容,我們已經(jīng)知道如何利用 canvas 把圖片和文字繪制在一起后生成一張新的圖片,這里就產(chǎn)生了一個新的問題: 我們?nèi)绾伟焉傻膱D片保存下來呢 ??? 我們接著往細看canvas 生成圖片后如何保存到本地
canvas 生成圖片后如何保存到相冊中
想要保存到相冊中第一步首先當然是要獲得訪問相冊的權(quán)限?。?!

//訪問相冊授權(quán)
wx.getSetting({
success: (res) => {
//檢查是否有訪問相冊的權(quán)限,如果沒有則通過wx.authorize方法授權(quán)(授權(quán)只需要一次就好,后面就可以直接訪問相冊)
if (!res.authSetting['scope.writePhotosAlbum']) {
console.log('沒有獲取授權(quán)');
wx.authorize({
scope: 'scope.writePhotosAlbum',
success: (res) => {
//用戶點擊允許獲取相冊信息后邏輯進入這里,如上圖所示
}
})
}
}
});
//獲取了相冊的訪問權(quán)限,使用 wx.saveImageToPhotosAlbum 將圖片保存到相冊中
wx.saveImageToPhotosAlbum({
filePath: that.data.sharePicPath,
success: (res) => {
//保存成功彈出提示,告知一下用戶
wx.showModal({
title: '已保存到手機相冊',
content: '將圖片發(fā)送到朋友圈,邀請好友加入',
confirmColor: '#0bc183',
confirmText: '知道了',
showCancel: false
})
}
})
如何生成小程序碼及驗證小程序碼所帶信息
在小程序的分享朋友圈的解決方案中,往往在生成的海報頁面中都會有一個小程序碼,使得用戶有進入小程序的入口,那么這個小程序碼如何生成呢?
官方文檔:獲取小程序碼

注意:因為生成小程序碼的接口參數(shù)需要 access_token,安全起見,一般都通過后臺調(diào)用在拿到base64的數(shù)據(jù)在返回給前端。
我們在回到正題:
上述三種生成接口,大家根據(jù)情況按需使用,因為我的項目里,需要經(jīng)常生成不同頁面對應的小程序碼, B 類接口比較符合我的要求,這里就重點描述下 B 類接口的 使用 和 自測
B 類接口入?yún)?,出參官方說明-- 接口 B:適用于需要的碼數(shù)量極多的業(yè)務場景
重點看下 scene : 最大32個可見字符,有頁面路徑帶參數(shù)的情況下要尤其注意?。?!

把 page , scene 等參數(shù)傳遞給后臺后,后臺調(diào)用 B 類接口,返回給前端一個base64的圖片數(shù)據(jù),我們把這個數(shù)據(jù)繪制到海報上就好!??!
繪制方法上面已經(jīng)說過canvas 對不同來源圖片的處理(本地圖片, 網(wǎng)絡圖片 , base64圖片 )
現(xiàn)在小程序碼的圖片已經(jīng)生成了,那么我們要如何自測呢?怎么才能知道小程序碼中所攜帶信息是否正確呢?
官方給出的方法:

上述方法在開發(fā)階段是比較方便,但是在正式的提測階段,此種方式顯得有些牽強,有人想到真機調(diào)試?
官方接口只能生成已發(fā)布的小程序的二維碼
也就是說,你掃碼就連上生產(chǎn)環(huán)境了?。。]有辦法調(diào)試,那到底怎么辦呢???
解決辦法就要借助強大的小程序開發(fā)者工具啦?。?!
首先把生成的小程序碼保存到電腦里,方法見上述canvas 生成圖片后如何保存到本地部分。
然后通過開發(fā)者工具選擇二維碼編譯模式,文件夾中選擇帶有小程序碼的圖片即可!!!

注意: 獲取 scene 值時要 decodeURIComponent
Page({
onLoad(query) {
// scene 需要使用 decodeURIComponent 才能獲取到生成二維碼時傳入的 scene
const scene = decodeURIComponent(query.scene)
}
})
抽離配置文件,使繪制更加靈活
我們觀察如下一個小程序海報:

除了上圖紅框中的的內(nèi)容會發(fā)生寫變化以外,整體的結(jié)構(gòu)大部分是基本已經(jīng)固定了的,因為海報內(nèi)容和業(yè)務是強相關(guān)的,如果我把繪制的邏輯寫入組件里,那豈不是換個業(yè)務,我的組件就要改一次?這樣失去了組件的通用型肯定是不行的,那怎么辦呢?下面介紹一個業(yè)界比較好的解決方案:
小程序海報說白了就是由 canvas 畫布上繪制的一些形狀,圖片,文字,線等等組成的,那我們是不是可以把這些繪制的基本能力封裝成方法,通過設(shè)計稿量出海報上每個元素的位置大小等信息,當作一個配置文件傳遞給這些繪制方法,這樣就保證組件的通用型,而且繪制信息抽離成一個配置文件也更加方便后期維護。
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: '長按或掃描二維碼,查看這條線路',
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
}
只需要在幾個動態(tài)信息改變時,傳入這些變化的值即可。
import { setShareInfo } from '../../common/config/share-config';
page({
onLoad: function() {
this.setData({
shareMessageInfoTimeline: setShareInfo('3月7號 下午16:30發(fā)車', '騰訊大廈', '平安國際中心', '')
});
//...
},
});
通過 shareMessageInfoTimeline 獲取配置信息
<view class="container">
<mod-share-timeline timelineShow="{{timelineShow}}" picContent="{{shareMessageInfoTimeline}}" bindcloseTimelineShow="closeTimelineShow"/>
</view>
總結(jié)
本文對小程序分享所需的基礎(chǔ)能力進行了拆分詳解,把上述能力進行不同的組合,應該可以滿足大部分的分享需求。
比如:
- 動態(tài)繪制分享給微信好友的分享圖片。
- 生成并保存小程序海報。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
HTML5之WebSocket入門3 -通信模型socket.io
socket.io能為程序員提供客戶端和服務端一致的編程體驗,socket.io支持任何的瀏覽器,任何的Mobile設(shè)備。下面通過本篇文章給大家講解HTML5之WebSocket入門3 -通信模型socket.io,需要的朋友可以參考下2015-08-08
在IE8上JS實現(xiàn)combobox支持拼音檢索功能
這篇文章主要介紹了在IE8上JS實現(xiàn)combobox支持拼音檢索功能的相關(guān)資料,本文介紹的非常詳細,具有參考借鑒價值,需要的朋友可以參考下2016-05-05
js數(shù)字轉(zhuǎn)換為float,取N位小數(shù)
在javascript中不分單精度float和雙精度double,凡事有小數(shù)的變量都認為是float,因此要取小數(shù)后的n位,要用方法toFixed(n)來得到2014-02-02
js和jQuery以及easyui實現(xiàn)對下拉框的指定賦值方法
下面小編就為大家分享一篇js和jQuery以及easyui實現(xiàn)對下拉框的指定賦值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01

