如何在Uni-App中集成ShareSDK

吉顺發表於 2021-4-25 00:22:00

ShareSDK是一种社会化分享组件，免费为App提供社会化功能，我们也推出众多平台的SDK以及插件，近期刚刚上线Uni-App的插件集成，本文讲述的是如何在Uni-App中集成ShareSDK。
 
一.准备
1.下载开发工具HBuilderX
2.准备Uni-App项目（如果没有已经创建好的项目，可以自行创建新的项目）
 
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425001043885-1612510018.png">
 
之后选择新建Uni-App项目。打开HBuildX的文件->导入->本地项目导入创建的文件夹->创建。
 
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425001057360-1389764900.png">
 
二.插件集成 
1.本地插件集成
（1）下载离线插件
 
 
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425001118500-1928101982.png">
 
将下载好的插件放在项目的nativeplugins文件夹中。(若没有则创建此目录）目录结构如下:
 
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425001131843-72141780.png">
 
（2）之后在Uni-App的“manifest.json”中选择“App原生插件配置”，点击选择本地插件，如图：
 
 
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425001150985-1567047929.png">
2.云端插件集成
在Uni-App的“manifest.json”中选择“App原生插件配置”，点击选择云端插件，如图：
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425001214957-1118121090.png">
 
注意：本地插件和云端插件可以任选一样配置，区别在于本地插件存放到工程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
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425001252256-278791999.png">
 
并在“App常用其他设置”中的“iOS设置”中填写URL Scheme，以及白名单等信息，具体每个平台如何配置，请参考 原生文档第4点配置Xcode项目这块。
 
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425001308397-76830141.png">
 
iOS平台相关配置
微信以及qq要求用户在新版sdk中填写universalLink，所以需要在应用中配置通用链接，需要在manifest.json的源码视图添"App-plus"->"distribute"->"ios"下，添加如下代码：
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425001329422-1032806384.png">
 
 
三.接口调用
1.在index.vue中编写代码，包括页面和点击方法。
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425001350383-1558749495.png">
 
 
 
2.接口
首先需要添加（必要）：
<div class="cnblogs_code">
<pre>const modal = uni.requireNativePlugin('modal');
const pluginMobShare = uni.requireNativePlugin('mob-sharesdk');</pre>
</div>
（1）generalShare() 直接分享方法接口
可传参数说明：
<div class="cnblogs_code">
<pre>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";//文件本地路径</pre>
</div>
返回类型
<div class="cnblogs_code">
<pre>//state : number类型状态 1、成功，2、失败，3、取消
//userData：对象类型，用户信息
//contentEtitiy: 对象类型，内容实体
//error：对象类型，错误信息
{
state: 1
userData:{}
contentEtitiy：{}
error:{}
}</pre>
</div>
例子调用：
<div class="cnblogs_code">
<pre>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;
 }
 }</pre>
</div>
（2）authorize()授权方法接口
<div class="cnblogs_code">
<pre>参数说明：platName: 平台号
mobAppkey: 申请的MobSDK的appkey
mobSecret: 申请的MobSDK的secret</pre>
</div>
iOS返回：
<div class="cnblogs_code">
<pre>//state : number类型状态 1、成功，2、失败，3、取消
//userData：对象类型，用户信息
//error：对象类型，错误信息
{
state: 1
userData:{}
error:{}
}</pre>
</div>
例子调用
<div class="cnblogs_code">
<pre>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;
 }
 }</pre>
</div>
（3）cancelauthorize() 取消授权
<div class="cnblogs_code">
<pre>参数说明：
platName: 平台号
mobAppkey: 申请的MobSDK的appkey
mobSecret: 申请的MobSDK的secret</pre>
</div>
返回类型：
<div class="cnblogs_code">
<pre>//error:取消授权失败返回信息
{
error:{}
}</pre>
</div>
例子调用
<div class="cnblogs_code">
<pre>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;
 }
 }</pre>
</div>
（4）getUserInfo() 获取用户信息
<div class="cnblogs_code">
<pre>参数说明：
platName: 平台号
mobAppkey: 申请的MobSDK的appkey
mobSecret: 申请的MobSDK的secret</pre>
</div>
返回参数
<div class="cnblogs_code">
<pre>//state : number类型状态 1、成功，2、失败，3、取消
//userData：对象类型，用户信息
//error：对象类型，错误信息
{
state: 1
userData:{}
error:{}
}</pre>
</div>
例子调用
<div class="cnblogs_code">
<pre>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;
 }
 }</pre>
</div>
四.调试
1.将插件放入Uni-App项目中调试
(1) 打自定义基座
 
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425002028591-1704769920.png">
 
将证书等信息添加进去，等待云打包完成后。
 
 
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425002038540-1325866663.png">
 
<img src="https://img2020.cnblogs.com/blog/2370841/202104/2370841-20210425002054121-52497595.png">
 
选中定义基座，运行这个项目，进行调试。
<div class="cnblogs_code">
<pre>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</pre>
</div>
ShareSDK是一种社会化分享组件，免费为App提供社会化功能，我们也推出众多平台的SDK以及插件，近期刚刚上线Uni-App的插件集成，本文讲述的是如何在Uni-App中集成ShareSDK。
自此，整个流程就走完了。如有问题，可以联系官方技术支持：4006852216
备注：关于参数platName平台号对照表 
来源：https://www.cnblogs.com/mobtech/p/14698761.html

頁: [1]

琼殿技术论坛's Archiver

如何在Uni-App中集成ShareSDK