ShareSDK is a social sharing component that provides social functionality to your App for free. We also offer SDKS and plug-ins for a number of platforms, and we just launched the plug-in integration for Uni-app. This article describes how to integrate ShareSDK into your Uni-app.

A. Prepare

1. Download the development tool HBuilderX

2. Prepare the Uni-app project (you can create a new one if you don’t already have one)

Then select the new Uni-app project. Open HBuildX file -> Import -> local project import created folder -> Create.

Ii. Plug-in integration

1. Local plug-in integration

(1) Download offline plug-ins

Place the downloaded plug-in in the project’s NativePlugins folder. (If not, create this directory) The directory structure is as follows:

(2) Then select “App Native Plug-in Configuration” in “manifest.json” of uni-app, and click to select local plug-in, as shown in the figure:

2. Cloud plug-in integration

In the “manifest.json” of uni-app, select “App Native Plug-in Configuration” and click to select cloud plug-in, as shown in the figure:

* * note: ** Local plug-ins and cloud plug-ins can choose the same configuration. The difference is that native plug-ins stored in the project nativePlugins directory are suitable for cloud packaging of private native plug-ins that have not been published to the plug-in market. Cloud plug-ins are plug-ins that have been purchased in the plug-in market or bound for trial, and there is no need to download plug-ins to the project. Cloud packaging will incorporate native plug-ins directly into the App. But the plugin we provide is free!

3. Set parameters

In “App Native Plug-in Configuration”, add the MOBAppKey and MOBAppSecret registered on the MobTech platform. How to get these two parameters, please refer to:

Bbs.mob.com/forum.php?m…

And wechat, QQ, Sina, Facebook, Twitter and other platforms registration platform information. For the registered address of each platform, please click:

www.mob.com/wiki/detail…

In addition, fill in the URL Scheme, whitelist and other information in the “iOS Settings” of “Other Commonly used Settings of App”. For details about how to configure each platform, please refer to point 4 “Configuring Xcode Project” in the native document.

IOS platform configuration

Wechat and QQ require users to fill in universalLink in the new SDK, so it is necessary to configure universal links in the application. Add “app-plus “->”distribute”->”ios” in the source view of manifest.json, and add the following code:

Iii. Interface invocation

1. Write code in index.vue, including pages and click methods.

2. The interface

First need to add (necessary) :

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

(1) generalShare() shares the method interface directly

Passable parameter description:

String PLATNAME = "platName"; String MOB_APPKEY = "mobAppkey"; // appKey String MOB_SECRET = "mobSecret"; //MobSDK appSecret String PLAT_APPKEY = "platAppkey"; // Platform appKey String PLAT_APPSECRET = "platAppSecret"; // AppSecret String PLAT_REDIRECTURL = "platRedirectUrl"; String PLAT_SHAREBYAPPCLIENT = "platShareByAppClient"; String PLAT_SHAREBYAPPCLIENT = "platShareByAppClient"; // Whether the platform shares String PLAT_BYPASSAPPROVAL = "platBypassApproval"; String TEXT = "TEXT "; String TITLE = "TITLE "; // Title String URL = "URL "; String IMAGE_URL = "imageUrl"; SHARETYPE = "SHARETYPE "; // Share type String TITLE_URL = "titleUrl"; String IMAGE_PATH = "imagePath"; String IMAGE_PATH = "imagePath"; String MUSIC_URL = "musicUrl"; String SITE = "SITE "; SITE_URL = "siteUrl"; FILE_PATH = "filePath"; // Local file pathCopy the code

The return type

//contentEtitiy: object type; // Error: object type; //contentEtitiy: object type; // Error: object type; //error: object type; 1 userData:{} contentEtitiy :{} error:{}}Copy the code

Example call:

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; }}Copy the code

(2) Authorize () Authorization method interface

Parameter description: platName: platform number mobAppkey: Appkey of the applied MobSDK. MobSecret: Secret of the applied MobSDKCopy the code

IOS returns:

//userData: object type, user information // Error: object type, error information {state: 1 userData:{} error:{}}Copy the code

Example calls

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; }}Copy the code

(3) Cancelauthorize () Cancel authorization

Parameter description: platName: platform number mobAppkey: Appkey of the applied MobSDK. MobSecret: Secret of the applied MobSDKCopy the code

Return type:

// Error :{error:{}}Copy the code

Example calls

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; }}Copy the code

(4) getUserInfo() To obtain user information

Parameter description: platName: platform number mobAppkey: Appkey of the applied MobSDK. MobSecret: Secret of the applied MobSDKCopy the code

Returns the parameter

//userData: object type, user information // Error: object type, error information {state: 1 userData:{} error:{}}Copy the code

Example calls

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; }}Copy the code

4. Debugging

1. Put the plug-in into the uni-app project for debugging

(1) Play custom base

Add information such as certificates and wait until the cloud packaging is complete.

Select the definition dock, run the project, and debug. From there, the whole process is over. For any problems, contact technical support: 4006852216 Note: About the platName platform number mapping table

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 Note: SHARETYPE Webpage Auto 0 Text 1 Image 2 Webpage 3 App 4 Audio 5 Video 6 File 7Copy the code