當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/3/19 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vux+Cordova打包的安卓App实现微信分享朋友和朋友圈小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

知識儲備

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:

再去聲明要顯示的值：

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

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

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

Cordova項目安裝插件

安裝插件的代碼:

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

所以需要更改參數:

--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等參數為空或者有無誤，也是調不起微信的。

實現效果

總結

以上是生活随笔為你收集整理的Vux+Cordova打包的安卓App实现微信分享朋友和朋友圈的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SSM+BJUI实现添加和编辑共用一个页
下一篇： BJUI接受TabID实现添加或编辑后自