ShareSDK Uni-app 插件

准备
下载开发工具HBuilderX

准备uniapp项目
如果没有已经创建好的项目,可以自行创建新的项目

在这里插入图片描述

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

在这里插入图片描述

插件集成

本地插件集成
下载离线插件

在这里插入图片描述

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


在这里插入图片描述

之后在uniapp的“manifest.json”中选择“app原生插件配置”,点击选择本地插件,如图:


在这里插入图片描述

云端插件集成

在uniapp的“manifest.json”中选择“app原生插件配置”,点击选择云端插件,如图:

在这里插入图片描述

注意:本地插件和云端插件可以任选一样配置,区别在于本地插件存放到工程nativeplugins目录下的原生插件,适用于未发布到插件市场的私有原生插件进行云打包,云端插件是已经在插件市场购买或绑定试用的插件,无需下载插件到工程中,云打包时会直接合并打包原生插件到App中。不过我们提供的插件是免费的哦!
iOS平台相关配置
配置初始化信息和URL SCheme
在“app原生插件配置”中添加MobTech平台注册的MOBAppKey和MOBAppSecret,如何得到这2个参数,请参考这个流程。以及微信、QQ、新浪、Facebook、Twitter等平台的注册平台信息。各平台注册地址,请点击 这里
在这里插入图片描述

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

在这里插入图片描述

配置平台的Universal Link

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

在这里插入图片描述

Android平台相关配置

注意:安卓端只支持本地依赖方式导入

添加依赖

  1. 在uniapp插件市场找到ShareSDK插件,点击下载for离线打包


在这里插入图片描述

2.解压到uni-app应用的nativeplugins目录中
具体参考:https://ask.dcloud.net.cn/article/35412,完成后如下图:


在这里插入图片描述

配置分享平台信息

配置ShareSDK.xml文件
在项目中mob-sharesdk/android下新建assets目录,在新创建的assets目录中创建名为ShareSDK.xml的文件,如下图:

ShareSDK.xml文件内容示例为:

其中各平台的appkey等信息仅为demo示例,正式使用请替换为自己在分享授权平台申请的

<?xml version="1.0" encoding="utf-8"?>
<DevInfor>
<SinaWeibo Id="1" SortId="59" AppKey="568898243" AppSecret="38a4f8204cc784f81f9f0daaf31e02e3" ShareByAppClient="true" Enable="true" RedirectUrl="http://www.sharesdk.cn" />
<TencentWeibo Id="2" SortId="2" AppKey="801307650" AppSecret="ae36f4ee3946e1cbb98d6965b0b2ff5c" Enable="true" RedirectUri="http://sharesdk.cn" />
<Douban Id="16" SortId="16" Enable="true" ApiKey="031a96a3aa8b28af094fc3eaffa17a0d" Secret="2e675e730571b75d" RedirectUri="http://mob.com" />
<QZone Id="3" SortId="3" AppId="100371282" AppKey="aed9b0303e3ed1e27bae87c33761161d" ShareByAppClient="true" BypassApproval="false" Enable="true" />
<Renren Enable="false" />
<KaiXin Enable="false" />
<Facebook Id="8" SortId="8" ShareByAppClient="true" Enable="true" ConsumerKey="2796236850615578" ConsumerSecret="7d353609b517b23a80dcb057995ef30c" RedirectUrl="https://mob.com" />
<Twitter Id="9" SortId="9" ShareByAppClient="true" Enable="true" ConsumerKey="viOnkeLpHBKs6KXV7MPpeGyzE" ConsumerSecret="NJEglQUy2rqZ9Io9FcAU9p17omFqbORknUpRrCDOK46aAbIiey" CallbackUrl="http://mob.com" />
<Evernote Id="19" SortId="19" HostType="sandbox" ShareByAppClient="true" Enable="true" ConsumerKey="sharesdk-7807" ConsumerSecret="d05bf86993836004" />
<FourSquare Enable="false" />
<GooglePlus Id="21" SortId="21" OfficialVersion="default" ShareByAppClient="true" Enable="true" ClientID="236300675100-am5pm8km7md1memjevq8rl9pg5c4s4b8.apps.googleusercontent.com" RedirectUrl="http://localhost" />
<Instagram Id="28" SortId="28" ShareByAppClient="true" Enable="true" ClientId="ff68e3216b4f4f989121aa1c2962d058" ClientSecret="1b2e82f110264869b3505c3fe34e31a1" RedirectUri="http://sharesdk.cn" />
<LinkedIn Id="20" SortId="20" ShareByAppClient="true" Enable="true" ApiKey="ejo5ibkye3vo" SecretKey="cC7B2jpxITqPLZ5M" RedirectUrl="http://sharesdk.cn" />
<Tumblr Enable="false" />
<Email Id="12" SortId="12" Enable="true" />
<ShortMessage Id="13" SortId="13" Enable="true" />
<Wechat Id="4" SortId="4" AppId="wx4868b35061f87885" AppSecret="64020361b8ec4c99936c0e3999a9f249" WithShareTicket="true" BypassApproval="false" Enable="true" />
<WechatMoments Id="5" SortId="5" AppId="wx4868b35061f87885" AppSecret="64020361b8ec4c99936c0e3999a9f249" BypassApproval="false" Enable="true" />
<QQ Id="7" SortId="7" AppId="100371282" AppKey="aed9b0303e3ed1e27bae87c33761161d" ShareByAppClient="true" BypassApproval="false" Enable="true" />
<Instapaper Id="38" SortId="38" Enable="true" ConsumerKey="4rDJORmcOcSAZL1YpqGHRI605xUvrLbOhkJ07yO0wWrYrc61FA" ConsumerSecret="GNr1GespOQbrm8nvd7rlUsyRQsIo3boIbMguAl9gfpdL0aKZWe" />
<Pocket Id="37" SortId="37" Enable="true" ConsumerKey="32741-389c565043c49947ba7edf05" />
<YouDao Id="17" SortId="17" HostType="product" Enable="true" ConsumerKey="dcde25dca105bcc36884ed4534dab940" ConsumerSecret="d98217b4020e7f1874263795f44838fe" RedirectUri="http://www.sharesdk.cn/" />
<Pinterest Enable="false" />
<Flickr Enable="false" />
<Dropbox Enable="false" />
<VKontakte Id="27" SortId="27" ShareByAppClient="true" Enable="true" ApplicationId="3921561" />
<WechatFavorite Id="6" SortId="6" AppId="wx4868b35061f87885" AppSecret="64020361b8ec4c99936c0e3999a9f249" BypassApproval="false" Enable="true" />
<Yixin Enable="false" />
<YixinMoments Enable="false" />
<Mingdao Enable="false" />
<Line Id="32" SortId="32" callbackscheme="lineauth" Enable="true" ChannelID="1639219273" ChannelSecret="58faad55ffce8bf8f63b59fe6fb702ae" RedirectUri="https://www.mob.com/" />
<WhatsApp Id="35" SortId="35" Enable="true" />
<KakaoTalk Id="33" SortId="33" AppKey="48d3f524e4a636b08d81b3ceb50f1003" Enable="true" />
<KakaoStory Id="34" SortId="34" AppKey="48d3f524e4a636b08d81b3ceb50f1003" Enable="true" />
<FacebookMessenger Id="39" SortId="39" AppId="107704292745179" OfficialVersion="default" Enable="true" />
<Alipay Id="50" SortId="50" AppId="2015072400185895" Enable="true" />
<AlipayMoments Id="51" SortId="51" AppId="2015072400185895" Enable="true" />
<Dingding Id="52" SortId="52" AppId="dingoanxyrpiscaovl4qlw" BypassApproval="false" Enable="true" />
<Youtube Id="53" SortId="53" AppSecret="AIzaSyAO06g-0TDpHcsXXO918a7QE3Zdct2bB5E" ShareByAppClient="true" Enable="true" ClientID="370141748022-bicrnsjfiije93bvdt63dh3728m4shas.apps.googleusercontent.com" RedirectUrl="http://localhost" />
<Meipai Id="54" SortId="54" AppSecret="y9ym6rrjjijtkt23qtsc" ShareByAppClient="true" Enable="true" ClientID="1089867596" />
<Telegram Id="47" SortId="47" AppKey="782826033" Enable="true" RedirectUrl="http://www.mob.com" />
<Cmcc Id="55" SortId="55" AppId="300011860247" AppKey="2D464D8BFCE73A44B4F9DF95A2FDBE1C" />
<Reddit Id="56" SortId="56" AppKey="MExDxPuTCtFiRw" RedirectUrl="http://www.sharesdk.cn" />
<Telecom Id="57" SortId="57" AppKey="8148612606" AppSecret="mCltrhUqwshFa86egDTs0491ibaAulKA" Enable="true" RedirectUrl="http://www.sharesdk.cn" />
<Accountkit Id="58" SortId="58" AppKey="579465512480462" AppSecret="8a6383652dd9f23fb0994f03d350d0ca" Enable="true" RedirectUrl="http://www.sharesdk.cn/" />
<Douyin Id="59" SortId="1" AppKey="aw9ivykfjvi4hpwo" AppSecret="42b4caa6bda60bd49f05f06d0a4956e1" Enable="true" />
<Wework Id="60" SortId="60" AppKey="wwa21eaecf93f0e3ba" AppSecret="dW7e27P7Hc8NiYdRxnbTeOLgfI1ugR72e-PM8uusq2s" AgentId="1000012" Schema="wwautha21eaecf93f0e3ba000012" />
<HWAccount Enable="false" />
<Oasis Enable="false" />
<XMAccount Enable="false" />
<SnapChat Enable="false" />
<Kuaishou Id="68" SortId="68" Enable="true" />
<Littleredbook Enable="false" />
<Watermelonvideo Enable="false" />
<Tiktok Enable="false" />
</DevInfor>

配置manifest.json
选择manifest.json文件中的App原生插件配置,添加本地插件或云端插件mob-sharesdk,分别填写Mob-AppKey、Mob-AppSecret、QQ-AppId、Facebook-AppKey、Line-CallBackScheme,其中Mob-AppKey、Mob-AppSecret为必填,其余三项可按需填写。

在这里插入图片描述

接口调用

编写相关代码
在index.vue中编写代码,包括页面和点击方法。

在这里插入图片描述

引入模块(必要)

const modal = uni.requireNativePlugin('modal');
const pluginMobShare = uni.requireNativePlugin('mob-sharesdk');

ShareSDK功能接口
submitPrivacyGrantResult()回传隐私授权状态
例子调用:

//回传用户授权结果
            //isurl参数如果传入字符串‘true’则表示接受隐私协议
            submitPrivacyGrantResult() {
                pluginMobShare.submitPrivacyGrantResult({
                    isUrl: 'true',
                    mobAppkey: 'moba0b0c0d0',
                    mobSecret: '5713f0d88511f9f4cf100cade0610a34',
                }, result => {
                    const msg = JSON.stringify(result);
                    modal.toast({
                        message: msg,
                        duration: 2 ,
                    });
                });
            },

注意:该接口必须接入,否则可能造成无法使用MobTech各SDK提供的相关服务。
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: SSDKPlatformID.WeChat,
                    params: {
                        text: 'text',
                        title: "title",
                        imageUrl: "http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339485237265.jpg",
                        url: "http://m.93lj.com/sharelink?mobid=ziqMNf",
                    },
                    shareType: SSDKContentType.WebPage,
                }, result => {

                    const modal = uni.requireNativePlugin('modal');
                    const msg = JSON.stringify(result);
                    modal.toast({
                        message: msg,
                        duration: 1.5
                    });

                });
            }

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;
                }
            }

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;
                }
            }

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;
                }
            }
调试

将插件放入uniapp项目中调试
打自定义基座

在这里插入图片描述

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


在这里插入图片描述
在这里插入图片描述

选中自定义基座,运行这个项目,进行调试
自此,整个流程就走完了。如有问题,可以联系官方技术支持QQ:4006852216
备注:关于参数platName平台号对照表

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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在HBuilderX中安装uni-app插件,您可以按照以下步骤进行操作: 1. 首先,您需要下载并安装HBuilderX工具。您可以从官方网站上下载HBuilderX的安装包\[1\]。 2. 安装完成后,打开HBuilderX。在工具栏中选择“工具”,然后选择“插件安装”\[3\]。 3. 在插件安装界面中,您可以搜索并找到uni-app插件。点击插件名称,然后点击“安装”按钮进行安装。 4. 安装完成后,您可以在HBuilderX中创建或打开一个uni-app项目。在项目中的任何一个.vue文件中,点击HBuilderX工具栏的“运行”按钮,然后选择“运行到浏览器”,再选择您想要在其中运行uni-app的浏览器\[2\]。 这样,您就可以在HBuilderX中安装uni-app插件,并在浏览器中体验uni-app的H5版本了。希望对您有帮助! #### 引用[.reference_title] - *1* *2* [uni-app以及HBuilderX安装](https://blog.csdn.net/fangyuan__/article/details/116168774)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [[HBuilderX开发uniapp]自动代码格式化插件安装及配置](https://blog.csdn.net/zxcve/article/details/123633437)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MobTech袤博科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值