公众号--------链接

vue 微信业务

一、 安装文件

1. node: 下载地址 https://nodejs.org/zh-cn/
2. cnpm: http://npm.taobao.org/
3. vue: 安装见官方文档

二、调试工具：微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

二、编码工具 + 插件

1. vsCode
   插件：
   - vetur: 语法支持
   - vue: 语法高亮
   - vue VSCode Snippets: 语法提示

三、测试公众号

1. 注册 & 查看 appID, appsecret ：
   https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
   关注该公众号（预览手机效果用）

2. 文档：
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141013
   注： 记得开通访问 用户信息 权限（配置唯一访问域名）, 如图：
   

3. 获取 token & 自定义菜单:
   https://mp.weixin.qq.com/debug/
   注： 先获取 token 再 设置 菜单:

    {
     "button": [
         {
           "type": "view", 
           "name": "首页", 
           "url": "http://niudan.ngrok.xiaomiqiu.cn"
         }
     ]
   }
   

四、服务搭建

1. git bash | | vscode 内部启动 vue 公众号项目 端口 8080

2. IDEA 启动后台服务，端口 8090

3. nginx 配置， 跨域转同域下

   server {
     listen       8111;
      server_name  _;
   
      location / {
          proxy_pass http://127.0.0.1:8080/;  #前端 vue 服务
      }
   
   
      location /service {
      	proxy_redirect    off;
          proxy_set_header  Host $host:8111;
          proxy_pass http://127.0.0.1:8090/service;  #后台项目服务
      }
   
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
   }
   

4. 将本地 8111 访问转为 域名 , 用于 公众号 接口访问配置唯一域名

   1. 代理一个随机域名：ngrok ， 下载网址： http://ngrok.ciqiuwl.cn/
   2. 代理到个人购买的域名:  端口代理 (具体操作可以询问公司运维人员或自己查资料) 
   

五、项目需要修改的地方(需要查看具体的业务文档结构)

1. 前端文件：
   utils/wechatUtil.js 修改 appID & appsecret 你的
   utils/config.js 修改 serverUrl 你的

2. 后端文件：
   main/resources/config/config.properties 修改 appID & appsecret 你的

3. 测试公众号:
   JS接口安全域名修改 你的