微信公众号开发–第一章 本地启动前后端

一、本地开发环境

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，

点击同意，

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