HTML5でWeChatの共有を呼び起こす外部ブラウザ
2022-01-21 18:10:40
最近、モバイルサイトを制作しているのですが、シェアボタンをクリックしてWeChatを直接開き、シェアアウトする必要があります。ジアスではなく、シェアシェア、QRコードをクリックしてください。私はインターネット上で多くのことを読んで、すべてのAPPは、WeChatを呼び出すことができると述べたが、モバイルWebページを達成することはできません。また、直接WeChatを呼び出すことはできませんの多くを探した。
{WeChatを直接起動できない人が多いので、探してみました。 WeChatを直接呼び出せるものを思いつきました。携帯のqqブラウザやucブラウザに対応できます。
これがそのコードです。転送したいページにこれを直接入れるだけです。
htmlの部分です。
<script src="mshare.js"></script>//introduce mshare.js
<button data-mshare="0">Click to bring up the native sharing panel</button>
<button data-mshare="1">Click to trigger friend sharing</button>
<button data-mshare="2">Click to trigger send to WeChat friends</button>
jsセクションです。
<script>
var mshare = new mShare({
title: 'Lorem ipsum dolor sit.',
url: 'http://m.ly.com',
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. quaerat inventore minima voluptates.',
img: 'http://placehold.it/150x150'
});
$('button').click(function () {
// 1 ==> friends 2 ==> friends 0 ==> direct popup native
mshare.init(+$(this).data('mshare'));
});
</script>
ここにmshare.jsのコードシェアがあります。これらのコードを新しいjsファイルに入れて、ページ内に導入すればOKです。
/**
* The main purpose of this plug-in is to trigger the function of WeChat sharing or sending to friends on UC and QQ, two major browsers.
* Above trigger the function of WeChat share to friends or send to friends
*'use strict';
var UA = navigator.appVersion;
/**
* Whether it is a UC browser or not
*var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
/**
* Determine qq browser
* However, qq browser is divided into high and low versions
* 2 for high version
* 1 for low version
*var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
/**
* whether it is WeChat
*var wx = /micromessenger/i.test(UA);
/**
* Browser version
*var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
/**
* Get OS information iPhone(1) Android(2)
*var os = (function () {
var ua = navigator.userAgent;
if (/iphone|ipod/i.test(ua)) {
return 1;
} else if (/android/i.test(ua)) {
return 2;
} else {
return 0;
}
}());
/**
* qq browser under whether the corresponding api file is loaded
*var qqBridgeLoaded = false;
// Further refine the version and platform determination
if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
qq = 0;
} else {
if (qq && qqVs < 5.4 && os == 2) {
qq = 1;
} else {
if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2)) {
uc = 0;
}
}
}
/**
* Under qq browser Load the corresponding bridge according to different versions
* @method loadqqApi
* @param {Function} cb callback function
*function loadqqApi(cb) {
// qq == 0
if (!qq) {
return cb && cb();
}
var script = document.createElement('script');
script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
/**
* You need to wait until you have loaded the bridge script for qq
* before initializing the sharing component
* script.onload = function () {
cb && cb();
};
document.body.appendChild(script);
}
/**
* UC Browser Share
* @method ucShare
*function ucShare(config) {
// ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
// About platform
// ios: kWeixin || kWeixinFriend;
// android: WechatFriends || WechatTimeline
// uc sharing will use screenshots directly
var platform = '';
var shareInfo = null;
// The share type is specified
if (config.type) {
if (os == 2) {
platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
} else if (os == 1) {
platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
}
}
shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
// android
if (window.ucweb) {
ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
return;
}
if (window.ucbrowser) {
ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
return;
}
}
/**
* qq browser sharing function
* @method qqShare
*function qqShare(config) {
var type = config.type;
// WeChat friends 1, WeChat friends circle 8
type = type ? ((type == 1) ? 8 : 1) : '';
var share = function () {
var shareInfo = {
'url': config.url,
'title': config.title,
'description': config.desc,
'img_url': config.img,
'img_title': config.title,
'to_app': type,
'cus_txt': ''
};
if (window.browser) {
browser.app && browser.app.share(shareInfo);
} else if (window.qb) {
qb.share && qb.share(shareInfo);
}
};
if (qqBridgeLoaded) {
share();
} else {
loadqqApi(share);
}
}
/**
* Interface functions exposed to the outside world
* @method mShare
* @param {Object} config config object
*function mShare(config) {
this.config = config;
this.init = function (type) {
if (typeof type ! = 'undefined') this.config.type = type;
try {
if (uc) {
ucShare(this.config);
} else if (qq && !wx) {
qqShare(this.config);
}
} catch (e) {}
}
}
// Preload the qq bridge
loadqqApi(function () {
qqBridgeLoaded = true;
});
if (typeof module === 'object' && module.exports) {
module.exports = mShare;
} else {
window.mShare = mShare;
}
なるほど、WeChatを呼び出して共有すればいいんですね
概要
上記はWeChatのシェアを呼び出すために外部ブラウザでHTML5への小さな導入であり、私はそれがあなたの助けになることを願って、あなたが何か質問がある場合は私にメッセージを与えてください、私は速やかに皆に返信されます。ここでまた、BinaryDevelopのウェブサイトのサポートに非常に感謝する
この記事がお役に立つと思われる方は、転載歓迎、出典にご注意ください、ありがとうございます
関連
-
画像アップロードとキャンバス圧縮処理の解析
-
iframeとwindow.onloadの詳しい使い方
-
iframeタグが入れ子になっている問題の解決法
-
HTML5 Canvasタグの解説と基本的な使い方
-
HTMLのテキスト属性とカラーコントロール属性の実装
-
ホームページのダイナミックな動画背景を実現するHTML5サンプルコード
-
HTML5タイマーrequestAnimationFrameの使い方を深く理解する。
-
html5 postMessageのフロントエンドクロスドメインとフロントエンドのリスニング方式の例
-
HTML5 における dialog 要素のテイスト
-
モバイル開発 HTML5 ボタンをクリックすると、ページがちらついたり、背景が黒くなったりする問題
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
キャンバスを使った雪の結晶の効果を実現するコード例
-
iosシステムでhtml5のvideoタグが再生できない問題を解決する。
-
キャンバステキストフィルリニアグラデーション使用詳細説明
-
動画下の自動再生プロパティが無効な場合の解決方法(ミュートプロパティを追加する)。
-
HTML表示 pdf, word, xls, ppt方式例
-
キャンバス画像分割効果の実装
-
ダブルキャッシュを使用したCanvas clearRectによるスプラッシュスクリーンの問題を解決しました。
-
透明度を変更するためのキャンバスピクセル処理コード
-
ウェブアプリのページスクロールラグの解決策を詳しく解説
-
html5 canvasによる画像圧縮のサンプルコード