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

「爱情、让人受尽委屈。」 2023-10-18 11:20 7阅读 0赞

## 知识储备 ##

### 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

关于安装插件参数说明

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp;参数 </td> 
 <td> &nbsp;说明 </td> 
 </tr> 
 <tr> 
 <td> &nbsp;SHARESDK_IOS_APP_KEY </td> 
 <td> &nbsp;ShareSDK注册(iOS)&nbsp; </td> 
 </tr> 
 <tr> 
 <td> &nbsp;SHARESDK_ANDROID_APP_KEY </td> 
 <td> &nbsp;ShareSDK注册(Android)&nbsp; </td> 
 </tr> 
 <tr> 
 <td> &nbsp;WECHAT_APP_ID </td> 
 <td> 微信开放平台注册&nbsp; </td> 
 </tr> 
 <tr> 
 <td> &nbsp;WECHAT_APP_SECRET </td> 
 <td> &nbsp;微信开放平台注册&nbsp; </td> 
 </tr> 
 <tr> 
 <td> &nbsp;WEIBO_APP_ID </td> 
 <td> 新浪微博开放平台注册&nbsp; </td> 
 </tr> 
 <tr> 
 <td> &nbsp;WEIBO_APP_SECRET </td> 
 <td> 新浪微博开放平台注册&nbsp; </td> 
 </tr> 
 <tr> 
 <td> &nbsp;WEIBO_REDIRECT_URL </td> 
 <td> 微博回调地址：我的应用/应用信息/高级信息/OAUTH2.0授权设置里配置&nbsp; </td> 
 </tr> 
 <tr> 
 <td> QQ_IOS_APP_ID&nbsp; </td> 
 <td> 腾讯开放平台注册&nbsp; </td> 
 </tr> 
 <tr> 
 <td> &nbsp;QQ_IOS_APP_HEX_ID </td> 
 <td> &nbsp;由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位数字 </td> 
 </tr> 
 <tr> 
 <td> &nbsp;QQ_IOS_APP_KEY </td> 
 <td> 腾讯开放平台注册&nbsp; </td> 
 </tr> 
 <tr> 
 <td> &nbsp;QQ_ANDROID_APP_ID </td> 
 <td> &nbsp;腾讯开放平台注册 </td> 
 </tr> 
 <tr> 
 <td> &nbsp;QQ_ANDROID_APP_KEY </td> 
 <td> 腾讯开放平台注册&nbsp; </td> 
 </tr> 
 </tbody> 
</table>

注意：

①后面每个--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][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

#### 实现效果： ####

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

#### 文档参照： ####

[https://doc.vux.li/zh-CN/components/actionsheet.html][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()">  分享</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][http_dashboard.mob.com]

注册并按要求创建应用：

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

配置完这两个参数，因为我们要实现微信分享给朋友以及分享到朋友圈，所以我们需要登录

微信开放平台去申请接口调用权限

[https://open.weixin.qq.com][https_open.weixin.qq.com]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]![Image 1][]

注册登录后依次创建应用，安卓以及IOS要分别创建。

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

以安卓为例，需要填写应用包名还要用到apk打包release版本时用到的应用签名。

![Image 1][]![20181116143059665.jpg][]

#### 获取应用签名的apk下载： ####

[https://download.csdn.net/download/badao\_liumang\_qizhi/10788719][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等参数为空或者有无误，也是调不起微信的。

####    实现效果 ####

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

[https_github.com_behring_cordova-sharesdk-demo]: https://github.com/behring/cordova-sharesdk-demo
[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181116142904255.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_doc.vux.li_zh-CN_components_actionsheet.html]: https://doc.vux.li/zh-CN/components/actionsheet.html
[http_dashboard.mob.com]: http://dashboard.mob.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181116143044791.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_open.weixin.qq.com]: https://open.weixin.qq.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181116143055340.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20181116143059665.jpg]: https://img-blog.csdnimg.cn/20181116143059665.jpg
[https_download.csdn.net_download_badao_liumang_qizhi_10788719]: https://download.csdn.net/download/badao_liumang_qizhi/10788719
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20181116143132510.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20181116143145300.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70