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

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

npm i amfe-flexible -S

npm と postcss-pxtorem -D

「amfe-flexible」をインポートする

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

npm i 正規化.css -S

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

npm と vant -S

# プラグインをインストールする 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';

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

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

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

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

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

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

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

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

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

npm と weixin-js-sdk -S

「weixin-js-sdk」からwxをインポートします。

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

 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 を参照してください。
        });

非同期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();
  },

Vue.prototype.$api = api

/**
     * @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(コード) {
      //バックグラウンドインターフェースを呼び出す},

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

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

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