首页 > 其他分享 >Vux+Cordova打包的安卓App实现微信分享朋友和朋友圈

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

时间：2023-05-16 22:33:09浏览次数：47  
标签：QQ xxxx -- 微信 APP 朋友圈 ShareSDK 分享 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

实现效果：

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

文档参照：

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"show-cancel@on-click-mask="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

注册并按要求创建应用：

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

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

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

https://open.weixin.qq.com

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

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

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

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

Vux+Cordova打包的安卓App实现微信分享朋友和朋友圈_客户端_04

 

获取应用签名的apk下载：

 

当你创建完应用时会给你分配一个

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实现微信分享朋友和朋友圈_客户端_05

 

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

标签：QQ,xxxx,--,微信,APP,朋友圈,ShareSDK,分享,App
From： https://blog.51cto.com/BADAOLIUMANGQZ/6287651

相关文章

  • APP自动化-异常截图-利用内存空间（class)
    根据 APP自动化-异常截图-利用内存空间（list),这里还可以使用类的方法。在Package目录下建立一个什么情况下可以操作内存空间.py的文件，里面建立一个类classComtext:#类名可以随便定义pass 然后在conftest1中设置引入类，然后使用python内置函数 setattr函数映射i......
  • APP测试 - install选择设备安装
    0.场景电脑连接了多个设备（包括开启了的模拟器）在电脑连接了多个设备时候，需要指定设备完成apk的安装此时如果直接使用adbinstall执行安装，会报错morethanonedevice/emulator 一、查看设备列表的idadbdevices 二、选择设备安装apk其中-r表示强制替换安装-s选择......
  • APP自动化-异常截图-利用内存空间（list）
    先在package目录下建立一个文件，如：什么情况下可以操作内存空间.py里面建立一个列表：list1=[]因为conftest可以在很多层级都存在比如：我们在testcase目录下的conftest-1文件中没有pytest异常截图的那段代码（最下面注释掉的部分）1#!/usr/bin/envpython2#-*-coding:utf-8......
  • 什么是 SAP UI5 Application Index
    SAPUI5ApplicationIndex是一个集成在SAPFioriLaunchpad中的应用程序索引。它提供了一个集中式的位置，用于展示和访问已安装的SAPUI5应用程序。在SAPFioriLaunchpad的主页上，用户可以看到一个应用程序索引页面，其中包含了所有已经安装的SAPUI5应用程序。这个索引页面提供了......
  • SAP Fiori Tools 的 Application Reload Middleware 介绍
    通过applicationreloadmiddleware的帮助,开发者可以在进行FioriElements开发的过程中，即时预览这些尚未完全完成开发的应用。即时的意思是，一旦有FioriElements项目相关的文件发生变化，ApplicationReloadmiddleware会自动刷新应用。npx是一个Node.js工具，它可以让......
  • APP和小程序共同塑造现代化政务服务
    随着移动互联网的飞速发展，政务服务也开始向移动端转移，政务App和小程序结合，可以使政府更好地实现数字化转型和提供优质的政务服务。本文将探讨政务App和小程序的结合优势，以及如何推进政务App和小程序的发展。移动政务服务应用面临的是有限的手机桌面、有限的用户时间与有限的用......
  • uni-app 踩坑之旅5
    收件/发件箱列表需要个快速调到写信界面的按钮，就想到了通过浮动按钮来跳转，查了下文档，发现了个浮动按钮：https://uniapp.dcloud.net.cn/component/uniui/uni-fab.html使用的话也比较简单： 接着问题来了，我想更换显示图标，官方文档上写的是icon属性： 去到uni-icons里面找到......
  • 企业培训APP开发功能
    企业培训APP开发可以通过以下步骤实现：确定需求：明确培训APP的目的和功能，确定开发的规模和项目进度。选择开发平台：选择适合企业需求的开发平台，比如AppStore或者小程序平台，或者使用第三方移动端开发服务。开发APP：根据需求分析，进行APP的界面设计、功能开发、数据库设计等工......
  • app直播源码，css宽度不固定，水平居中
    app直播源码，css宽度不固定，水平居中1.相对定位：  #box{position:relative;left:50%;float:left;} #inner{position:relative;left:-50%;} ​需考虑浮动带来的问题 2.利用diplay:table来解决： #box{display:table;margin:0auto}/*不支持ie6,ie7*/  3.CSS3fl......
  • 直播系统app源码，滑块效果、slider用法
    直播系统app源码，滑块效果、slider用法    <viewclass="selconbox">    <viewclass="seltit">购买力</view>    <viewclass="progressbox">     <viewclass="zijintit"wx:if="{{price==0}}......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99