小程序分享模塊超級詳解

時間  2019-12-01
標籤 程序 分享 模塊 超級 詳解 简体版
原文   原文鏈接

導語：在小程序項目開發中，分享能力幾乎是每一個項目必備的要求，但原生的分享能力比較有限，不夠靈活，今天就咱們就一塊兒來研究下，如何在現有基礎上，加強小程序分享的能力，使信息傳遞更加直觀、靈活。javascript

示例項目地址: github.com/ycvcb123/sh…html

本文目錄:

小程序分享基礎 API 介紹

微信分享的 API 只提供了分享給微信好友的能力，並無提供分享朋友圈的能力，這是爲啥子呢！！！前端

從網上收集的一些諮詢來看，主要有以下兩點緣由:

  1. 因爲微商氾濫，公衆號雞湯氾濫，朋友圈質量已經有所降低，若是小程序再開放分享朋友圈功能，可能會進一步影響到整個微信生態，形成用戶活躍度降低，用戶流失等問題。
  2. 微信不讓小程序在朋友圈轉發，更可能是保護朋友圈的」廣告位」陣地，不可以讓這塊」肥肉」變成了公益設施。

其實一些童鞋應該留意到了在朋友圈，官方已經推了一些小程序的廣告，只不過這項能力尚未徹底放開，之後會不會放開先不討論，智慧的開發小哥哥早已想到了經過生成帶有小程序碼的海報做爲替代方案（撒花！！！），本文後面的部分也會說到，咱們先回到正題。java

onShareAppMessage -- 轉發

用法：git

Page({
    onShareAppMessage: function(){
         return {
            title: 'xxxxx', //自定義轉發標題
            path: '/page/user?id=123', //分享頁面路徑
            imageUrl: '/common/images/xxx.png' //分享圖片 寬高比 5:4
        }
    }
})
//若是隻寫成以下形式，title默認是小程序名，path爲當前頁面路徑（不帶參數），imageUrl爲當前頁面截圖
Page({
    onShareAppMessage: function(){}
})
複製代碼

觸發方法（必定要在page中先寫入上述方法）:github

  1. 點擊小程序的膠囊菜單，會從底部彈出轉發選項。
  2. <button> 組件 open-type="share" 即 <button open-type="share">,點擊後觸發。

觸發後效果以下：canvas

觀察上述結果，不難看出，title能分享出去的信息很是有限，那咱們能不能對分享的圖片作些文章，讓它帶出更多的信息呢？下面進入到咱們的第二個部分 基於 canvas 動態繪製分享圖片 小程序

基於 canvas 動態繪製分享圖片

由於每一個頁面的信息不少都是經過接口返回或者用戶輸入產生，是在不斷變化的，設計師所畫的靜態圖片確定是不足以去展現這些信息的，那麼咱們就要想，有沒有一種辦法，是能夠把靜態圖片和動態信息繪製在一塊兒後在生成一張新的圖片?答案是確定的！！！api

把圖片和文字畫在一塊兒？咱們就必定會想到神奇的 canvas，根據小程序畫布相關的 API 繪製以下：安全

//建立畫布（組件中必定要綁定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();
複製代碼

上述已經經過 canvas 把圖片和文字繪製到了一塊兒，那如何把這個畫布轉成一個圖片，供開發者使用呢？

強大的小程序給咱們提供了原生的方法: http://www.javashuo.com/tag/wx.canvastotempfilepath

//在上面代碼的draw()的回調中使用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>標籤,獲得下圖結果。

<image src="{{picUrl}}"/>
複製代碼

同理：把 picUrl 賦值給 onShareAppMessage 中的 imageUrl,分享出去後的圖片則帶有了動態信息！

對不一樣來源圖片的處理（本地圖片， 網絡圖片 ， base64圖片 ）

在上面的例子中，繪製本地圖片時直接使用ctx.drawImage(path, 0, 0, width, height),path直接傳入圖片路徑便可。可是若是是網絡圖片或者是base64的圖片時，drawImage是沒法直接繪製的，下面就介紹下針對上述兩種狀況如何作兼容處理。

  1. 網絡來源圖片
//將網絡圖片轉換爲本地路徑
handleNetImg: function(imagePath) {
    var that = this;
    return new Promise((resolve, reject) => {
        wx.getImageInfo({
            src: imagePath,
            success: function(res) {
                resolve(res);
            }
        });
    });
}

handleNetImg('網絡圖片地址').then((res) => {
    console.log(res.path); //輸出轉換後的本地圖片路徑
    ctx.drawImage(res.path, 0, 0, width, height); //此時圖片便可在畫布上繪製出來
})
複製代碼
  1. base64 圖片

使用 ctx.drawImage(base64Data, 0, 0, width, height) 在小程序開發者工具上是能夠繪製的，然而！！！這個大騙紙！！！真機上是失效的！！！（心碎一分鐘。。。）

跟上面相似的思路，咱們把 base64的圖片 轉爲本地的 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,解析內容bodyData（去掉data:image/png;base64,之後的內容）
            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 版本開始新增的概念。提供了一個用戶文件目錄給開發者，開發者對這個目錄有徹底自由的讀寫權限。經過 wx.env.USER_DATA_PATH 能夠獲取到這個目錄的路徑。 */
            var filePath = `${wx.env.USER_DATA_PATH}/${FILE_NAME}.${imgType}`;
            //按指定寫入文件的字符編碼encoding，向地址filepath，寫入數據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 轉化爲圖片後的本地路徑，便可在畫布上繪製成功
    that.ctx.drawImage(res, left, top, width, height);
});
複製代碼

經過上述的一些內容，咱們已經知道如何利用 canvas 把圖片和文字繪製在一塊兒後生成一張新的圖片，這裏就產生了一個新的問題: 咱們如何把生成的圖片保存下來呢 ？？？ 咱們接着往細看 canvas 生成圖片後如何保存到本地

canvas 生成圖片後如何保存到相冊中

想要保存到相冊中第一步首先固然是要得到訪問相冊的權限！！！

//訪問相冊受權
wx.getSetting({
    success: (res) => {
        //檢查是否有訪問相冊的權限，若是沒有則經過wx.authorize方法受權(受權只須要一次就好，後面就能夠直接訪問相冊)
        if (!res.authSetting['scope.writePhotosAlbum']) {
            console.log('沒有獲取受權');
            wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success: (res) => {
                    //用戶點擊容許獲取相冊信息後邏輯進入這裏,如上圖所示
                }
            })
        } 
    }
});

//獲取了相冊的訪問權限，使用 wx.saveImageToPhotosAlbum 將圖片保存到相冊中
wx.saveImageToPhotosAlbum({
    filePath: that.data.sharePicPath,
    success: (res) => {
        //保存成功彈出提示，告知一下用戶
        wx.showModal({
            title: '已保存到手機相冊',
            content: '將圖片發送到朋友圈，邀請好友加入',
            confirmColor: '#0bc183',
            confirmText: '知道了',
            showCancel: false
        })
    }
})
複製代碼

如何生成小程序碼及驗證小程序碼所帶信息

在小程序的分享朋友圈的解決方案中，每每在生成的海報頁面中都會有一個小程序碼，使得用戶有進入小程序的入口，那麼這個小程序碼如何生成呢？

官方文檔: 獲取小程序碼

注意：由於生成小程序碼的接口參數須要 access_token，安全起見，通常都經過後臺調用在拿到base64的數據在返回給前端。

咱們在回到正題:

上述三種生成接口，你們根據狀況按需使用，由於個人項目裏，須要常常生成不一樣頁面對應的小程序碼，B類接口比較符合個人要求，這裏就重點描述下B類接口的使用和自測

B類接口入參，出參官方說明-- 接口 B：適用於須要的碼數量極多的業務場景

重點看下 scene : 最大32個可見字符，有頁面路徑帶參數的狀況下要尤爲注意！！！

把 page,scene 等參數傳遞給後臺後，後臺調用B類接口，返回給前端一個base64的圖片數據，咱們把這個數據繪製到海報上就好！！！

繪製方法上面已經說過 canvas 對不一樣來源圖片的處理（本地圖片， 網絡圖片 ， base64圖片 ）

如今小程序碼的圖片已經生成了，那麼咱們要如何自測呢？怎麼才能知道小程序碼中所攜帶信息是否正確呢？

官方給出的方法:

上述方法在開發階段是比較方便，可是在正式的提測階段，此種方式顯得有些牽強，有人想到真機調試？

官方接口只能生成已發佈的小程序的二維碼

也就是說，你掃碼就連上生產環境了！！！沒有辦法調試，那到底怎麼辦呢？？？

解決辦法就要藉助強大的小程序開發者工具啦！！！

首先把生成的小程序碼保存到電腦裏，方法見上述 canvas 生成圖片後如何保存到本地 部分。

而後經過開發者工具選擇二維碼編譯模式，文件夾中選擇帶有小程序碼的圖片便可！！！

注意： 獲取scene值時要 decodeURIComponent

Page({
  onLoad(query) {
    // scene 須要使用 decodeURIComponent 才能獲取到生成二維碼時傳入的 scene
    const scene = decodeURIComponent(query.scene)
  }
})
複製代碼

抽離配置文件，使繪製更加靈活

咱們觀察以下一個小程序海報:

除了上圖紅框中的的內容會發生寫變化之外，總體的結構大部分是基本已經固定了的，由於海報內容和業務是強相關的，若是我把繪製的邏輯寫入組件裏，那豈不是換個業務，個人組件就要改一次？這樣失去了組件的通用型確定是不行的，那怎麼辦呢？下面介紹一個業界比較好的解決方案:

小程序海報說白了就是由canvas畫布上繪製的一些形狀，圖片，文字，線等等組成的，那咱們是否是能夠把這些繪製的基本能力封裝成方法，經過設計稿量出海報上每一個元素的位置大小等信息，看成一個配置文件傳遞給這些繪製方法，這樣就保證組件的通用型，並且繪製信息抽離成一個配置文件也更加方便後期維護。

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
}
複製代碼

只須要在幾個動態信息改變時，傳入這些變化的值便可。

import { setShareInfo } from '../../common/config/share-config';
page({
    onLoad: function() {
        this.setData({
            shareMessageInfoTimeline: setShareInfo('3月7號 下午16:30發車', '騰訊大廈', '平安國際中心', '')
        });
        //...
    },
});

複製代碼

經過 shareMessageInfoTimeline 獲取配置信息

<view class="container">
    <mod-share-timeline timelineShow="{{timelineShow}}" picContent="{{shareMessageInfoTimeline}}" bindcloseTimelineShow="closeTimelineShow"/>
</view>
複製代碼

總結

本文對小程序分享所需的基礎能力進行了拆分詳解，把上述能力進行不一樣的組合，應該能夠知足大部分的分享需求。

好比:

  1. 動態繪製分享給微信好友的分享圖片。
  2. 生成並保存小程序海報。

經過本文能夠掌握以下知識點:

我在github上基於上述基礎能力寫了一個示例demo方便參考和實戰:

github.com/ycvcb123/sh…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程