前言

開發uniapp程式的專案，用它生成多端應用，由於相容各種多端應用，程式程式碼需要相應的適配，在專案裡分享功能是很常見的一個功能，但是在不同的端有不同的方法，我們如何實現多端分享呢？（app，小程式，公眾號）

app

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

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

具體Object引數說明參考文件

只能在app端裡呼叫這個api

給分享按鈕繫結一個方法，使用條件編譯的方式來判斷當前是不是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:'http://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

```

小程式

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

onShareAppMessage()，需要給按鈕設定open-type="share",小程式中使用者點選分享後，在 js 中定義 onShareAppMessage 處理函式（和 onLoad 等生命週期函式同級），設定該頁面的分享資訊，此事件需要 return 一個Object，用於自定義分享內容

```

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

公眾號

公眾號中的分享需要使用微信的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:'http://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安全域名一致

uniapp多端分享（app，小程式，公眾號）

前言

app

小程式

公眾號