公众号开发之获取openid和配置wx.config

最新推荐文章于 2024-06-06 17:12:30 发布

YXGR

最新推荐文章于 2024-06-06 17:12:30 发布

阅读量4k

点赞数

分类专栏： JavaScript 公众号

本文链接：https://blog.csdn.net/weixin_42777688/article/details/103070247

版权

公众号开发之获取openid和配置wx.config

最近需要开发公众号衡量了一会打算拿react+Ant Design Mobile来写本以为开发公众号应该和普通H5没啥区别，后来发现我还是太年轻啊，一路遇到无数的坑！所以还是要记录一下

前端框架 React
UI框架 Ant Design Mobile
环境公众号

前置说明

在这里遇到最大的两个问题就是获取openid和配置wx.config了如果这两个单独拿出来其实都不算什么坑，可当这两个需求集中在一起的时候坑就来了
获取openid前需要跳转到微信授权页面获取用户授权然后微信会根据设置到合法域名和传过去到url做校验通过了就会携带上code重定向回到原本到页面，然后就可以拿着返回来到code向后端请求openid啦,可是这个时候问题来啦openid是拿到了可以会发现地址栏多了很多不需要到参数导致配置wx.config的时候传过去的url总是无效的然后就是签名失败。。。

解决思路

在拿到了openid后手动修改地址栏然后再去请求配置wx.config的参数这样是可以成功的,然而我还是高兴的太早后来发现IOS上是正常的但是安卓上面却是提示配置成功但是某些权限却会用不了比如chooseImage这个API会提示permission denied当时我就懵了，这NM微信坑爹啊，但是没有办法人在屋檐下不得不低头，然后就开始查文档找了很久终于在一篇帖子的不起眼的地方看到了路由的问题(这篇帖子还是Vue的，国内React的贴子真的少而且很多还是英文的。。。)，大致原因就是IOS和安卓微信内部浏览器的内核是不一致的导致进入页面的时候记录的地址是不一样的(浏览器兼容简直是前端开发的噩梦)。总之就是说路由模式改成hash就能解决这个问题,然后问题又回到了url地址修改的问题了，折腾良久总数目前看着是没问题了，具体过程就不描述了。

代码

// index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <link href="%PUBLIC_URL%/favicon.ico" rel="icon" />
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>WE点餐公众号</title>
    <script src="%PUBLIC_URL%/js/flexble.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>

最低0.47元/天解锁文章

YXGR

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
公众号开发之获取openid和配置wx.config

公众号开发之获取openid和配置wx.config前置说明解决思路代码结尾最近需要开发公众号衡量了一会打算拿react+Ant Design Mobile来写本以为开发公众号应该和普通H5没啥区别，后来发现我还是太年轻啊，一路遇到无数的坑！所以还是要记录一下前端框架 ReactUI框架 Ant Design Mobile环境公众号前置说明在这里遇到最大的两个问题就是获取op...
复制链接

扫一扫