Vue を使用してパブリック アカウントの Web ページを開発する方法

Vue を使用してパブリック アカウントの Web ページを開発する方法

プロジェクトの背景

主にh5ページであり、含まれる機能はそれほど難しくありません。主な理由は、長い間パブリックアカウントを開発していないため、開発手順全体に少し不慣れなことです。これには、WeChat SDK の呼び出し方法、ユーザーの WeChat 認証、SDK アクセスなどが含まれます。主に開発手順について。

始める

h5ページなのでプロジェクト全体としては大きくはないので、プロジェクト技術の選定ではvueフレームワークを使って開発することにしました。 vue を使用して h5 を開発すると、全体的な効率が比較的高いと個人的に感じます。 UI ライブラリには、vant ライブラリを選択しました。コンポーネントは全体的に優れています。カスタム テーマをサポートし、スタイルのカスタマイズを容易にするため、h5 開発に適しています。

vue-cliでプロジェクトを作成する

足場ツールの設置

npm インストール -g @vue/cli
# または
糸グローバル追加 @vue/cli

プロジェクトを作成する

vue で water_project を作成します

次にプロジェクトディレクトリを作成します

。
├── README.md
├── babel.config.js
├──jsconfig.json
├── package-lock.json
├── package.json
├── 公開
│ ├── favicon.ico
│ └── 索引.html
├── 出典
│ ├── App.vue
│ ├── アピ
│ ├── 資産
│ ├── コンポーネント
│ ├── グローバル.less
│ ├── main.js
│ ├── モック
│ ├── ルーター
│ ├── ストア
│ ├── ユーティリティ
│ └── ビュー
└── vue.config.js

モバイル適応について

モバイル Web ページなので、適応させる必要があります。インターネット上には多くの適応ソリューションがありますが、ここでは詳しく説明しません。重要な点は、このプロジェクトで使用されているソリューションは、amfe-flexible と、Taobao のソリューションである rem を組み合わせることであるということです。デザイン案のpx単位からrem単位への変換については、postcssのpostcss-pxtoremソリューションを使用します。実は、webpack のローダーを使うことも可能です。具体的な解決策については、Baidu で検索してみてください。

  • amfe-flexibleパッケージをインストールする
npm i amfe-flexible -S
  • postcss-pxtoremプラグインをインストールする
npm と postcss-pxtorem -D
  • main.js に amfe-flexible を導入する
「amfe-flexible」をインポートする
  • vue.config.jsでpostcssプラグインを設定する

プロジェクトに vue.config.js ファイルがない場合、手動で作成します。これは vue cli の設定ファイルです。

css: {
    ローダーオプション: {
      ポストcss: {
        プラグイン: [
          自動プレフィックス()、
          pxtorem({
            ルート値: 37.5,
            プロパティリスト: ["*"],
          })、
        ]、
      },
  },

この時点でスタイルの適応は完了です。rootValueが37.5である理由としては、主にvantの適応のためであり、デザイン案では375pxを参考にしています。サードパーティの UI ライブラリを使用しない場合は、デザイン案の参照として 750 を使用でき、rootValue は 75 になります。

normalize.css の使用

normalize.cssを使用してブラウザ間の基本的なスタイルの違いを排除します

npm i 正規化.css -S

main.js にインポートする

「normalize.css」をインポートします

ヴァントライブラリへのアクセス

Vant は Youzan が制作した UI ライブラリです。巨人の肩の上に立っているので、効率はもちろんはるかに高速です。このようなサードパーティのライブラリはあくまでも基礎としてのみ機能し、デザイン案がある場合はスタイルをカスタマイズする必要があります。シンプルなスタイルはテーマのカスタマイズをサポートしており、非常に便利です。一部のスタイルがカスタムテーマを提供していない場合は、それをカバーするスタイルのみを記述できます。

  • vantをダウンロードしてインストールする
npm と vant -S
  • コンポーネントの導入方法は3つあり、公式サイトでも紹介されています。詳しくは公式サイトをご確認ください。使い方を簡単に紹介します。

方法 1. 必要に応じてコンポーネントを自動的にインポートする (推奨)

babel-plugin-import は、コンパイル時にインポート ステートメントをオンデマンド インポート ステートメントに自動的に変換する babel プラグインです。

# プラグインをインストールする npm i babel-plugin-import -D
// .babelrc に設定を追加します // 注意: webpack 1 では libraryDirectory を設定する必要はありません
{
  「プラグイン」: [
    ["輸入"、 {
      "libraryName": "vant",
      "ライブラリディレクトリ": "es",
      "スタイル": 真
    }]
  ]
}

// babel7 を使用しているユーザーの場合は、module.exports = { を設定できます。
  プラグイン: [
    ['輸入'、 {
      ライブラリ名: 'vant',
      ライブラリディレクトリ: 'es',
      スタイル: true
    }, 'ヴァント']
  ]
};
// 次に、コードに Vant コンポーネントを直接インポートできます // プラグインは、メソッド 2 でコードをオンデマンド インポート フォームに自動的に変換します import { Button } from 'vant';

方法2: 必要に応じてコンポーネントを手動でインポートする

プラグインを使用せずに、必要なコンポーネントを手動でインポートできます。

'vant/lib/button' から Button をインポートします。
'vant/lib/button/style' をインポートします。

方法3. すべてのコンポーネントをインポートする

Vant は、すべてのコンポーネントを一度にインポートすることをサポートしています。すべてのコンポーネントを導入するとコード パッケージのサイズが大きくなるため、この方法はお勧めしません。

'vue' から Vue をインポートします。
'vant' から Vant をインポートします。
'vant/lib/index.css' をインポートします。

Vue.js のインスタンスを Vant インスタンスにバインドします。

ヒント: オンデマンド インポートを構成すると、すべてのコンポーネントを直接インポートできなくなります。

Vantテーマをカスタマイズ

ステップ1: スタイルソースファイルをインポートする

テーマをカスタマイズする場合、コンポーネントに対応する Less スタイル ファイルをインポートする必要があります。オンデマンド インポートと手動インポートの 2 つの方法がサポートされています。

必要に応じてスタイルをインポートする (推奨)
babel.config.js でスタイル ソース ファイルのオンデマンド インポートを構成します。babel6 はスタイルのオンデマンド インポートをサポートしていないことに注意してください。スタイルは手動でインポートしてください。

モジュール.エクスポート = {
  プラグイン: [
    [
      '輸入'、
      {
        ライブラリ名: 'vant',
        ライブラリディレクトリ: 'es',
        //スタイルパスを指定する style: (name) => `${name}/style/less`,
      },
      「ヴァント」、
    ]、
  ]、
};

手動でスタイルをインポートする

// すべてのスタイルをインポートします import 'vant/lib/index.less';

// 単一のコンポーネント スタイルをインポートします。 import 'vant/lib/button/style/less';

ステップ2: スタイル変数を変更する

変数を変更するには、Less が提供する modifyVars を使用します。以下は、参照用の webpack 構成です。

// webpack.config.js
モジュール.エクスポート = {
  ルール:
    {
      テスト: /\.less$/,
      使用: [
        // ...その他のローダー構成 {
          ローダー: 'less-loader'、
          オプション:
            // less-loader のバージョンが 6.0 未満の場合は、lessOptions レベルを削除し、オプションを直接設定してください。
            より少ないオプション: {
              変数の変更: {
                // 変数 'text-color': '#111' を直接上書きします。
                '境界線の色': '#eee',
                // または、less ファイルで上書きすることもできます (ファイル パスは絶対パスです)
                ハック: `true; @import "your-less-file-path.less";`,
              },
            },
          },
        },
      ]、
    },
  ]、
};

プロジェクトが vue-cli によってビルドされる場合は、vue.config.js で設定できます。

// vue.config.js
モジュール.エクスポート = {
  css: {
    ローダーオプション: {
      少ない: {
        // less-loader のバージョンが 6.0 未満の場合は、lessOptions レベルを削除し、オプションを直接設定してください。
        より少ないオプション: {
          変数の変更: {
            // 変数 'text-color': '#111' を直接上書きします。
            '境界線の色': '#eee',
            // または、less ファイルで上書きすることもできます (ファイル パスは絶対パスです)
            ハック: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

WeChat jssdk の紹介

jsssdk を導入する方法は 2 つあります。1 つは js リンクを使用して直接導入し、index.html に記述する方法です。

 <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

次に、SDK によって提供されるメソッドを使用するために使用する window.wx.xxx を呼び出します。

2番目の方法はnpmパッケージを使うことです

  • weixin-js-sdkをインストールする
npm と weixin-js-sdk -S
  • main.js での使用
「weixin-js-sdk」からwxをインポートします。

// 簡単に使用できるように vue のプロトタイプを使用します Vue.prototype.$wx = wx;

導入後、 this.$wx.xx を使用して対応するメソッドを使用できます。例:

 this.$wx.config({
          debug: false, // デバッグ モードをオンにすると、すべての API 呼び出しの戻り値がクライアント側で警告されます。受信パラメータを表示する場合は、PC 側で開くことができます。パラメータ情報はログを通じて出力され、PC 側でのみ出力されます。
          appId: res.data.appId, // 必須、パブリック アカウントの一意の識別子 timestamp: String(res.data.timestamp), // 必須、署名を生成するためのタイムスタンプ nonceStr: String(res.data.nonceStr), // 必須、署名を生成するためのランダム文字列 signature: res.data.signature, // 必須、署名、付録 1 を参照
          jsApiList: [
            "ネットワークタイプを取得",
            「位置情報を取得」
          ], // 必須、使用する JS インターフェースのリスト。すべての JS インターフェースのリストについては付録 2 を参照してください。
        });

SDKを登録して検証した後でのみAPIを使用できます

実際、登録の重要なロジックはすべてバックエンドにあり、構成情報を取得するためのインターフェースを提供し、フロントエンドは SDK の config メソッドを直接呼び出して登録します。ここで、app.vueファイルにSDKの登録ロジックを記述します。

  • SDKを登録するメソッドをカプセル化する
非同期getWxJssdkConf() {
      const res = this.$api.getSdkConfig({
        url: window.location.href.split("#")[0],
      });
      (res.成功)の場合{
        this.$wx.config({
          debug: false, // デバッグ モードをオンにすると、すべての API 呼び出しの戻り値がクライアント側で警告されます。受信パラメータを表示する場合は、PC 側で開くことができます。パラメータ情報はログを通じて出力され、PC 側でのみ出力されます。
          appId: res.data.appId, // 必須、パブリック アカウントの一意の識別子 timestamp: String(res.data.timestamp), // 必須、署名を生成するためのタイムスタンプ nonceStr: String(res.data.nonceStr), // 必須、署名を生成するためのランダム文字列 signature: res.data.signature, // 必須、署名、付録 1 を参照
          jsApiList: [
            "ネットワークタイプを取得",
            「位置情報を取得」
          ], // 必須、使用する JS インターフェースのリスト。すべての JS インターフェースのリストについては付録 2 を参照してください。
        });
        this.$wx.ready(() => {
          this.$wx.checkJsApi({
            jsApiList: ["getNetworkType", "getLocation"], // 検出する必要がある JS インターフェースのリスト。すべての JS インターフェースのリストについては、付録 2 を参照してください。
            成功: 関数 (res) {
              console.log("checkJsApi", res);
            },
          });
        });
        this.$wx.error((res) => {
          console.log("wx.error", res);
        });
      }
    },
作成された() {
    this.getWxJssdkConf();
  },

このうち、 this.$api.getSdkConfig はバックグラウンドを呼び出すためのインターフェースです。ここでは vue のプロトタイプにも api が実装されており、各ページに api を導入しなくても使えるので便利です。

Vue.prototype.$api = api

app.vue への登録が完了すると、SDK の API が使用できるようになります。

WeChat認証

ユーザー情報を取得する場合は、ユーザーに許可を求める必要があります。認証の際には、WeChat が提供するインターフェースが使用されます。詳細はこちらをご覧ください。ユーザーの openid のみを取得したい場合は、サイレント認証のみを使用し、ユーザーが能動的に認証する必要はありません。詳細についてはドキュメントを参照してください。ここでは、次のようにサイレント認証を使用するために openid のみが必要です。

  • ホームページなど、認証が必要なメインエントランスで使用します。まず、WeChatインターフェースを呼び出してコードを取得し、そのコードを使用してバックエンドでopenidに交換します。
/**
     * @description: 認証コードを取得する
     * @パラメータ {*}
     * @戻る {*}
     */
    取得コード() {
      // window.location.href からコードを抽出し、値を割り当てます // window.location.href.split('#')[0]
      (window.location.href.indexOf("state") !== -1 の場合) {
        this.code = qs.parse(
          ウィンドウ.location.href.split("#")[0].split("?")[1]
        )。コード;
      } 
      
      if (このコード) {
          // インターフェイスを直接呼び出すコードが存在します this.handGetUserInfo(this.code);
        } それ以外 {
          このハンドログイン();
        }
    },
    /**
     * @description: ユーザー認証ログインを取得する* @param {*}
     * @戻る {*}
     */
    ハンドログイン() {
      // アドレスを現在のページにリダイレクトし、パス内のコードを取得します
      定数 hrefUrl = window.location.href;

      if (this.code === "") {
        ウィンドウの場所を置き換える(`
		https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX
                           &redirect_uri=${encodeURIComponent(hrefUrl)}
                           &response_type=コード
                           &スコープ=snsapi_base
                           &state=h5#wechat_redirect`);
      }
    },
    /**
     * @description: ユーザー情報を取得する* @param {*} code
     * @戻る {*}
     */
    handGetUserInfo(コード) {
      //バックグラウンドインターフェースを呼び出す},

これが承認の主なロジックであり、基本的には問題なく機能します。

切断プロンプト

ユーザーのネットワークが切断された場合、ネットワーク切断プロンプト ページにジャンプします。メインで利用するのはHTMLで提供されているメソッドです。判定ロジックはapp.vueファイルに記述します。各ページにはプロンプトが表示されるので、メインエントランスで直接処理します。

マウント() {
    window.addEventListener("オンライン"、this.updateOnlineStatus);
    window.addEventListener("オフライン", this.updateOnlineStatus);
  },
  
 メソッド: {
 		オンラインステータスの更新(e) {
      定数{型} = e;
      console.log("type===============", タイプ);
      this.onLine = type === "オンライン";
    },
 }
 破棄する前に() {
    window.removeEventListener("オンライン"、this.updateOnlineStatus);
    window.removeEventListener("オフライン", this.updateOnlineStatus);
  },

これはユーザーのネットワーク接続を確認する主な方法です

WeChatで開かれたウェブページかどうかを判断する

vue-routerのナビゲーションガードは、主にブラウザを判断するためにここで使用されます。WeChatの組み込みブラウザでない場合は、異常なプロンプトページに直接ジャンプします。

router.beforeEach((to, from, next) => {
  定数 ua = navigator.userAgent.toLowerCase();
  もし (
    to.path !== "/notwx" &&
    !(ua.match(/MicroMessenger/i) == "マイクロメッセンジャー")
  ){
    次へ("/notwx");
  } それ以外 {
    次();
  }
});

ページにジャンプすると、そのページのスクロールの高さが前のページのスクロールの高さのままになることがあります。この問題もナビゲーション ガードで解決され、自動的に一番上までスクロールします。

ルータ.afterEach(() => {
  ウィンドウを0から0にスクロールします。
});

まとめ

この時点では、開発プロセス全体が簡単に記録されており、これは私自身の開発のレビューでもあり、将来の参照にも便利です。この記事がお役に立てば幸いです。これはあくまでも私の個人的な意見です。ご質問があればお知らせください。役に立ったと思われた方は、ぜひ高評価を付けてください。ありがとうございます。

上記は、vue を使用してパブリック アカウント Web ページを開発する方法の詳細です。パブリック アカウント Web ページの vue 開発の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue WeChat 公式アカウント Web 共有サンプルコード
  • Vue を使用して WeChat パブリック アカウント Web ページを完成させる (推奨)
  • vueを使用してh5パブリックアカウントジャンプアプレットの実装コードを記述します
  • VueでHTML5 WeChatパブリックアカウントを開発する手順
  • Vue で WeChat パブリック アカウント js-sdk を使用する際の落とし穴
  • VueプロジェクトでWeChat公式アカウント決済を使用する方法と遭遇した落とし穴の概要
  • Vue.js で WeChat パブリック アカウント メニュー エディター機能を実装する (パート 2)
  • Vue.js は WeChat パブリック アカウント メニュー エディター機能を実装します (I)
  • VueがモバイルWeChatパブリックアカウントのピット体験記録を樹立
  • Vue WeChatパブリックアカウント開発の落とし穴の詳細な説明
  • Vue.js+Vuex を使用して WeChat パブリック アカウントを収集するアプリを作成する方法

<<:  mysql 3つのテーブルを接続してビューを作成する

>>:  MySQL における単一テーブルと複数テーブル、およびビューと一時テーブルに対する Update と Select の違い

推薦する

モバイル端末におけるビューポートの具体的な使用法についての簡単な説明

目次1. 基本概念1.1 2種類のピクセル1.2 3つのビューポート2. ビューポート設定3. 1回...

デザイン理論: コンテンツプレゼンテーションのための 10 のヒント

<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...

CentOS 6.5 インストール mysql5.7 チュートリアル

1. 新機能MySQL 5.7 はエキサイティングなマイルストーンです。デフォルトの InnoDB ...

vueの実践的な応用におけるvuexの永続性の詳細な説明

目次vuex 永続性要約するvuex 永続性vuex: ブラウザを更新すると、vuexの状態は初期状...

HTMLハイパーリンクタグAのTARGET属性の詳細な説明

ハイパーリンク <a> タグはリンク ポイントを表します。これは英語の単語「anchor...

HTML のテキストエリアの改行問題の概要

最近、Textrea に転送したときに、データが本当に行ごとに保存できるかどうかという問題に遭遇しま...

Vue要素のバックグラウンド認証プロセスの分析

序文:最近、プロジェクトで管理システムに遭遇しました。権限設定が非常に興味深いと思いました。自分の学...

Linux 上での MySQL データベースのインストールと Java プロジェクトの構成に関する詳細なグラフィック説明

1. MySQLデータベースをインストールする① ダウンロードして解凍し、/opt/softディレク...

Docker Compose を使用して ELK を迅速にデプロイする (テスト済みで効果的)

目次1. 概要1.1 定義1.2 機能説明2. ELKを展開する2.1 ディレクトリとファイルを作成...

Linux での MySQL 8.0.11 のインストールに関するチュートリアル

1. 公式サイトにアクセスしてインストールパッケージをダウンロードしますダウンロードリンク: クリッ...

ReactでuseStateを使用する詳細な例

使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...

Linux自動ログイン例の説明

インターネット上には、expect を使用して自動ログインを実現するスクリプトが多数存在しますが、明...

グリッド共通レイアウトの実装

両側に隙間なし、各列間に隙間あり 幅: 100%; 表示: グリッド; グリッドテンプレート列: r...

CSSカウンター関連属性の学習の詳細な説明

CSS カウンター属性はほぼすべてのブラウザ (IE8 を含む) でサポートされていますが、あまり使...

MySQLのMERGEストレージエンジンの詳細な説明

MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...