Vue での weixin-js-sdk の一般的な使用方法の詳細な説明

Vue での weixin-js-sdk の一般的な使用方法の詳細な説明

リンク: 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js シンプルなネットワーク速度テスト方法の完全な例
  • Baidu と Google のスピードテストの JavaScript コードにアクセスする
  • JS 非同期コードユニットテストの魔法 Promise
  • ネイティブ js はフォームの定期的な検証を実装します (検証後にのみ送信)
  • JS での Reduce Fold Unfold の使用法の詳細な説明
  • JS WebSocketを使用して簡単なチャットを実装する方法
  • エレガントなJSコードの書き方
  • JSホモロジー戦略とCSRFの詳細な説明
  • JavaScript でネットワーク速度をテストする方法

<<:  MySQL マスタースレーブレプリケーション 読み書き分離の設定方法の詳細説明

>>:  VMware 12 での Ubuntu 16.04 インストール チュートリアル

推薦する

MySQL無料インストール版のパスワードの設定と変更に関するチュートリアル

ステップ 1: 環境変数を構成する (解凍パス: G:\mysql\mysql-5.7.21-win...

Ubuntu 20.04 ダブルピンイン入力方式のインストール手順

1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...

MySQL の結合インデックスと左端一致原則の詳細な説明

序文これまでインターネットでMySQLジョイントインデックスの最左接頭辞マッチングに関する記事をたく...

画像カルーセルを実装するためのネイティブJS 小さな広告プラグインを実装するためのJS

最近、ネイティブ JS を使用して、さらにいくつかの小さな機能を実装したいと思っています。現在、ブロ...

Javascript実践におけるコマンドモードの詳しい説明

目次意味構造例カスタムショートカットキー元に戻すとやり直し録音と再生マクロ要約する意味リクエストをオ...

VMWARE で Centos8 仮想マシンをコピーすることによって発生する IP 損失の問題の解決策

VMwareでcentos8サービスをインストールしてコピーすると、次の問題が発生します。 コピー前...

Vueはスクロールバースタイルを実装します

最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...

ネイティブ js が携帯電話のプルダウン更新を模倣

この記事では、携帯電話のプルダウンリフレッシュを模倣したjsの具体的なコードを参考までに共有します。...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

MySQLスローログに関する知識のまとめ

目次1. スローログの紹介2. スローログの練習1. スローログの紹介スロー ログの正式名称はスロー...

VUE レンダリング機能の使い方と詳細な説明

目次序文レンダリングの役割レンダリング機能の説明レンダリングとテンプレートの違いレンダリング例要約す...

Vue プロジェクトに Electron を追加するための詳細なコード

1. package.jsonに追加する "メイン": "electr...

ファイルをアップロードするための HTML フォームの「参照」ボタンを変更する方法

コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...

elementui の el-popover スタイルの変更が有効にならない問題の解決策

element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...

better-scrollプラグインのスライドできないバグについて(2021年プラグインで解決)

より良いスクロールの原則親コンテナーであるため、ラッパーの高さはコンテンツのサイズに応じて増加します...