vue 微信业务
一、 安装文件
- node: 下载地址 https://nodejs.org/zh-cn/
- cnpm: http://npm.taobao.org/
- vue: 安装见官方文档
二、调试工具:微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
二、编码工具 + 插件
- vsCode
插件:
- vetur: 语法支持
- vue: 语法高亮
- vue VSCode Snippets: 语法提示
三、测试公众号
-
注册 & 查看 appID, appsecret :
https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
关注该公众号(预览手机效果用) -
文档:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141013
注: 记得开通访问 用户信息 权限(配置唯一访问域名), 如图:
-
获取 token & 自定义菜单:
https://mp.weixin.qq.com/debug/
注: 先获取 token 再 设置 菜单:{ "button": [ { "type": "view", "name": "首页", "url": "http://niudan.ngrok.xiaomiqiu.cn" } ] }
四、服务搭建
-
git bash | | vscode 内部启动 vue 公众号项目 端口 8080
-
IDEA 启动后台服务,端口 8090
-
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; } }
-
将本地 8111 访问转为 域名 , 用于 公众号 接口访问配置唯一域名
1. 代理一个随机域名:ngrok , 下载网址: http://ngrok.ciqiuwl.cn/ 2. 代理到个人购买的域名: 端口代理 (具体操作可以询问公司运维人员或自己查资料)
五、项目需要修改的地方(需要查看具体的业务文档结构)
-
前端文件:
utils/wechatUtil.js 修改 appID & appsecret 你的
utils/config.js 修改 serverUrl 你的 -
后端文件:
main/resources/config/config.properties 修改 appID & appsecret 你的 -
测试公众号:
JS接口安全域名修改 你的