最近のプロジェクトでは WeChat 共有が必要であり、WeChat 共有のコンテンツをカスタマイズする必要がありました。私は WeChat 共有を初めて使用したため、プロセス全体だけでなく、プロセス中に発生した問題の一部を記録しました。機能を完了すること。
一般的なプロセスは次のとおりです（詳細は各段階に記載されています）
npm install weixin-js-sdk --save-dev
具体的な手順については、WeChat 公式ドキュメントを参照してください。
2.WeChat共有を初期化する私が取り組んでいるプロジェクトの多くは WeChat 共有機能の使用を必要とするため、WeChat で共有されるコードはここにカプセル化されます。
以下のコードの API は実際には axios リクエストです
import wx from 'weixin-js-sdk'import api from '@/api'const wxApi = { /** * [wxRegister WeChat API 初期化] * @param {Function} callback [ready callback function] */ wxRegister (callback, url) { let query = { // ここでの URL は、共有したいページに正確に対応する URL である必要があり、base64 URL を変換する必要があります: url } api.getWxJsSdk(query).then(res => { let data = res.data wx.config({ debug: false, // デバッグ モードをオンにする appId: data.appId, // 必須。公式アカウントのタイムスタンプ: data.timestamp, // 必須、署名のタイムスタンプを生成します nonceStr: data.nonceStr, // 必須、署名のランダムな文字列を生成します 署名: data.signature, //必須、署名、付録 1 を参照 jsApiList: data.jsApiList // 必須、使用する必要がある JS インターフェースのリスト、すべての JS インターフェースのリストについては付録 2 を参照 }) }) wx.ready((res) => { // 必要に応じて、準備完了のコールバック メソッドをカスタマイズします if (callback) { callback() } }) },}注: 上記の Base64 を変換する必要がある場合は、js-base64 を使用できます。
3. カスタマイズされたコンテンツを共有するように WeChat を設定します (友人に送信、モーメントに送信)
2 番目のステップは WeChat のパッケージ化設定を初期化することですが、対応する共有機能やその他の機能がまだ不足しています。ここで改善しましょう。
//wxRegister 関数の後に /*** を追加 [ShareTimeline カスタム WeChat を Moments に共有]* @param {[タイプ]} オプション [情報を共有]* @param {[タイプ]} success [成功のコールバック]* @param {[ type]} error [失敗コールバック]*/ShareTimeline (オプション) {wx.updateTimelineShareData({ title: option.title, // 共有タイトル リンク: option.link, //リンクを共有 imgUrl: option.imgUrl, // アイコンを共有 success () { // 設定成功}, cancel () { // 設定失敗}})},/*** [ShareAppMessage カスタマイズされた WeChat の友人への共有]* @ param {[タイプ]} オプション [共有情報]* @param {[タイプ]} 成功 [成功のコールバック]* @param {[タイプ]} エラー [失敗のコールバック]*/ShareAppMessage (オプション) {wx.updateAppMessageShareData({ title: option.title, // 共有タイトル desc: option.desc, // 共有説明リンク: option.link, // 共有リンク imgUrl: option.imgUrl, // 共有アイコン成功 () { // 設定成功}, cancel () { // 設定失敗}})}4. ページを呼び出すとき
// vue を例として // 以下の関数パラメータについては、上記のメソッドを参照してください import wx from 'your encapsulated file' mount(){ letbase64 = require('js-base64').Base64 let url =base64. encode( window.location.href) wx.wxRegister(this.wxRegCallback,url)},methods:{ //カスタマイズされた jdk コールバック wxRegCallback () {}, // 友人と共有するためのカスタマイズされた関数 wxShareAppMessage(){ let option = { title:'', // タイトルの説明を共有: '', // 説明リンクを共有: ' ', //共有リンク imgUrl: '' // アイコンを共有 } // 一般メソッドを挿入します wx.ShareAppMessage(option) }, //友達に共有するためのカスタマイズされた関数 Circle wxShareTimeline(){ let option = { title:'',// 共有タイトル desc: '', // 共有説明リンク: '', // 共有リンク imgUrl: '' // 共有アイコン} // 一般メソッド wx.ShareTimeline(option) を挿入します }}以上がWeChatでの共有手順です。不備がございましたらご指摘ください。
注記：WeChat 共有は実際のデバイスでのみテストできます
localhost 形式を使用するドメイン名は WeChat 検証に合格できません
要約する上記は、編集者によって紹介された WeChat 共有とカスタム コンテンツの HTML5 実装です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。