html5アプリ共有機能呼び出し例（WebViewJavascriptBridge）

編集者は、h5 モバイル アクティビティ ページを作成し、ページ コンテンツをクリックして iOS と Android を取得し、ユーザーが記録していない共有機能 (WeChat、WeChat Moments、QQ、QQ Space などを含む) を開発するというリーダーシップ タスクを受け取りました。ログイン後にのみ共有できます。共有が成功すると、クーポン機能の付与リクエストを開始できます。以下は参考のために得られた経験です。

ShareSDKは使用しないことをお勧めします

有用な情報を直接アップロード: 他のライブラリを参照する必要はありません

var u = navigator.userAgent;//携帯電話の種類を決定する//-------------------------------------- ---------- ---Android スマートフォン ---------------------------------- -------------- ----------// if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //Android var callbackButton = document.getElementById ('btnImg'); //ノードを取得します callbackButton.onclick = function (e) { e.preventDefault(); //元の関数をブロックする if (userId == null) { //ログインしているかどうかを確認し、ログインしていない場合は WebViewJavascriptBridge.callHandler('loginAction', function (response) {})//ここに h5 ページがあります。 Android ログイン メソッドを呼び出す} else {//すでにログインしています WebViewJavascriptBridge.callHandler('shareAction', { //h5 ページは Android メソッドを呼び出して、Android に渡されたパラメータを共有します。コンテンツ:あなたはご馳走します、私は請求書を支払い、友達を誘って（楽しい）一緒に乗り物を予約します。 // 共有テキストの画像リンク: http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F% E5% 9B%BE.jpg, // 共有画像 URL タイトル: 楽しいあられ - 星海広場駅であなたを待っています, // 共有タイトル画像 URL: http://agent.qyueche.com/sup/ShareSdk/xing.html, //共有 URL リンク プラットフォーム: [2, 3] //1 Sina Weibo 2 WeChat Friends 3 WeChat Moments 4 QQ Friends 5 QQ Space 6 SMS } , function (response) {}) } } function connectWebViewJavascriptBridge(callback) {//これは共有が成功した後のものです if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ) } } connectWebViewJavascriptBridge(function(bridge) { Bridge.init(function(message, responseCallback) { }); ; ブリッジ.registerHandler('shareComplete', 関数 (データ, 応答コールバック) { //iosコールバックメソッド, //alert(data) if (data == 1) { //共有が成功した場合 $.ajax({ //クーポンを受け取るためのリクエストインターフェース type: get, contentType: application/x-www -form-urlencoded, // URL: http://main.qyueche.com/api/coupon/receiveCoupon?userId= + userId + // &takeCouponType=2&couponId=176, URL: http://dev.qyueche.cn/api/coupon/receiveCoupon?userId= + userId + &takeCouponType=2&couponId=187, data: {}, dataType: json, success: function (data) { //正常に受信しました swal(data) .message); }、エラー: 関数 (XMLHttpRequest、textStatus、errorThrown) { //受信に失敗しました swal('受信に失敗しました!'); } }) } else { //共有に失敗しました swal('共有に失敗しました!') } }) Bridge.registerHandler('loginComplete', function (data) , responseCallback) { //ios ログイン メソッド, userId = data }) }) } else if (u.indexOf('iPhone') > -1) { //------------- --- -----------------------Apple Phone---------------------- ----------------------------------// // swal(iPhone); 関数 setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback) } ; var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display = 'none'; WVJBIframe.src = 'https://__bridge_loaded__'; document.documentElement.appendChild(WVJBIframe) { document.documentElement.removeChild(WVJBIframe) }, 0) } setupWebViewJavascriptBridge(関数 (ブリッジ) { Bridge.registerHandler('shareComplete', function (data, responseCallback) { //ios コールバック メソッド, if (data.code == 1) { //共有が成功した場合 $.ajax({ //クーポン タイプを受け取るリクエスト インターフェース: get, contentType: application/x-www-form-urlencoded, // URL: http://main.qyueche.com/api/coupon/receiveCoupon?userId= + userId + // &takeCouponType=2&couponId=176、URL: http://dev.qyueche.cn/api/coupon/receiveCoupon?userId= + userId + &takeCouponType=2&couponId=187、データ: {}、dataType: json、成功: 関数 (データ) { //正常に受信しました swal(data.message) }、エラー: 関数(XMLHttpRequest, textStatus, errorThrown) { //受信に失敗しました swal('受信に失敗しました!'); } }) } else { //共有に失敗しました swal('共有に失敗しました!') } }) Bridge.registerHandler ('loginComplete' , function (data, responseCallback) { //ios ログイン メソッド, userId = data.userId; }) var callbackButton = document.getElementById('btnImg'); //ノードを取得します callbackButton.onclick = function (e) { //イベントをクリックします e.preventDefault(); //元の関数を無効にします if (userId == null) { //参照ログインしている場合 Bridge.callHandler('loginAction', function (response) {}) } else { Bridge.callHandler('shareAction', { //iOS に渡されるパラメータの内容:あなたはご馳走します、私は請求書を支払い、友達を誘って（楽しい）一緒に乗り物を予約します。 // 共有テキストの画像リンク: http://yueche-1254224848.cossh.myqcloud.com/che/%E5%B0%8F% E5% 9B%BE.jpg, // 共有画像 URL タイトル: 楽しいあられ - 星海広場駅であなたを待っています, // 共有タイトル画像 URL: http://agent.qyueche.com/sup/ShareSdk/xing.html, //共有 URL リンク プラットフォーム: [2, 3] //1 Sina Weibo 2 WeChat Friends 3 WeChat Moments 4 QQ Friends 5 QQ Space 6 SMS } , 関数 (応答) {}) } } }) }

一般に、Android と iOS のコードの類似点は非常に似ていますが、コードの配置は異なります。callHandler は iOS または Android のページを呼び出すためのメソッドであり、registerHandler は iOS と Android のページを呼び出すためのメソッドであることに注意してください。 。

画像の赤枠の位置のメソッド名はh5ページ開発者とios・android担当者がカスタマイズしています。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。