#公众号 #微信H5开发

流程（SpringBoot、Vue3）

面向过程写法

准备工具与环境：

JDK1.8
Node16
IDEA
WebStorm(VS Code也可)
Docker(容器：Nginx)
ngrok(内网穿透）

方式：

使用官方的包进行开发后端（需要自己一个个搭建，比较麻烦点）

https://github.com/Wechat-Group/WxJava
使用别人写好的springboot模板快速开发后端

 https://github.com/binarywang/weixin-java-mp-demo

我使用了第二种方式

配置服务

申请公众号(个人订阅号)→申请测试号→配置服务器地址信息等

测试号信息官方给我们的
接口配置信息的配置流程

先将Springboot配置好测试号的信息

其中com.github.binarywang.demo.wx.mp.controller.WxPortalController#authGet，微信那边实际请求到我们这个地址(get请求做身份验证，post请求做交互作用)

配置http://域名/api/wx/portal/{appid} 和 Token 即可
域名如何生成

ngork内网穿透而来，映射的是docker里面到nginx容器，docker如何跑Nginx，google一下就行

主要配置个挂载Mounts，使得每次本地前端项目打包后就可以在手机上直接看到最新的页面情况

# user  nobody;
worker_processes  4;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    autoindex on;  # 开启目录文件列表
    autoindex_exact_size on;  # 显示出文件的确切大小，单位是bytes
    autoindex_localtime on;  # 显示的文件时间为文件的服务器时间
    charset utf-8,gbk,gb2312;  # 避免中文乱码
    gzip  on;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri $uri/ /index.html;  
        }
        location /assets/{
            alias  /usr/share/nginx/html/assets/;
        }
        location ^~ /api/{
            proxy_pass <http://192.168.1.8:9088/>; #SpringBoot服务
        }
    }

}

可以看到里面配置了个方向代理，代理到我们本地到SpringBoot服务，所以接口配置的URL实际访问http://域名/api/wx/portal/{appid} => http:192.168.1.8:9088/wx/portal/{appid}

JS安全域名配置ngork提供给我们的域名就行

开发

获取access_token(公众号开发需要）

个人服务器通过https请求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET填写对应参数即可获取到access_token

weixin-java-mp-demo框架帮我们处理好了，还帮我们做了自动刷新处理，只要我们在application.yaml文件中配置没问题，其他都不用管

1. 公众号如何回复

我们使用了weixin-java-mp-demo进行开发后端，所以我们跟测试号的所有交互都会到这个方法中com.github.binarywang.demo.wx.mp.controller.WxPortalController#post

所以我们只要在对应到handler中处理不同事情就行

2. 自定义菜单

com/github/binarywang/demo/wx/mp/controller/WxMenuController.java中定义了很多开发者对菜单的操作

3. H5授权

H5页面首先拿到code，将code发到个人服务器，个人服务器去微信服务器请求后返回open_id给H5页面，用户的access_token不要给到前端，

2种模式，snsapi_base与snsapi_userinfo

snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）

4. H5调用weixin-sdk

绑定域名
加入微信sdk.js

通过config接口注入权限验证配置 config接口的参数来自用户对我们个人服务器发送请求返回对应对config参数给前端、

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

什么是config参数？发送什么请求？

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

使用ready接口处理成功验证
使用error接口处理失败验证

公众号

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

v-model的使用 Previous

HTTP的握手 Next

公众号、H5的开发