プロジェクトの背景主に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 で検索してみてください。
npm i amfe-flexible -S
npm と postcss-pxtorem -D
「amfe-flexible」をインポートする
プロジェクトに 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 ライブラリです。巨人の肩の上に立っているので、効率はもちろんはるかに高速です。このようなサードパーティのライブラリはあくまでも基礎としてのみ機能し、デザイン案がある場合はスタイルをカスタマイズする必要があります。シンプルなスタイルはテーマのカスタマイズをサポートしており、非常に便利です。一部のスタイルがカスタムテーマを提供していない場合は、それをカバーするスタイルのみを記述できます。
npm と vant -S
方法 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 つの方法がサポートされています。 必要に応じてスタイルをインポートする (推奨) モジュール.エクスポート = { プラグイン: [ [ '輸入'、 { ライブラリ名: '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パッケージを使うことです
npm と weixin-js-sdk -S
「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の登録ロジックを記述します。
非同期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 のみが必要です。
/** * @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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: mysql 3つのテーブルを接続してビューを作成する
>>: MySQL における単一テーブルと複数テーブル、およびビューと一時テーブルに対する Update と Select の違い
目次1. 基本概念1.1 2種類のピクセル1.2 3つのビューポート2. ビューポート設定3. 1回...
<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...
1. 新機能MySQL 5.7 はエキサイティングなマイルストーンです。デフォルトの InnoDB ...
目次vuex 永続性要約するvuex 永続性vuex: ブラウザを更新すると、vuexの状態は初期状...
ハイパーリンク <a> タグはリンク ポイントを表します。これは英語の単語「anchor...
最近、Textrea に転送したときに、データが本当に行ごとに保存できるかどうかという問題に遭遇しま...
序文:最近、プロジェクトで管理システムに遭遇しました。権限設定が非常に興味深いと思いました。自分の学...
1. MySQLデータベースをインストールする① ダウンロードして解凍し、/opt/softディレク...
目次1. 概要1.1 定義1.2 機能説明2. ELKを展開する2.1 ディレクトリとファイルを作成...
1. 公式サイトにアクセスしてインストールパッケージをダウンロードしますダウンロードリンク: クリッ...
使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...
インターネット上には、expect を使用して自動ログインを実現するスクリプトが多数存在しますが、明...
両側に隙間なし、各列間に隙間あり 幅: 100%; 表示: グリッド; グリッドテンプレート列: r...
CSS カウンター属性はほぼすべてのブラウザ (IE8 を含む) でサポートされていますが、あまり使...
MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...