Практика мультиплатформенного обмена мобильными устройствами H5

внешний интерфейс

Эта статья устарела, и многие методы могут быть устаревшими.

Команды, посвященные Рождеству и Новому году, запланировали два мероприятия, каждое из которых предполагает обмен информацией на нескольких платформах. родной.сложный. Мы изучили множество схем обмена и получили относительно полный набор схем обмена.

1 Поделиться в WeChat

Совместное использование в WeChat осуществляется путем звонка в WeChat.JS-SDKи предложите пользователю нажать «Готово» в правом верхнем углу. используя WeChatJS-SDKНеобходимо импортировать следующие файлы js:

<script src="//res.wx.qq.com/open/js/jweixin-1.3.1.js"></script>

Код для установки общего содержимого выглядит следующим образом:

wx.config({
    debug: false,
    appId: '公众号的appid',
    timestamp: '时间戳',
    nonceStr: '随机字符串',
    signature: '签名',
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'showOptionMenu', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem']
});

wx.ready(function() {
    const share = {
        title: '分享标题（朋友圈只显示标题）',
        desc: '分享内容',
        imgUrl: '图片URL',
        link: '分享链接（最好是后台JS安全域名）',
        success: function() {
            hideMaskLayer();  // 分享成功，隐藏引导用户分享的浮层
        },
        cancel: function() {
        }
    };
    wx.onMenuShareAppMessage(share);  // 微信好友
    wx.onMenuShareTimeline(share);  // 朋友圈
    wx.onMenuShareQQ(share);  // QQ
    wx.onMenuShareQZone(share);  // QQ空间
    wx.onMenuShareWeibo(share);  // 腾讯微博
});

вwx.configПараметры получаются сервером, подробнее см. в документации по разработке WeChat:Билеты.WeChat.QQ.com/wiki?Он = горячая вода... Обратите внимание на установку имени домена безопасности JS в фоновом режиме официального аккаунта.Эффект следующий:

引导用户分享 分享到朋友圈（自定义文案）

2 Совместное использование QQ/TIM

2.1 Поделиться через JS API

Существует также API для настройки общего контента в QQ (следующее также действует в TIM без специальных инструкций) Также необходимо сначала обратиться к документам, связанным с JSBridge:

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

Код для установки общего содержимого выглядит следующим образом:

const share = {
    title: '分享标题，最大45字节',
    desc: '分享内容，最大60字节',
    image_url: '图片URL',
    share_url: '分享链接'
};
mqq.data.setShareInfo(share, callback);

должен быть в курсе: длина общей ссылки не может превышать 120 байт, и это должно быть то же доменное имя, что и URL-адрес страницы, иначе настройка не вступит в силу; минимальный размер общего изображения должен быть 200 * 200, иначе оно будет быть отфильтрованы при совместном использовании в пространстве QQ. После настройки общего доступа к содержимому вы можете вызвать панель общего доступа QQ через вызовы API, что устраняет необходимость в руководстве.

mqq.ui.showShareMenu();

Существует еще один метод: QQ предоставляет событие мониторинга для нажатия на платформу обмена.При нажатии платформы обмена на панели собственного обмена это событие будет запущено, и поведение общего доступа QQ по умолчанию больше не будет выполняться. код показывает, как показано ниже:

mqq.ui.setOnShareHandler(function (platform) {
    mqq.ui.shareMessage({
        title: '分享标题',
        desc: '分享内容',
        share_type: platform,
        share_url: '分享链接',
        image_url: '图片URL',
        sourceName: '掌上理工大',
        back: true
    }, function() {
    });
});

вplatform— тип платформы обмена, значения следующие:

Нумерация платформа обмена
0 КК друзья
1 QQ пространство
2 WeChat друзья
3 Моменты WeChat

2.2 Поделиться через метатеги

QQ также поддерживает установкуmetaТеги определяют, чем делиться. по определениюitempropМожно настроить общий контент, а для лучшей совместимости с другими платформами мы также ввелиOpen Graphстандарт. код показывает, как показано ниже:

<meta itemprop="name" property="og:title" content="分享标题">
<meta property="og:url" content="分享链接">
<meta itemprop="image" property="og:image" content="图片URL">
<meta name="description" itemprop="description" property="og:description" content="分享描述">

должен быть в курсе, метатег должен быть результатом рендеринга на стороне сервера, и его нельзя создавать или изменять с помощью js.

2.3 Активировать обмен QQ через схему URL

Вы также можете вызвать QQ для совместного использования через схему URL.Преимущество этого метода заключается в том, что он может вызвать QQ для реализации совместного использования в среде, отличной от QQ, но недостатком является то, что вы не можете установить общие изображения. код показывает, как показано ниже:

const share = {
    title: '分享标题',
    desc: '分享内容',
    share_url: '分享链接'
};
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);

Общие параметры являются обязательными при вводе в URL.Base64кодирование. Чтобы поддерживать совместное использование в рамках TIM, мы ввели функцию задержки.Если таймеру не удается вызвать QQ, он выполнит вызывающий TIM и не будет выполняться, если вызов завершится успешно и он покинет эту страницу. Когда установлены и QQ, и TIM, сначала активируется QQ. Эффект следующий:

唤起的Native分享

2.4 Реализовано путем обмена URL-адресом компонента

Qzone предоставляет компонент обмена (см.:connect.QQ.com/intro/share…

const share = {
    title: '分享标题',
    desc: '分享内容',
    image_url: ['图片URL'],
    share_url: '分享链接'
};
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);

Он может поддерживать совместное использование нескольких изображений, а URL-адреса изображений разделены вертикальными полосами. Преимущество этого метода заключается в том, что он также поддерживает совместное использование в среде, отличной от QQ. Пользователи, не являющиеся подписчиками QQ, могут предоставлять общий доступ после входа в систему, а пользователи, не являющиеся подписчиками QQ, могут предоставлять общий доступ напрямую, без входа в систему. Эффект следующий:

QQ空间分享组件

3 Поделиться на Weibo

3.1 Реализуется путем обмена URL-адресом компонента

Weibo также предоставляет компонент обмена, а параметры обмена можно получить, проанализировав URL-адрес. код показывает, как показано ниже:

const share = {
    title: '分享标题',
    image_url: '图片URL',
    share_url: '分享链接'
};
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');

вappKeyПараметр является необязательным, если вы установите Weibo, он будет отображать имя приложения, соответствующее ключу источника обмена (приложение можно найти вopen.weibo.com/регистр);ralateUidПараметр необязательный, укажите идентификатор пользователя Weibo, и этот пользователь будет в конце Weibo;searchPicизображения, используемые для управления автоматическим сканированием страницы, иpicне сосуществовать. Эффект следующий:

微博分享组件

3.2 Автоматически отправлять Weibo через API Weibo

Weibo предоставляет API для отправки Weibo напрямую через интерфейс вызова на стороне сервера.

POST API.microblogging.com/2/statuses/…

Параметры следующие:

обязательный Тип и область применения Описание номер
access_token да string Метод авторизации OAuth — обязательный параметр, который получается после авторизации OAuth.
status да string Текстовый контент, которым делятся пользователи на Weibo, должен быть закодирован в URL-адресе, текст не может содержать «#topic word#», и текст должен содержать хотя бы один общий URL-адрес, а доменное имя URL-адреса должно быть установлено в фоновом режиме.
pic нет binary Для изображений, опубликованных пользователями на Weibo, поддерживаются только изображения JPEG, GIF и PNG, а размер загружаемого изображения ограничен 5M. При загрузке изображения для отправки запроса используется метод POST.multipart/form-dataКодирование.
rip нет string Реальный IP действующего пользователя, указанный разработчиком, например: 211.156.0.1.

Подробнее см.:Открытая платформа Weibo

3.3 Совместное использование через JS API

Weibo также предоставляетJS-SDKПрежде чем использовать собственный метод, вам необходимо подать заявку на легкое приложение на открытой платформе Weibo и установить безопасное доменное имя. используя WeChatJS-SDKНеобходимо импортировать следующие файлы js:

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

Также необходимо сначала установить параметры инициализации.

WeiboJS.init({
    appkey : '轻应用key',
    debug: false,
    timestamp: '时间戳',
    noncestr: '随机字符串',
    signature: '签名',
    scope: ['openMenu', 'setMenuItems', 'menuItemSelected', 'setSharingContent']
}, function() {
});

Доступно 3 JS API для совместного использования.

  1. openMenu

Этот API может вызывать собственную панель общего доступа.

WeiboJS.invoke('openMenu');
  1. setSharingContent

Этот API может установить общий контент.

WeiboJS.invoke('openMenu', {
    icon: share.title,
    desc: share.desc,
    icon: share.image_url
});
  1. invokeMenuItem

Этот API может напрямую инициировать нажатие на соответствующий пункт меню на панели общего доступа.

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

вplatform— тип платформы обмена, значения следующие:

Нумерация платформа обмена
1001 Вейбо
1002 Круг друзей Weibo
1003 личное сообщение в Вейбо
1004 WeChat друзья
1005 Моменты WeChat
1006 Микрон Друзья
1007 Микро круг
1008 Дружба
1009 Контакт (Dian Dian Zong) динамический
1010 КК друзья
1011 QQ пространство
1101 Короткое сообщение
2001 системный браузер
2002 копировать ссылку

Совместное использование возможно с использованием API 1 + API 2 (лучше всего) или API 2 + API 3. Подробную информацию см. в документации по разработке Weibo:open.weibo.com/wiki/Легкое приложение H5 новое…

4 Совместное использование Alipay

Alipay также предоставляет JS API, с помощью которого можно легко настроить обмен контентом и вызвать нативную панель обмена; недостатком является то, что он не поддерживает обмен на QQ, WeChat и другие платформы. с помощью AlipayJS-SDKНеобходимо импортировать следующие файлы js:

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

код показывает, как показано ниже:

const share = {
    title: '分享标题',
    content: '分享内容',
    image: '图片URL',
    url: '分享链接',
    captureScreen: false,
    showToolBar: false
};
ap.share(share, function() {
});

Эффект следующий:

支付宝Native分享

5 Совместное использование UC Browser

UC Browser также предоставляет JS API для вызова собственного общего доступа, который поддерживает вызов панели общего доступа и общий доступ к определенным платформам. код показывает, как показано ниже:

const share = {
    title: '分享标题',
    desc: '分享内容',
    image_url: '图片URL',
    share_url: '分享链接'
};
const isiOS = /(iPhone|iPad|iPod)/.test(navigator.userAgent);  // 判断应用平台
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: '掌上理工大',
                target: platform
            })
        )
    } else {
        ucbrowser.web_share(share.title, share.desc, share.share_url, platform, '', '掌上理工大', share.image_url);
    }
}
else ucweb.startRequest('shell.page_share', [share.title, share.desc, share.share_url, platform, '', '掌上理工大', share.image_url]);

вplatform— тип платформы обмена, значения следующие:

Номер Android iOS-номер платформа обмена
'WechatFriends' 'kWeixinFriend' WeChat друзья
'WechatTimeline' 'kWeixin' Моменты WeChat
'QQ' 'kQQ' КК друзья
'Qzone' 'kQZone' QQ пространство
'SinaWeibo' 'kSinaWeibo' Вейбо
undefined undefined панель общего доступа

Эффект от вызова панели обмена следующий:

UC分享面板

Настройте Weibo:

UC调起微博

6 Совместное использование браузера QQ

Браузер QQ также предоставляет JS API для вызова собственного общего доступа, а также поддерживает вызов панели общего доступа, создание QR-кода и обмен на определенных платформах. Сначала вам нужно импортировать следующие файлы JS:

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

код показывает, как показано ниже:

browser.app.share({
    title: share.title,
    description: share.desc,
    url: share.share_url,
    img_url: share.image_url,
    from: '掌上理工大',
    to_app: platform
});

вplatform— тип платформы обмена, значения следующие:

Нумерация платформа обмена
1 WeChat друзья
8 Моменты WeChat
4 КК друзья
3 QQ пространство
11 Вейбо
5 Более
7 Сгенерировать QR-код
10 копировать ссылку
undefined панель общего доступа

Эффект от вызова панели обмена следующий:

QQ浏览器分享面板

7 По материалам Pocket Polytechnic University

Карманный политехнический университетЭто приложение разработано нашей командой. Мы также предоставляем возможности совместного использования через JSBridge. Контейнер WebView Портативного политехнического университета будет внедрять объект-токен перед загрузкой страницы, включая интерфейс общего доступа.Нативная сторона использует Umeng SDK для выполнения определенной логики общего доступа. Преимущество этого метода обмена заключается в том, что он принимает собственный метод обмена.При вызове платформ QQ, WeChat и Weibo, чтобы открыть возможности обмена для приложения, обмен является лучшим, а источник обмена может быть точно отображен на QQ. и другие платформы (Pocket Science и Technology).Большие). Поделиться интерфейсом:

token.invokeShare(share.title, share.share_url, platform);

вplatform— тип платформы обмена, значения следующие:

Нумерация платформа обмена
0 Вызвать панель общего доступа
1 WeChat друзья
2 Моменты WeChat
3 КК друзья
4 QQ пространство
5 Сина Вейбо

Native сделает снимок экрана текущей страницы в виде общего изображения.

Категории