vueにWeChat SDKインターフェースを導入する方法

この記事では、vue プロジェクトに WeChat SDK インターフェースを導入する方法を主に紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう

WeChat Web ページを構築するには、基本的に WeChat の SDK にアクセスする必要があります。私もそれを行っていたとき、将来自分で読むために記録したいと思いました。 、困っている友達に参考にしてもらいましょう、気に入ったらいいね、フォローしていただければ幸いです。

SDKをインストールします

npm install weixin-js-sdk --save

始める前に、WeChat公式アカウントのアクセスドキュメントを読むことができます。たとえば、WeChat共有機能にアクセスしたい場合は、共有機能が必要です。各ルーティング アドレス。はい、各ルートの URL が異なるため、Souyi は各ルーティング アドレスに URL を導入する必要があります。

全体的な手順:

vue が SDK を導入する場合、コードをルーティング コンポーネントとコンポーネントのライフ サイクルに配置します: creatd() と Mounted()。

疑似コードを使用して、プロセス全体と実行する必要がある内容を理解してください:

//wx是引入的微信sdk
 wx.config('这里有一些参数');//通过config接口注入权限验证配置
 
 wx.ready(function() { //通过ready接口处理成功验证
 // config信息验证成功后会执行ready方法
   wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用 
     title: '这里是标题', // 分享标题
     desc: 'This is a test!', // 分享描述
     link: '链接', // 分享链接
     imgUrl: '图片', // 分享图标
     type: '', // 分享类型,music、video或link，不填默认为link
     dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
     success: function() {
       // 用户确认分享后执行的回调函数
     },
     cancel: function() {
       // 用户取消分享后执行的回调函数
     }
     });
     wx.onMenuShareTimeline({ //分享朋友圈
     title: '标题', // 分享标题
     link: '链接',
     imgUrl: '图片', // 分享图标
     success: function() {
       // 用户确认分享后执行的回调函数
     },
     cancel: function() {
       // 用户取消分享后执行的回调函数
     }
   });
 });
 wxx.error(function(res){//通过error接口处理失败验证
   // config信息验证失败会执行error函数
 });

上記のプロセスを数回読んで、プロセス全体を理解してください。最も重要なステップは、を使用してアクセス許可を挿入することです。以下の言い訳。

Config インターフェース挿入許可

WeChat インターフェースにアクセスするための最も重要なステップは、次の情報を入力することです。情報を入力したら、基本的に準備完了です。次の情報は通常、バックエンド インターフェイスを通じて取得されます。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名，见附录1
  jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

構成設定情報を取得します:

フロントエンドで上記の情報を取得するには、特に何もする必要はなく、バックエンドインターフェイスを調整するだけです。バックエンドはその情報を処理し、インターフェイスを通じてこれらのパラメーターを返します。現在のルーティング ページの完全な URL をバックエンドに渡す必要があります。バックエンドは上記の情報を返します。後で、対応するインターフェイスを呼び出し、必要に応じてコンテンツをカスタマイズできます。

落とし穴: URL

ここで注意すべきは URL の問題です。URL が正しく渡されなかった場合、バックエンドも情報を返しますが、署名情報は間違ったものになります。

上記の完全な URL は、「http(s)://」部分と「?」を指します。 GET パラメータの ' 以降の部分ですが、ハッシュ '#' 以降の部分は含まれません。 location.href を通じて取得できます。

注: Vue プロジェクトとルーティングで履歴モードが有効になっていない場合、つまり URL に「#」が含まれている場合、バックエンドから署名を正しく取得するには、URL の # の後の文字を削除する必要があります。 (URL の '#' ハッシュ部分を削除し、location.href.split('#')[0] を使用します)

カプセル化呼び出し SDK インジェクション:

SDK はすべてのルーティング ページにインジェクトする必要があるため、これは繰り返し使用する必要があります。そうしないと、非常に多くのコードが膨大になってしまいます。

これが私がやったことです:

これは、axiosをレイヤーでラップし、main.jsのVueインスタンスにaxiosインターフェイスをマウントしたためです。

次に、グローバル関数でこのインターフェイスを呼び出し、各ルーティング ページの対応するコンポーネントでこの関数を呼び出し、現在のページの URL と他のタイトル、写真などを渡します。

具体的な手順については説明しません。最も重要なことは、関数内のすべてのプロセスもそのプロセスに基づいているということです。

署名の検証:

手順に問題がないことを繰り返し確認しても、WeChat SDKインジェクションがまだ署名に失敗する場合、この時点でバックエンドのアルゴリズムに問題があるかどうかを考慮する必要がありますとバックエンドを返すことができます。WeChat が提供する JS インターフェース署名検証ツールで生成された署名と比較してください。バックエンドのアルゴリズムに問題がある可能性があります。

二言目

正直に言うと、これを作るのは初めてで、経験がなく、とても時間がかかりました。 SDK の導入は難しくありません。重要なのは、構成情報を正しく入力し、残りは実際のニーズに応じて実行することです。

上記は私があなたのためにまとめたものです。

関連記事:

Web版電卓をJSで実装する方法

JSを使用してボールの放物線運動を実装する方法

JavaScriptを使用してバイナリツリートラバーサルを実装する方法

axios クロスドメインで Cookie を実装する方法

JavaScript で弾性効果を実現する方法

axios を使用して Ajax リクエストを実装する方法 (詳細なチュートリアル)

以上がvueにWeChat SDKインターフェースを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。