リンク: https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6 1. 依存パッケージをインポートする npm インストール weixin-js-sdk 2. WeChatブラウザにあるかどうかを確認する js の <スクリプト> var ua = navigator.userAgent.toLowerCase(); var isWeixin = ua.indexOf('micromessenger') != -1; var isAndroid = ua.indexOf('android') != -1; var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if(!isWeixin) { document.head.innerHTML = '<title>申し訳ございません。エラーが発生しました</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css" rel="external nofollow" >'; document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">WeChatクライアントでリンクを開いてください</h4></div></div>'; } main.js 内の参照: import env from "./env"; //実行環境 WeChat でログインし、コードを openid に交換して、スタートページでこの方法を使用します。 <スクリプト> 方法:{ // WeChatログイン wxLogin() { var that = this; アクシオス .get("/common/loginAuth") .then(関数(res) { console.log("バックグラウンドによって返されたリンクアドレス", res.data); window.location.href = res.data; // バックグラウンドで返されたリンクアドレスにジャンプします}) .catch(関数(エラー) {}); }, //ユーザー情報交換 postCode(res) { var that = this; アクシオス .post("/common/getUserInfo", { コード:res }) .then(関数(res) { cookie.set("openid", res.data.openid); //コードはバックエンドのopenidを交換して保存します}) .catch(関数(エラー) { コンソール.log(エラー); }); }}, 作成された() { var r = window.location.href; //現在のリンクを取得し、現在のリンクを分割します //現在のリンクアドレスは、バックグラウンドによって返されるパラメータです。分割されている場合は、リンク内のコードを取得し、postCode()メソッドを使用してopenidを取得します。openidがない場合は、wxLogin()メソッドを使用してWeChatログインを開始します if (r.indexOf("?") != -1) { r = r.split("?"); r = r[1].split("&"); r = r[0].split("="); r = r[1]; } それ以外 { この.wxLogin(); } もし(r){ this.postCode(r); } それ以外 { この.wxLogin(); } }, </スクリプト> 3. フロントエンドページの使用 'weixin-js-sdk' から wx をインポートします this.axios({ メソッド: 'post'、 URL: 'URL', data:{ url:location.href.split('#')[0] } // 認証 URL パラメータをサーバーに提供します。# の後の部分は不要です}).then((res)=>{ wx.config({ debug: true, // デバッグモードを有効にする, appId: res.appId, // 必須、企業番号の一意の ID、ここに企業番号の corpid を入力します timestamp: res.timestamp, // 必須、署名のタイムスタンプを生成します nonceStr: res.nonceStr, // 必須、署名のランダム文字列を生成します signature: res.signature, // 必須、署名、付録 1 を参照してください jsApiList: ['scanQRCode'] // 必須、使用する JS インターフェースのリスト、すべての JS インターフェースがリストされます}); }) これで、vue での weixin-js-sdk の一般的な使用方法についての記事は終了です。vue weixin-js-sdk の関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL マスタースレーブレプリケーション 読み書き分離の設定方法の詳細説明
>>: VMware 12 での Ubuntu 16.04 インストール チュートリアル
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...
この記事では、例を使用して、MySQL のデータベース間トランザクション XA 操作について説明しま...
私が使用している VMware Workstation Pro のバージョンは次のとおりです。 1....
目次テーブル定義の自動増分 ID InnoDBシステムはrow_idを自動的に増加させるシドInno...
1. GitLabの紹介Gitlab 公式アドレス: https://about.gitlab.co...
<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワ...
この記事では、例を使用して MySQL ユーザーと権限の管理について説明します。ご参考までに、詳細は...
mysql-5.7.20-winx64.zipインストール手順のないインストール パッケージ: ht...
序文:この記事では主にMySQLのロングトランザクションに関する内容を紹介します。例えば、トランザク...
上に示すように、ナビゲーションは上部に固定されており、左右にスライドしてさらにオプションをクリックで...
以下では、よく使われるヘッド構造と、各タグや要素の意味や使用シーンを紹介します(この記事は、Yisi...
Vueでは、ローカルコンポーネントを自分で定義(登録)することができます。コンポーネント名を定義する...
1. ダウンロードアドレスhttps://dev.mysql.com/downloads/mysql...
環境名前財産CPU 5650 円メモリ4Gディスク20G+4TB この時点で、サーバーにはすでに次の...
目次1. nginxのインストールと操作(Mac OS環境) 2. nginxルールの設定3. コマ...