微信公衆號開發--第一章 本地啓動前後端

微信公衆號開發–第一章 本地啓動前後端

一、本地開發環境

window電腦。
前端頁面展示：微信開發者工具。
前端：node6.11.3。npm3.10.10。開發工具WebStorm。
微信後端：jdk1.8.0。tomcat8.5.201。開發工具IDEA。
後臺：部署在linux服務器。微信後端通過拼接接口路徑訪問後臺。

二、項目簡介

本文依據的項目，分爲前端、微信後端、後臺。

前端

源碼文件結構：

​ main.js是vue項目的入口文件。"new Vue()“即實例化vue對象（此時的vue對象是對應整個項目）,在一個vue項目裏只會存在一句"new Vue()”，當"new Vue()"被執行時vue的生命就開始了。

​ routes.js是配置路由的，其中有代碼"{ path: ‘/’, redirect: ‘/home’}"，表明默認路徑是"/home"。

​ home.vue是本項目公衆號的首頁。

微信後端

源碼文件結構：

​ 微信後端，實現與微信第三方交互，接收前端入參傳參至後臺，接收後臺接口返回結果並傳給前端。實際上微信後端，也可以算進後臺裏，和後臺的工程一樣，都是基於SSM+Maven的項目。只是微信後端，一般不處理業務問題，所以叫做後端以示區分。

後臺

​ 源碼文件結構：工程包文件結構與微信後端相似。由多個工程包組成。不同的工程包負責實現不同範圍的業務功能。

三、配置

本地域名

在C:\Windows\System32\drivers\etc的host文件裏，加個本地域名。

授權回調頁面域名

在https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index裏，設置授權回調頁面域名，要與本地域名相同。端口號，要看前端的index.js裏port寫得多少就是多少。

前端網頁授權

在前端的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中run項目後端；
3. WebStrom中run項目前端；
4. 微信開發者工具中，輸入超鏈接local.test.com:8989;
5. 隨即可看見獲取用戶信息接口被調用；

具體細節

本地啓動nginx、redis。

微信後端

debug xzshh


啓動的Application context，要與前端index.js的proxyTable中的相同。

proxyTable: {
  '/xzshh': {
    target: 'http://bala.bala.bala.bala:8080',,
    changeOrigin: true,
    pathRewrite: {
      '^/xzshh': '/xzshh'
    }
  }
 
//bala.bala.bala.bala爲本地電腦的ip

可以在獲取用戶信息接口處，打個斷點。

前端

run dev

微信開發者頁面

輸入local.test.com:8989，

點擊同意，