公共のマイクロチャネル番号の開発 - 第一章ローカル端の開始前と後

公共のマイクロチャネル番号の開発 - 第一章ローカル端の開始前と後

ローカルの開発環境

ウィンドウのコンピュータ。
フロントページショー：マイクロチャネルの開発ツール。
フロントエンド：node6.11.3。npm3.10.10。開発ツールWebStorm。
マイクロチャネルリア：jdk1.8.0。tomcat8.5.201。開発ツールIDEA。
背景：デプロイLinuxサーバ。スプライスインタフェース経路の後端部を介して背景マイクロチャネルアクセス。

IIプロジェクト

この記事は、プロジェクトに基づいて、フロントエンド、バックエンドのマイクロ文字、背景に分かれています。

フロント

ソースファイル構造：main.jsエントリファイルVUEプロジェクトです。「新しいヴュー（）」VUEすなわち、「新しいヴュー（）は」VUEを実行する「新しいヴュー（）」、唯一のVUEプロジェクトの存在下で、（プロジェクトVUEあるオブジェクト全体に、この場合の対応に）オブジェクトをインスタンス化生活が始まります。

routes.jsが「{ 『/』、パスコードを有する経路に配置されているリダイレクト『/家を』}」、 デフォルトパスは「/ホーム」であることを示しています。

home.vueは、公共のプロジェクト番号の家です。

マイクロチャネルの後端

ソースファイルの構造：

リアマイクロチャネルを有するマイクロ相互作用は、背景への参照を渡すフロントエンドパラメータを受け取り、第三者を信頼できる、受信インタフェースは戻さおよび遠位端結果に渡されました。実際には、バックエンドのマイクロチャネルはまた、SSM + Mavenのベースのプロジェクトである、背景、及びプロジェクトの背景にカウントすることができます。唯一の後端マイクロチャネルは、その区別を示すために、後端部と呼ばれる、トラフィックの一般的な問題に対処しません。

楽屋

ソースファイルの構造：エンジニアリングパッケージのファイル構造とバックエンドに似たマイクロチャンネル。エンジニアリングの複数のパッケージ。異なるエンジニアリングパッケージには、さまざまなビジネス機能の範囲を実装するための責任があります。

第三に、コンフィギュレーション

本地域名

Cで：\ WINDOWS \ System32に\ drivers \ etcにホストファイルの、ローカルドメイン名を追加します。

認証コールバックページのドメイン

でhttps://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index、同じローカルドメインにページのコールバック認証ドメイン名を設定します。ポート番号、ポートに書かれているどのくらいの前端のindex.js表情。

フロントページの承認

認可home.vueの前でページを設定し、

let fromurl = location.href

let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbalabala&response_type=code&scope=snsapi_userinfo&state=STATE&redirect_uri=' + fromurl + '&#wechat_redirect';

//appid=wxbalabala，取值于测试账号信息里appID的值

テストマイクロチャンネル番号情報の後端

バックエンドの設定ファイルで、

#测试号的appid、appsecret
wechat.appid=wxbalabala
wechat.appsecret=balabala

第四に、スタート

一般的なプロセス

1. ローカルスタートnginxの、Redisの。
2. IDEAプロジェクトは、バックエンドで実行されます。
3. WebStromプロジェクトのフロントエンドで実行されます。
4. マイクロ手紙開発ツールは、ハイパーリンクlocal.test.com:8989を入力してください。
5. ユーザ情報インターフェイスが呼び出されるため、すぐに目に見えます。

具体的な詳細

ローカルスタートnginxの、Redisの。

マイクロチャネルの後端

デバッグxzshhは、


フロントエンドで同じproxyTable index.jsに、アプリケーションコンテキストを開始します。

proxyTable: {
  '/xzshh': {
    target: 'http://bala.bala.bala.bala:8080',,
    changeOrigin: true,
    pathRewrite: {
      '^/xzshh': '/xzshh'
    }
  }
 
//bala.bala.bala.bala为本地电脑的ip

ユーザーは休憩を作るために、情報のインターフェースを取得することができます。

フロント

実行DEV

マイクロチャネルの開発者のページ

local.test.com:8989を入力し、

同意をクリックして、

   你好呀，网友。这是我第一次写博客，有错误或问题欢迎评论，必回。这周内会上传第二章 ，内容有关与微信第三方的交互和获取用户信息接口逻辑。