Vue でモバイル WeChat パブリック アカウントを実装する手順の詳細な説明

今回は、Vue でモバイル WeChat 公式アカウントを実装する手順について詳しく説明します。Vue でモバイル WeChat 公式アカウントを実装するための注意事項 について、実際のケースを見てみましょう。

私はしばらく Vue を使用して WeChat パブリック アカウント プロジェクトを行ってきましたが、あらゆる種類の奇妙な問題に遭遇しました。ここに落とし穴があります:

最初の落とし穴: WeChat 共有により Android スマートフォンが開けなくなります。フォトアルバムを開くことができず、WeChat リチャージを開くことができません

解決策:

setTimeout(_ => {
      wx.config(sdkConfig)
     }, 500)

は、WeChat 共有を 500 ミリ秒遅らせる必要があります。これにより、WeChat 共有が使用されている場合に、Android スマートフォンでフォト アルバムを呼び出したり、WeChat リチャージを行うことができない問題が解決されます。遅延を追加する必要があります。

2 番目の穴: 携帯電話での一部のサードパーティの入力方法は、オンラインでページを圧迫します

解決策:

// 特定需求页面，比如评论页面，输入框在顶部之类的
const interval = setInterval(function() {
  document.body.scrollTop = 0;
}, 100)
// 注意关闭页面或者销毁组件的时候记得清空定时器
clearInterval(interval);

3 番目の穴: 一部の地域では、モバイル 4Gpost の送信が応答しません

vue プロジェクトでは、Axios がインターフェイスをカプセル化しています。このプロジェクトでは、常に一部の領域からのリクエストがありますが、応答がありません。重要なのは、この状況は個々のユーザーに対してのみ発生するということです。記事は後ほどhttps://itbilu.com/javascript/js/VkiXuUcC.htmlで紹介しますこれらのリクエストは、これ以上の説明はせずに、直接コードに移動します

解決策:

import axios from 'axios'
import qs from 'qs'
service.interceptors.request.use(
 config => {
 if(config.method === 'post'){
  config.data = qs.stringify(config.data)
 }
 return config
},
 error => {
  console.log(error)
  Promise.reject(error)
 }
)

プロジェクトは数カ月にわたって進捗を報告してきたのですが、本当に投稿する時間がないので、実際に遭遇した落とし穴については今後も投稿していきたいと思います。 。 。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS デザイン パターンでのチェーン呼び出しの使用の分析

vue-cli プロジェクトにバックグラウンド モック インターフェイスを追加する手順の詳細な説明

以上がVue でモバイル WeChat パブリック アカウントを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。