Link: https://www.jianshu.com/p/dc96566001da

1 sharing on wechat

Sharing under wechat is completed by calling jS-SDK provided by wechat and guiding the user to click on the upper right corner. To use wechat jS-SDK, you need to introduce the following JS files:

<script src="/ / res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
Copy the code

The code for setting the shared content is as follows:

wx.config({
    debug: false.appId: 'AppID of public number'.timestamp: 'Timestamp'.nonceStr: 'Random string'.signature: 'signature'.jsApiList: ['onMenuShareTimeline'.'onMenuShareAppMessage'.'onMenuShareQQ'.'onMenuShareWeibo'.'onMenuShareQZone'.'showOptionMenu'.'hideAllNonBaseMenuItem'.'showAllNonBaseMenuItem']}); wx.ready(function() {
    const share = {
        title: 'Share title (show title only in moments)'.desc: 'Share content'.imgUrl: 'image URL'.link: 'Share link (preferably background JS secure domain name)'.success: function() {
            hideMaskLayer();  // Share successfully, hide the float that guides the user to share
        },
        cancel: function() {}}; wx.onMenuShareAppMessage(share);// Wechat friends
    wx.onMenuShareTimeline(share);  / / circle of friends
    wx.onMenuShareQQ(share);  // QQ
    wx.onMenuShareQZone(share);  / / QQ space
    wx.onMenuShareWeibo(share);  // Tencent Weibo
});
Copy the code

The parameters in wx.config are obtained by the server. For details, please refer to the wechat development document: mp.weixin.qq.com/wiki?t=reso… Note the effect of setting JS secure domain name in the background of public account is as follows:

Guide users to share

Share in moments (custom copywriting)

2. Sharing by QQ/TIM

2.1 Sharing through THE JS API

There is also an API for setting up shared content under QQ (no special instructions below, also valid under TIM), which also needs to reference JSBridge related files first:

<script src="//open.mobile.qq.com/sdk/qqapi.js"></script>
Copy the code

The code for setting the shared content is as follows:

const share = {
    title: 'Share title, maximum 45 bytes',
    desc: 'Share content, Max. 60 bytes',
    image_url: 'image URL',
    share_url: 'Share links'
};
mqq.data.setShareInfo(share, callback);
Copy the code

Note that the length of the shared link cannot exceed 120 bytes and must be the same domain name as the page URL; otherwise, the setting does not take effect. The minimum number of pictures to share is 200 * 200, otherwise they will be filtered out when shared to Qzone. After setting the sharing content, THE SHARING panel of QQ can be invoked through API to avoid the process of guidance.

mqq.ui.showShareMenu(a);Copy the code

In another way, QQ provides monitoring of the event of clicking on the sharing platform. When clicking on the sharing platform in Native sharing panel, this event will be triggered, and QQ’s default sharing behavior will no longer be implemented. The code is as follows:

mqq.ui.setOnShareHandler(function (platform) {
    mqq.ui.shareMessage({
        title: 'Share title'.desc: 'Share content'.share_type: platform,
        share_url: 'Share links'.image_url: 'image URL'.sourceName: Palm University of Technology.back: true
    }, function() {}); });Copy the code

Platform indicates the sharing platform type, and the values are as follows:

2.2 Sharing using Meta Tags

QQ also supports setting meta tags to define shared content. By defining ItemProp to share content, we also introduced the Open Graph standard for better compatibility with other platforms. The code is as follows:

<meta itemprop="name" property="og:title" content="Share title">
<meta property="og:url" content="Share links">
<meta itemprop="image" property="og:image" content="Image URL">
<meta name="description" itemprop="description" property="og:description" content="Share description">
Copy the code

Note that meta tags need to be server rendered output, generated by JS or modified invalid.

2.3 Evoke QQ Sharing through URL Scheme

QQ can also be invoked for sharing through URL Scheme. The advantage of this method is that QQ can be invoked for sharing in a non-QQ environment, but the disadvantage is that pictures cannot be set for sharing. The code is as follows:

const share = {
    title: 'Share title'.desc: 'Share content'.share_url: 'Share links'
};
const url_scheme = '//share/to_fri? src_type=web&version=1&file_type=news&share_id=1103437993&title=' + Base64.encode(share.title) + '&thirdAppDisplayName=5o6M5LiK55CG5bel5aSn&url=' + Base64.encode(share.share_url) + '&description=' + Base64.encode(share.desc);
location.assign('mqqapi:' + url_scheme);
setTimeout(function() {
  location.assign('timapi:' + url_scheme);
}, 2000);
Copy the code

The shared parameters need to be Base64 encoded when spelled into the URL. In order to support sharing under TIM, we have introduced a delay function. If arousing QQ fails, this timer will execute arousing TIM, and it will not execute after arousing QQ successfully leaves this page. Both QQ and TIM are installed with priority to evoke QQ. The effect is as follows:

Evoked Native sharing

2.4 By sharing component urls

QQ space provides a Shared component (see: connect.qq.com/intro/share), through the analysis of the parameters of the component is available to share the URL. The code is as follows:

const share = {
    title: 'Share title'.desc: 'Share content'.image_url: ['image URL'].share_url: 'Share links'
};
let image_urls = share.image_url.map(function(image) {
    return encodeURIComponent(image);
});
location.replace('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(share.share_url) + '&site= &title=' + share.title + '&pics=' + image_urls.join('|') + '&summary=' + share.desc);
Copy the code

It can support the sharing of multiple images, image urls separated by vertical lines. The advantage of this method is that it also supports sharing in non-QQ environment. Non-qq users can log in to share, QQ can be free to share directly. The effect is as follows:

Qzone sharing component

3. Sharing on Weibo

3.1 By sharing component urls

Weibo also provides a sharing component. Sharing parameters can be obtained by analyzing THE URL. The code is as follows:

const share = {
    title: 'Share title'.image_url: 'image URL'.share_url: 'Share links'
};
location.replace('https://service.weibo.com/share/share.php?url=' + encodeURIComponent(share.share_url) + '&title=' + share.title + '&appkey=277159429&&ralateUid=1855112015&pic=' + share.image_url + '&searchPic=true');
Copy the code

The appKey parameter is optional. If the weibo is set, the application name corresponding to the key sharing source will be displayed (the application can be registered at open.weibo.com/). The ralateUid parameter is optional. If the user ID is specified, the user will be at the end of the microblog. SearchPic is used to control whether the page image is automatically climbed, and PIC does not coexist. The effect is as follows:

Micro-blog sharing component

3.2 Automatically send tweets through the Microblog API

Weibo provides an API to send a tweet directly through the server call interface.

POST api.weibo.com/2/statuses/…

The parameters are as follows:

For details, see: Weibo Open Platform

3.3 Sharing through THE JS API

Weibo also provides jS-SDK for invoking Native methods. Before using it, you need to apply for light applications on weibo open platform and set secure domain names. To use wechat jS-SDK, you need to introduce the following JS files:

<script src="//tjs.sjs.sinajs.cn/open/thirdpart/js/jsapi/mobile.js"></script>
Copy the code

You also need to set initialization parameters first.

WeiboJS.init({
    appkey: 'Light Application key',
    debug: false,
    timestamp: 'Timestamp',
    noncestr: 'Random string',
    signature: 'signature',
    scope: ['openMenu'.'setMenuItems'.'menuItemSelected'.'setSharingContent']},function() {});Copy the code

There are three JS apis for sharing.

1. openMenu

The API can tune up Native’s sharing panel.

WeiboJS.invoke('openMenu');
Copy the code

1. setSharingContent

The API sets the content to share.

WeiboJS.invoke('openMenu', {
    icon: share.title,
    desc: share.desc,
    icon: share.image_url
});
Copy the code

1. invokeMenuItem

The API directly triggers clicking on the corresponding menu item in the Share panel.

WeiboJS.invoke('invokeMenuItem', { 
    code: platform
});
Copy the code

Platform indicates the sharing platform type, and the values are as follows:

Sharing can be achieved by using API 1 + API 2 (best) or API 2 + API 3. For details, please refer to the development document of weibo: open.weibo.com/wiki/ Light application H5 new…

4 Sharing by Alipay

Alipay also provides JS API, which can easily set sharing content and arouse Native sharing panel; The disadvantage is that it does not support sharing to QQ, wechat and other platforms. To use The JS-SDK of Alipay, the following JS files need to be introduced:

<script src="/ / a.alipayobjects.com/g/h5-lib/alipayjsapi/3.0.6/alipayjsapi.inc.min.js"></script>
Copy the code

The code is as follows:

const share = {
    title: 'Share title'.content: 'Share content'.image: 'image URL'.url: 'Share links'.captureScreen: false.showToolBar: false
};
ap.share(share, function() {});Copy the code

The effect is as follows:

Alipay Native share

5 UC Browser Sharing

UC browser also provides JS APIS to call Native sharing, support for evoking sharing panels and sharing to specific platforms. The code is as follows:

const share = {
    title: 'Share title'.desc: 'Share content'.image_url: 'image URL'.share_url: 'Share links'
};
const isiOS = /(iPhone|iPad|iPod)/.test(navigator.userAgent);  // Determine the application platform
if (isiOS) {
    if (ucbrowser.web_shareEX) {
        ucbrowser.web_shareEX(
            JSON.stringify({
                title: share.title,
                content: share.desc,
                sourceUrl: share.share_url,
                imageUrl: share.image_url,
                source: Palm University of Technology.target: platform
            });
        )
    } else {
        ucbrowser.web_share(share.title, share.desc, share.share_url, platform, ' '.Palm University of Technology, share.image_url); }}else ucweb.startRequest('shell.page_share', [share.title, share.desc, share.share_url, platform, ' '.Palm University of Technology, share.image_url]);
Copy the code

Platform indicates the sharing platform type, and the values are as follows:

The sharing panel will look like this:

UC Sharing Panel

Tune up your Twitter:

UC tuned up the weibo

6 sharing by QQ browser

QQ browser also provides JS API to call Native sharing, and also supports evoking sharing panel, generating QR code and sharing to specific platform. First we need to import the following JS file:

<script src="//jsapi.qq.com/get?api=app.share"></script>
Copy the code

The code is as follows:

browser.app.share({
    title: share.title,
    description: share.desc,
    url: share.share_url,
    img_url: share.image_url,
    from: Palm University of Technology,
    to_app: platform
});
Copy the code

Platform indicates the sharing platform type, and the values are as follows:

The sharing panel will look like this:

QQ browser sharing panel

7. Sharing of palm Engineering University

PDA is an App developed by our team. We also provide sharing capabilities through JSBridge. Handheld WebView container will inject token object before page loading, including sharing interface, Native end uses UMeng SDK to execute specific sharing logic. The advantage of this sharing method is that the Native sharing method is adopted. By calling QQ, wechat and Weibo platforms to give App open sharing ability, the sharing experience is the best, and the sharing source can be accurately displayed in QQ and other platforms (Handheld Technology University). Sharing interface:

token.invokeShare(share.title.share.share_url.platform);
Copy the code

Platform indicates the sharing platform type, and the values are as follows:

Native will take a screenshot of the current page as a shared image.