uniapp多端分享(app,小程序,公眾號)

語言: CN / TW / HK

highlight: a11y-dark theme: channing-cyan


我正在參加「掘金·啟航計劃」

前言

開發uniapp程序的項目,用它生成多端應用,由於兼容各種多端應用,程序代碼需要相應的適配,在項目裏分享功能是很常見的一個功能,但是在不同的端有不同的方法,我們如何實現多端分享呢?(app,小程序,公眾號)

app

app端實現分享功能用到了uniapp內置的api

uni.share() 可以分享到微信、QQ、微博,每個社交平台被稱為分享服務提供商,即provider,可以分享文字、圖片、圖文橫條、音樂、視頻等多種形式。同時注意,分享為小程序也使用本API。即在App裏可以通過本API把一個內容以小程序(通常為內容頁)方式直接分享給微信好友

具體Object參數説明參考文檔

只能在app端裏調用這個api

image.png

給分享按鈕綁定一個方法,使用條件編譯的方式來判斷當前是不是app端

```

share(){ // #ifdef APP uni.share({ provider:'weixin',//分享服務提供商(即weixin|qq|sinaweibo) type:0,//圖文 scene:'WXSceneSession',//provider 為 weixin 時必選 WXSceneSession分享到聊天界面,WXSceneTimeline分享到朋友圈,WXSceneFavorite分享到微信收藏 title:'邀請好友領取海量現金券!',//分享內容的標題 summary:'我正在使用xxxApp,趕緊跟我一起來體驗!',//分享內容的摘要 href:'http://uniapp.dcloud.io/',//跳轉鏈接,type 為 0 時必選 imageUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',//圖片地址,type 為 0、2、5 時必選 success(res) { //成功返回的參數 console.log(res); }, fail(err) { //失敗返回的參數 console.log(err); } }) // #endif

```

03aa754f280415b3d2c24609e02eac7.jpg

小程序

小程序端分享也可以通過uni.share()實現,也可以通過右上角膠囊分享,但還有其他的分享方式

onShareAppMessage(),需要給按鈕設置open-type="share",小程序中用户點擊分享後,在 js 中定義 onShareAppMessage 處理函數(和 onLoad 等生命週期函數同級),設置該頁面的分享信息,此事件需要 return 一個Object,用於自定義分享內容

```

onShareAppMessage(){ return{ title:'邀請好友領取海量現金券!', path:'/pages/my/invite/invite',//頁面 path ,必須是以 / 開頭的完整路徑 imageUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png', desc:'我正在使用xxxApp,趕緊跟我一起來體驗!', } }, ```

image.png

公眾號

公眾號中的分享需要使用微信的JS-SDK,具體文檔參考JS-SDK説明文檔,需要配置好公眾號js域名,可以直接下載js文件引入,也可以通過npm下載npm install weixin-js-sdk --save,公眾號的分享比較繁瑣,我們可以新建一個js文件封裝起來

``` import wx from "weixin-js-sdk"

/ * 微信分享 * 獲取微信加簽信息 * @param{data}:獲取的微信加簽 * @param{shareData}:分享配置參數 / export const wexinShare = (data, shareData) => {

let appId = data.appId;
let timestamp = data.timestamp;
let nonceStr = data.nonceStr;
let signature = data.signature;
wx.config({//通過config接口注入權限驗證配置
    debug: false, // 開啟調試模式,調用的所有api的返回值會在客户端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。(測試記得關掉)
    appId: appId, // 必填,公眾號的唯一標識
    timestamp: timestamp, // 必填,生成簽名的時間戳
    nonceStr: nonceStr, // 必填,生成簽名的隨機串
    signature: signature, // 必填,簽名,見附錄1
    jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData'
        ] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
});
wx.checkJsApi({
    jsApiList: ['chooseImage', 'updateAppMessageShareData'], // 需要檢測的JS接口列表,所有JS接口列表見附錄2,
    success: function(res) {
        // 以鍵值對的形式返回,可用的api值true,不可用為false
        // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        console.log(res, 'checkJsApi')
    }
});
wx.ready(function() {//通過ready接口處理成功驗證
    // //分享到朋友圈”及“分享到QQ空間”
    wx.updateTimelineShareData({
        title: shareData.title, // 分享標題
        link: shareData.link, // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
        imgUrl: shareData.imgUrl, // 分享圖標
        success: function(res) {
            console.log("分享朋友圈成功返回的信息:", res);
        }
    })

    //“分享給朋友”及“分享到QQ”
    wx.updateAppMessageShareData({
        title: shareData.title, // 分享標題
        desc: shareData.desc, // 分享描述
        link: shareData.link, // 分享鏈接 該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
        imgUrl: shareData.imgUrl, // 分享圖標
        success: function(res) {
            console.log("分享朋友成功返回的信息:", res);;
        }
    })

});
wx.error(function(res) {
    // config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對於SPA可以在這裏更新簽名。
    console.log('驗證失敗返回的信息:', res);
});

} ``` 在分享按鈕的頁面引入剛剛封裝暴露出來的方法

import { wexinShare } from '@/common/js/utils.js'

調用後端接口獲取簽名等數據,把獲取到的數據和要分享的數據傳入方法

share(){ // #ifdef H5 let currentUrl = location.href //獲取當前頁面鏈接 this.$post('xxxxxx',{ currentUrl }).then((res)=>{ console.log(res); if(res.code==200){ //獲取的微信加簽 let obj={ appId: res.appId, nonceStr: res.nonceStr, signature: res.signature, timestamp: res.timestamp, jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] } //分享的內容 let shareData={ title:'邀請好友領取海量現金券!', desc:'我正在使用xxxApp,趕緊跟我一起來體驗!', link:res.url, imgUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png' } //調用封裝好的方法,傳入微信加簽和內容 wexinShare(obj,shareData) }else{ uni.showToast({ title: '獲取sdk參數失敗!', icon:'none' }); } }) // #endif } 注意:如果分享失敗,查看wx.error()返回的res參數顯示the permission value is offline verifying且錯誤碼為40048,原因是微信公眾號js域名沒有設置或者分享鏈接的域名或路徑沒有與當前頁面對應的公眾號JS安全域名一致