微信公众号网页开发_公众号页面开发-CSDN博客

本文链接：https://blog.csdn.net/bbyyo/article/details/137240768

微信公众号网页开发【作于20240401】

公众号网页研发，要求公众号菜单为入口，跳转到已经开发好的页面。由于之前使用过uniapp，为了方便，前端使用了uniapp，后端使用java开发。

微信网页对接流程图：在这里插入图片描述

零遇到的坑

0.1 采用vue研发hash路由方式微信回调地址中/#/解析错误，导致前端无法获取code问题

使用Hash路由方式：http://lovelycat.wicp.net/?code=123#/

使用history方式：http://lovelycat.wicp.net//?code=123

解决方法：1、前端代码设置为 history 路由方式详情1.3.2

2、nginx 配置去除 /#/ 模式；详情1.3.1 try_files属性

一测试环境搭建

1.1 测试环境准备工作

所用工具	目的	网站/攻略
XBuilder	uniapp 前端页面研发
IDEA	Java 后端代码研发
微信测试号		https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login&token=1349382073&lang=zh_CN
在线接口调试工具	给测试账号添加菜单	https://mp.weixin.qq.com/debug?token=1349382073&lang=zh_CN
nginx	方便内网穿透、前端代码
花生壳	内网穿透

1.2 前后端代码

1.2.1 前端代码

	onLoad(option) {
		// 微信返回地址中获取code
		this.code = option.code;
		if(!this.code) {
			console.log("ghq_", "未能获取到code->" + JSON.stringify(option));
			this.showError = true;
		}
		this.getAccessToken();
	},
	methods: {
		/** 调用后台接口获取accessToken、openId */
		getAccessToken : function() {
			let params = {
				"code" : this.code
			}
			imagePlatformAPI.getAccessToken(params).then(res => {
				console.log('ghq_openId', JSON.stringify(res));
			}).catch(err => {
				console.log('ghq_err', JSON.stringify(err));
				this.showError = true
				
			}).finally(() => {
				
			})
		}
	}

1.2.2 后端代码

/**
 * 微信对接类
 */
@RestController("/wxConnect")
@Api(value="微信",tags = "微信")
public class WxConnectController {

    @Value("${wx.info.appid}")
    private String appId;

    @Value("${wx.info.appsecret}")
    private String appSecret;

    @Value("${wx.info.accesstokenurl}")
    private String accessTokenUrl;

    /**
     * 获取accessToken 及 openId SnsapiBase模式
     * @return
     */
    @ApiOperation(value = "获取openId")
    @PostMapping("/getAccessTokenWithSnsapiBase")
    public Result<WeiXinResult> getAccessTokenWithSnsapiBase(@RequestParam String code) {
        String realUrl = accessTokenUrl.replace("APPID", appId).replace("SECRET", appSecret).replace("CODE", code);
        String accessTokenResp = RestClientUtil.doGet(realUrl, String.class);
        WeiXinResult weiXinResult = JSON.parseObject(accessTokenResp, WeiXinResult.class);
        return Result.success(weiXinResult);
    }
}

/**
 * 微信返回类
 */
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@ApiModel(value="WeiXinResult", description="")
public class WeiXinResult implements Serializable {

    private static final long serialVersionUID=1L;

    private String openid;

    private String session_key;

    private String errcode;

    private String errmsg;
}

配置文件：

server:
  port: 8090
  servlet:
    context-path: /imagingplatformwx

wx:
  info:
    appid: YOUAPPID
    appsecret: YOUAPPSECRET
    accesstokenurl: https://api.weixin.qq.com/sns/oauth2/access_token?appid=YOUAPPID&secret=YOUAPPSECRET&code=CODE&grant_type=authorization_code
mybatis:
  mapper-locations: classpath*:mapper/*.xml

1.3 测试环境联调配置【uniapp nginx 公众号配置】

1.3.1 nginx配置

    server {
        listen       7001;
        server_name  localhost;

        location / {
    	try_files $uri $uri/ /index.html;
        root   E:/ideaWorkspace/imaging-platform-wx-fro/imaging-platform-wx-fro/unpackage/dist/build/h5/;
        index  index.html index.htm;
    }

        location ^~ /imagingplatformwx/ {
            proxy_pass   http://172.16.110.205:8090/imagingplatformwx/;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

1.3.2 uniapp配置【避坑】

    "router" : {
        "mode" : "history"
    },

1.3.3 花生壳配置

在这里插入图片描述

1.3.4 测试公众号配置【确认是否可以ip + 端口】如果可以则无需穿透

找到体验接口权限表 ----> 网页服务 ----> 网页帐号 ----> 修改【将花生壳的外网域名配置于此】

在这里插入图片描述

二正式环境上线

2.1 正式环境上线所需

环境/中间件/网络要求	目的
JDK	java后台运行环境
nginx	1、代理前端uniapp项目 2、代理后端接口项目
nginx所在服务器开通外网访问权限	公众号要访问你
后端部署服务器开通访问https://open.weixin.qq.com 权限	你要访问微信服务端
外网域名直接访问nginx所在服务器【必须80 或者 443端口】	公众号网页授权域名要求

2.2 正式环境上线配置

假设我们的域名为 abc.com 且配置了SSL（https）

2.2.1 nginx配置

1、与测试环境相同，配置前后端nginx代理；

2、nginx上传微信验证文件，并配置（取巧配置方式，以防根路径被占用）

在这里插入图片描述

2.2.2 公众号配置

1、网页授权域名配置（如图先进行nginx验证文件配置，才能完成该配置）
在这里插入图片描述

2、公众号菜单配置（rect_uri必须使用UrlEncode编码）

菜单url配置：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7ccb4e17f634db16&redirect_uri=https%3A%2F%2Fabc.com&response_type=code&scope=snsapi_base#wechat_redirect
在这里插入图片描述