如何在Uni-App中集成ShareSDK
ShareSDK是一种社会化分享组件,免费为App提供社会化功能,我们也推出众多平台的SDK以及插件,近期刚刚上线Uni-App的插件集成,本文讲述的是如何在Uni-App中集成ShareSDK。
一.准备
1.下载开发工具HBuilderX
2.准备Uni-App项目(如果没有已经创建好的项目,可以自行创建新的项目)

之后选择新建Uni-App项目。打开HBuildX的文件->导入->本地项目导入创建的文件夹->创建。

二.插件集成
1.本地插件集成
(1)下载离线插件

将下载好的插件放在项目的nativeplugins文件夹中。(若没有则创建此目录) 目录结构如下:

(2)之后在Uni-App的“manifest.json”中选择“App原生插件配置”,点击选择本地插件,如图:

2.云端插件集成
在Uni-App的“manifest.json”中选择“App原生插件配置”,点击选择云端插件,如图:

注意:本地插件和云端插件可以任选一样配置,区别在于本地插件存放到工程nativeplugins目录下的原生插件,适用于未发布到插件市场的私有原生插件进行云打包,云端插件是已经在插件市场购买或绑定试用的插件,无需下载插件到工程中,云打包时会直接合并打包原生插件到App中。不过我们提供的插件是免费的哦!
3.填写参数
在“App原生插件配置”中添加MobTech平台注册的MOBAppKey和MOBAppSecret,如何得到这2个参数,请参考:
http://bbs.mob.com/forum.php?mod=viewthread&tid=8212&extra=page%3D1
以及微信、QQ、新浪、Facebook、Twitter等平台的注册平台信息。各平台注册地址,请点击:
http://www.mob.com/wiki/detailed?wiki=ios_third_party_register_process&id=14

并在“App常用其他设置”中的“iOS设置”中填写URL Scheme,以及白名单等信息,具体每个平台如何配置,请参考 原生文档第4点配置Xcode项目这块。

iOS平台相关配置
微信以及qq要求用户在新版sdk中填写universalLink,所以需要在应用中配置通用链接,需要在manifest.json的源码视图添"App-plus"->"distribute"->"ios"下,添加如下代码:

三.接口调用
1.在index.vue中编写代码,包括页面和点击方法。

2.接口
首先需要添加(必要):
const modal = uni.requireNativePlugin('modal'); const pluginMobShare = uni.requireNativePlugin('mob-sharesdk');
(1)generalShare() 直接分享方法接口
可传参数说明:
String PLATNAME = "platName"; //平台名 String MOB_APPKEY = "mobAppkey"; //MobSDK的appkey String MOB_SECRET = "mobSecret"; //MobSDK的appSecret String PLAT_APPKEY = "platAppkey"; //平台的appkey String PLAT_APPSECRET = "platAppSecret";//平台的appsecret String PLAT_REDIRECTURL = "platRedirectUrl";//平台的回调地址 String PLAT_SHAREBYAPPCLIENT = "platShareByAppClient";//平台的是否通过客户端分享 String PLAT_BYPASSAPPROVAL = "platBypassApproval";//平台的是否绕过审核 String TEXT = "text"; //文本 String TITLE = "title"; //标题 String URL = "url";//链接地址 String IMAGE_URL = "imageUrl";//网络图片地址 SHARETYPE = "shareType";//分享类型 String TITLE_URL = "titleUrl";//QQ平台需要的参数 String IMAGE_PATH = "imagePath";//本地图片地址 String MUSIC_URL = "musicUrl";//音乐链接地址 String SITE = "site";//QQ需要的参数 SITE_URL = "siteUrl";//QQ需要的参数 FILE_PATH = "filePath";//文件本地路径
返回类型
//state : number类型 状态 1、成功,2、失败,3、取消 //userData:对象类型, 用户信息 //contentEtitiy: 对象类型, 内容实体 //error:对象类型,错误信息 { state: 1 userData:{} contentEtitiy:{} error:{} }
例子调用:
mobShareWebpage() { pluginMobShare.generalShare({ platName: '24', mobAppkey: 'moba0b0c0d0', mobSecret: '5713f0d88511f9f4cf100cade0610a34', text: 'text', title: "title", url: 'http://wiki.mob.com/', imageUrl: "http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339485237265.jpg", shareType: 3, }, result => { const msg = JSON.stringify(result); modal.toast({ message: msg, duration: 2 , }); }); switch (result.type) { case 'onComplete': console.log("callback---onComplete--" + result.onCompleteResult); break; case 'onError': console.log("callback---onError--" + result.onErrorResult); break; case 'onCancel': console.log("callback---onCancel--"); break; } }
(2)authorize()授权方法接口
参数说明:platName: 平台号
mobAppkey: 申请的MobSDK的appkey
mobSecret: 申请的MobSDK的secret
iOS返回:
//state : number类型 状态 1、成功,2、失败,3、取消 //userData:对象类型, 用户信息 //error:对象类型,错误信息 { state: 1 userData:{} error:{} }
例子调用
mobAuthorize() { pluginMobShare.authorize({ platName: '24', mobAppkey: 'moba0b0c0d0', mobSecret: '5713f0d88511f9f4cf100cade0610a34', }, result => { const msg = JSON.stringify(result); modal.toast({ message: msg, duration: 2 , }); }); switch (result.type) { case 'onComplete': console.log("callback---onComplete--" + result.onCompleteResult); break; case 'onError': console.log("callback---onError--" + result.onErrorResult); break; case 'onCancel': console.log("callback---onCancel--"); break; } }
(3)cancelauthorize() 取消授权
参数说明:
platName: 平台号
mobAppkey: 申请的MobSDK的appkey
mobSecret: 申请的MobSDK的secret
返回类型:
//error:取消授权失败返回信息 { error:{} }
例子调用
mobCancelAuthorize() { pluginMobShare.cancelauthorize({ platName: '24', mobAppkey: 'moba0b0c0d0', mobSecret: '5713f0d88511f9f4cf100cade0610a34', }, result => { const msg = JSON.stringify(result); modal.toast({ message: msg, duration: 2 , }); }); switch (result.type) { case 'onComplete': console.log("callback---onComplete--" + result.onCompleteResult); break; case 'onError': console.log("callback---onError--" + result.onErrorResult); break; } }
(4)getUserInfo() 获取用户信息
参数说明:
platName: 平台号
mobAppkey: 申请的MobSDK的appkey
mobSecret: 申请的MobSDK的secret
返回参数
//state : number类型 状态 1、成功,2、失败,3、取消 //userData:对象类型, 用户信息 //error:对象类型,错误信息 { state: 1 userData:{} error:{} }
例子调用
mobgetUserInfo() { pluginMobShare.getUserInfo({ platName: '24', mobAppkey: 'moba0b0c0d0', mobSecret: '5713f0d88511f9f4cf100cade0610a34', }, result => { const msg = JSON.stringify(result); modal.toast({ message: msg, duration: 2 , }); }); switch (result.type) { case 'onComplete': console.log("callback---onComplete--" + result.onCompleteResult); break; case 'onError': console.log("callback---onError--" + result.onErrorResult); break; case 'onCancel': console.log("callback---onCancel--"); break; } }
四.调试
1.将插件放入Uni-App项目中调试
(1) 打自定义基座

将证书等信息添加进去,等待云打包完成后。


选中定义基座,运行这个项目,进行调试。
SinaWeibo 1 TencentWeibo 2 Douban 5 QZone 6 Renren 7 KaiXin 8 Facebook 10 Twitter 11 Evernote 12 FourSquare 13 GooglePlus 14 Instagram 15 LinkedIn 16 Tumblr 17 Email 18 Wechat 22 WechatMoments 23 QQ 24 Instapaper 25 Pocket 26 YouDao 27 Pinterest 30 Flickr 34 Dropbox 35 VKontakte 36 WechatFavorite 37 Yixin 38 YixinMoments 39 Mingdao 41 Line 42 WhatsApp 43 KakaoTalk 44 KakaoStory 45 FacebookMessenger 46 Bluetooth 48 Alipay 50 AlipayMoments 51 Dingding 52 Youtube 53 Meipai 54 Cmcc 55 Reddit 56 Telecom 57 Douyin 58 Accountkit 59 备注:关于参数SHARETYPE平台号对照表 Auto 0 Text 1 Image 2 Webpage 3 App 4 Audio 5 Video 6 File 7
ShareSDK是一种社会化分享组件,免费为App提供社会化功能,我们也推出众多平台的SDK以及插件,近期刚刚上线Uni-App的插件集成,本文讲述的是如何在Uni-App中集成ShareSDK。
自此,整个流程就走完了。如有问题,可以联系官方技术支持:4006852216
备注:关于参数platName平台号对照表

浙公网安备 33010602011771号