Vux+Cordova打包的安卓App實現微信分享朋友和朋友圈

阿新 • • 發佈：2018-11-21

知識儲備

Cordova Plugin ShareSDK 外掛

什麼是Cordova Plugin ShareSDK

Cordova Plugin ShareSDK封裝了ShareSDK的android和ios平臺的分享功能。在hybird app開發中可以方便的完成分享功能。如:ionic2等。目前支援：微信，朋友圈，微博，QQ好友，QQ空間，新浪微博的分享。

為什麼使用Cordova Plugin Share SDK

ShareSDK幾乎完成了所有社交平臺的分享功能的封裝，但是都是基於原生app、web等。小型創業公司基於成本等其他因素，逐步開始使用hybird混合應用開發，基於html完成app開發，然後用cordova打包構建出各平臺app。為了能在hybird app中快速整合分享功能，您需要使用此外掛，簡單的幾行程式碼就可完成分享功能。

如何使用Cordova Plugin ShareSDK

1.進入cordova專案目錄。

cd ~/yourpath/cordovaproject

或者進入專案目錄，按住shift，點選滑鼠右鍵選擇在此處開啟命令列。

2.安裝cordova-plugin-sharesdk

cordova plugin add cordova-plugin-sharesdk --variable SHARESDK_ANDROID_APP_KEY=xxxx --variable SHARESDK_IOS_APP_KEY=xxxx --variable WECHAT_APP_ID=xxxx --variable WECHAT_APP_SECRET=xxxx --variable WEIBO_APP_ID=xxxx --variable WEIBO_APP_SECRET=xxxx --variable WEIBO_REDIRECT_URL=http://xxxx --variable QQ_IOS_APP_ID=xxxx --variable QQ_IOS_APP_HEX_ID=xxxx --variable QQ_IOS_APP_KEY=xxxx --variable QQ_ANDROID_APP_ID=xxxx --variable QQ_ANDROID_APP_KEY=xxxx

關於安裝外掛引數說明

引數	說明
SHARESDK_IOS_APP_KEY	ShareSDK註冊(iOS)
SHARESDK_ANDROID_APP_KEY	ShareSDK註冊(Android)
WECHAT_APP_ID	微信開放平臺註冊
WECHAT_APP_SECRET	微信開放平臺註冊
WEIBO_APP_ID	新浪微博開放平臺註冊
WEIBO_APP_SECRET	新浪微博開放平臺註冊
WEIBO_REDIRECT_URL	微博回撥地址：我的應用/應用資訊/高階資訊/OAUTH2.0授權設定裡配置
QQ_IOS_APP_ID	騰訊開放平臺註冊
QQ_IOS_APP_HEX_ID	由QQ_IOS_APP_ID生成。其格式為：”QQ” ＋ AppId的16進位制（如果appId轉換的16進位制數不夠8位則在前面補0，如轉換的是：5FB8B52，則最終填入為：QQ05FB8B52注意：轉換後的字母要大寫）轉換16進位制的方法：echo‘ibase=10;obase=16;801312852′\|bc，其中801312852為QQ的AppID。傳入引數不需要加QQ，只需要傳入8位數字
QQ_IOS_APP_KEY	騰訊開放平臺註冊
QQ_ANDROID_APP_ID	騰訊開放平臺註冊
QQ_ANDROID_APP_KEY	騰訊開放平臺註冊

注意：

①後面每個--variable 引數與前面都要有一個空格。

②後面這些引數賦值參照上表，如果使用到了哪個平臺，則給這個平臺賦予正確的引數，如果使用不到可以先臨時賦一個值，後期再使用時可以覆蓋，但是不能省略或刪掉某個引數。

③執行安裝外掛命令時，因為命令過長，如果直接在Webstorm中的Terminal中複製安裝的話可能會不成功，直接在專案目錄下開啟命令列，將每一個--variable 命令一個一個複製，確保留出空格，然後最後一個回車即可，一定要確保安裝成功，否則後面會調不起來微信。

④安裝完cordova-plugin-cordova外掛後，window下會有兩個全域性變數sharesdk和ShareSDK，如果你在使用時提示未定義，應該是外掛安裝有問題。

關於cordova-plugin-cordova中全域性變數說明

安裝完cordova-plugin-sharesdk後，window下有2個全域性變數，sharesdk和ShareSDK。

sharesdk：只提供一個share方法，shareInfo是一個object型別。包含要分享的資料。可用key參考下文。

sharesdk.share(platformType, shareType, shareInfo,
                   function(){/**分享成功回撥**/},
                   function(msg){/**分享失敗或者取消分享回撥**/});

分享失敗或取消分享返回msg，msg是json物件。通過msg.state判斷是取消分享還是分享失敗。

如果是分享失敗。msg.error獲取失敗資訊。

ShareSDK：提供ClientType，PlatformType，ShareType，ResponseState常量

客戶端型別(用於判斷是否安裝了相應的客戶端) 說明
ShareSDK.ClientType.SinaWeibo 新浪微部落格戶端
ShareSDK.ClientType.Wechat 微信客戶端
ShareSDK.ClientType.QQ QQ客戶端
平臺型別（分享到指定平臺）說明
ShareSDK.PlatformType.QQFriend QQ好友
ShareSDK.PlatformType.QZone（暫不支援） QQ空間
ShareSDK.PlatformType.Copy 拷貝
ShareSDK.PlatformType.WechatSession 微信好友
ShareSDK.PlatformType.WechatTimeline 微信朋友圈
ShareSDK.PlatformType.SinaWeibo 新浪微博
分享內容型別說明
ShareSDK.ShareType.Text 文字型別
ShareSDK.ShareType.Image 圖片型別
ShareSDK.ShareType.WebPage 網頁型別
分享響應狀態說明
ShareSDK.ResponseState.Begin 開始分享
ShareSDK.ResponseState.Success 分享成功
ShareSDK.ResponseState.Fail 分享失敗
ShareSDK.ResponseState.Cancel 取消分享

參考Demo地址：

https://github.com/behring/cordova-sharesdk-demo

注意：

1.Android微信分享需要使用稽核通過後的簽名檔案打包才能分享。
2.目前僅支援android和ios平臺的微信好友、微信朋友前、微博、QQ好友分享以及拷貝連結功能。分享型別包括：純文字，單張圖片，網頁。

2.構建cordova專案

anroid中的微信分享需要稽核通過，並且打包release版本。

cordova build android --release

3.通過js程式碼完成分享

/** 分享純文字 */
function shareText(platformType) {
    var text='這是一條測試文字~~~~';
    var shareInfo = {text:text};
    sharesdk.share(platformType, ShareSDK.ShareType.Text, shareInfo,
                   function(success){},
                   function(fail){});
}
 
/** 分享圖片，多張使用陣列 */
function shareImages(platformType) {
    var images = ['https://github.com/zhaolin0801/cordova-sharesdk-demo/blob/master/www/img/Wechat-QRcode.jpeg?raw=true','https://github.com/zhaolin0801/cordova-sharesdk-demo/blob/master/www/img/Wechat-QRcode.jpeg?raw=true'];
    var shareInfo = {images:images};
    sharesdk.share(platformType, ShareSDK.ShareType.Image, shareInfo,
                   function(success){},
                   function(fail){});
}
 
/** 分享網頁 */
function shareWebPage(platformType) {
    var icon = 'https://github.com/zhaolin0801/cordova-sharesdk-demo/blob/master/www/img/Wechat-QRcode.jpeg?raw=true';
    var title = '這是網頁的標題';
    var text = '這是網頁的內容，android未簽名只能分享單張圖片到朋友圈';
    var url = 'http://carhot.cn/articles/1';
    var shareInfo = {icon:icon, title:title, text:text, url:url};
    sharesdk.share(platformType, ShareSDK.ShareType.WebPage, shareInfo,
                   function(success){},
                   function(fail){});
}
 
function shareTextToWechatSession() {
    shareText(ShareSDK.PlatformType.WechatSession);
}
 
function shareImagesToWechatSession() {
    shareImages(ShareSDK.PlatformType.WechatSession);
}
 
function shareWebPageToWechatSession() {
    shareWebPage(ShareSDK.PlatformType.WechatSession);
}
 
 
function shareTextToWechatTimeline() {
    shareText(ShareSDK.PlatformType.WechatTimeline);
}
 
function shareImagesToWechatTimeline() {
    shareImages(ShareSDK.PlatformType.WechatTimeline);
}
 
function shareWebPageToWechatTimeline() {
    shareWebPage(ShareSDK.PlatformType.WechatTimeline);
}

4.如果需要在實現分享前判斷是否安裝客戶端

/** 是否安裝微部落格戶端 **/
function checkWeiboClient() {
    sharesdk.isInstallClient.promise(ShareSDK.ClientType.SinaWeibo).then(function(isInstall){
        if(isInstall) {
            alert("新浪微部落格戶端已安裝");
        }else {
            alert("未安裝新浪微部落格戶端");
        }
    });
}
 
/** 是否安裝QQ客戶端 **/
function checkQQClient() {
    sharesdk.isInstallClient.promise(ShareSDK.ClientType.QQ).then(function(isInstall){
        if(isInstall) {
            alert("QQ客戶端已安裝");
        }else {
            alert("未安裝QQ客戶端");
        }
    });
}
 
/** 是否安裝微信客戶端 **/
function checkWechatClient() {
    sharesdk.isInstallClient.promise(ShareSDK.ClientType.Wechat).then(function(isInstall){
        if(isInstall) {
            alert("微信客戶端已安裝");
        }else {
            alert("未安裝微信客戶端");
        }
    });
}

實戰演練

Vux頁面

實現點選分享按鈕拉起選擇框actionsheet

實現效果：

文件參照：

https://doc.vux.li/zh-CN/components/actionsheet.html

具體業務實現程式碼：

右上角點選分享按鈕：

<x-header :left-options="{showBack: true,backText:'返回',preventGoBack:true}" @on-click-back="goBack" class="w_100" >{{headerName}}
      <a slot="right" class="c_gray_555 text_al_m" @click="shareClick()">  <i class="icon-custom-im_fenxiang_a c_gray_555 text_16em text_al_tb"></i>分享</a>
    </x-header>

點選分享執行shareClick()方法

 shareClick(){
          this.show4=true;
        },

首先得宣告一個show4:false預設為false，此值控制actionsheet的吊起，為true則吊起。

在頁面上新增actionsheet:

<actionsheet v-model="show4" :menus="menus1"  @on-click-menu="shareMenuClick" :close-on-clicking-mask= "true"[email protected]="show4=false"></actionsheet>

再去宣告要顯示的值：

 data() {
        return {
          menus1: {
            menu1: '分享給朋友',
            menu2:'分享到朋友圈'
          },

上面的actionsheet就會繫結具體的方法shareMenuClick，執行相應的操作：

shareMenuClick(menuKey, menuItem){
    
                  if(menuKey=='menu1'){
                   //這裡編輯點選munu1，也就是分享到朋友的操作
                  }
                  if(menuKey=='menu2'){
                  //這裡編輯點選munu2，也就是分享到朋友圈的操作
                  }
             
        },

Cordova專案安裝外掛

安裝外掛的程式碼:

cordova plugin add cordova-plugin-sharesdk --variable SHARESDK_ANDROID_APP_KEY=xxxx --variable SHARESDK_IOS_APP_KEY=xxxx --variable WECHAT_APP_ID=xxxx --variable WECHAT_APP_SECRET=xxxx --variable WEIBO_APP_ID=xxxx --variable WEIBO_APP_SECRET=xxxx --variable WEIBO_REDIRECT_URL=http://xxxx --variable QQ_IOS_APP_ID=xxxx --variable QQ_IOS_APP_HEX_ID=xxxx --variable QQ_IOS_APP_KEY=xxxx --variable QQ_ANDROID_APP_ID=xxxx --variable QQ_ANDROID_APP_KEY=xxxx

這裡以分享給朋友以及朋友圈為例

所以需要更改引數:

--variable SHARESDK_ANDROID_APP_KEY=xxxx

這個引數是指呼叫這個外掛你得需要去Mob開發者後臺去註冊賬號並新建一個應用，此時它會分配給你一個AppKey，將得到的AppKey替換掉上面的xxxx，那麼就可以在安卓應用中呼叫外掛了。

同理：

--variable SHARESDK_IOS_APP_KEY=xxxx

這個的xxxx也替換掉上面獲取的AppKey，這樣在IOS應用上也可以呼叫外掛了。

mob移動開發者服務平臺：

http://dashboard.mob.com

註冊並按要求建立應用：

配置完這兩個引數，因為我們要實現微信分享給朋友以及分享到朋友圈，所以我們需要登入

微信開放平臺去申請介面呼叫許可權

https://open.weixin.qq.com

註冊登入後依次建立應用，安卓以及IOS要分別建立。

安卓需要用到應用包名，要保持一致，IOS要用到BundleId，要保持一致。

以安卓為例，需要填寫應用包名還要用到apk打包release版本時用到的應用簽名。

獲取應用簽名的apk下載：

https://download.csdn.net/download/badao_liumang_qizhi/10788719

當你建立完應用時會給你分配一個

AppID和AppSecret

而這兩個引數就是上面安裝外掛所需要的

--variable WECHAT_APP_ID=xxxx --variable WECHAT_APP_SECRET=xxxx

這兩個引數。

至此已經能完成微信分享朋友以及分享到朋友圈了。安裝外掛時其他引數可以隨便設定，但是不能缺失。

業務程式碼實現

在vue中對應的要分享的頁面新增業務程式碼

 shareMenuClick(menuKey, menuItem){

          var shareTitle = this.goods.startCityName + '->'+this.goods.endCityName+'動態標題！！！';
          var shareUrl = '前面是要分享的url的靜態部分，不變的部分'+this.goods.id;
          var shareText = '分享顯示的文字'+this.goods.startCityName+'到'+this.goods.endCityName+'僅需要￥'+this.goods.adultTicketPrice+',你還在等什麼！！';
          document.addEventListener("deviceready", function () {
            /** 是否安裝微信客戶端 **/

            sharesdk.isInstallClient.promise(ShareSDK.ClientType.Wechat).then(function(isInstall){

              if(isInstall) {
                if(menuKey=='menu1'){
                  var platformType=ShareSDK.PlatformType.WechatSession;//微信好友分享
                  /** 分享網頁 */
                  var icon = '分享顯示的圖片地址，最好放在伺服器上某路徑下';
                  var title = shareTitle;
                  var text = shareText;
                  var url = shareUrl;
                  var shareInfo = {icon:icon, title:title, text:text, url:url};
                  sharesdk.share(platformType, ShareSDK.ShareType.WebPage, shareInfo, function(success){}, function(fail){});
                }
                if(menuKey=='menu2'){
                  var platformType=ShareSDK.PlatformType.WechatTimeline;//朋友圈分享
                  /** 分享網頁 */
                  var icon = '分享顯示的圖片地址，最好放在伺服器上某路徑下';
                  var title = shareTitle;
                  var text = shareText;
                  var url = shareUrl;
                  var shareInfo = {icon:icon, title:title, text:text, url:url};
                  sharesdk.share(platformType, ShareSDK.ShareType.WebPage, shareInfo, function(success){}, function(fail){});
                }
              }else {
                alert("請安裝微信客戶端");
              }
            });

          }, false);
        },

避免踩坑

上面的程式碼中要實現點選不同的商品實現分享不同的標題、內容。

前端vue頁面有顯示的商品的一些屬性，但是不能直接通過:

this.goods.startCityName 來給外掛程式碼中的var title 賦值。

所以要通過js 來var 變數

var shareTitle = this.goods.startCityName + '->'+this.goods.endCityName+'動態標題！！！';

來中間獲取一下。

var 要寫在點選分享給朋友後觸發的方法裡，而且還要在介面方法的 document.addEventListener

之前，否則，如果title等引數為空或者有無誤，也是調不起微信的。