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

公众号开发之获取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>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script src="%PUBLIC_URL%/js/utils.js"></script>
<script>
    let Request = new UrlSearch(); //实例化URL对象
    let appId = "替换成项目的appid";
    let uri = encodeURIComponent(window.location.href);  //保存url地址
    let openid = sessionStorage.getItem('openid'); // 获取本地存储的openid
    // 判断地址中是否携带了code 如果是从微信回调过来的话就会携带code
    if (Request.code){
        sessionStorage.setItem('code',Request.code) // 存储code值 目前没啥用
        // 拿到code向后台请求得到openid
        fetch(`/background/public/address/od/codeOpenid?code=${Request.code}`).then(response =>{
            return response.json()
        }).then(res => {
            // 保存openid
            sessionStorage.setItem('openid',res.datas)
        } )
    }
	
	
    // 判断是否有openid 
    if (openid!= null){
		// 其实这里面的代码可以直接放到上面请求结果里面执行这样页面还能减少一次刷新 但是影响了我后面的业务逻辑所以先这么写如果没有特殊需求可以放到上面去一起执行节约开销
        window.wx = wx;
        // 重新新设置页面地址去掉所有页面参数
        // 查找第一个?的下标
        let start = window.location.href.indexOf('?');
        // 查找第一个#号下标
        let end = window.location.href.indexOf('#')
        // 需要替换的内容
        let rep = window.location.href.substring(start,end)
        // 重新替换地址栏
        window.history.replaceState(null,'',window.location.href.replace(rep,''))
        // 请求后台拿到配置wx.config的参数
        fetch(`/background/public/address/od/jsapi_ticket?appid=${appId}&url=${encodeURIComponent(window.location.href)}`)
            .then((response) => {
                return response.json()
            })
            .then((result) => {
                // 配置wx.config
                window.wx.config({
                    debug: false,                  // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId: appId,          // 必填,公众号的唯一标识
                    timestamp: result.data.timestamp,  // 必填,生成签名的时间戳
                    nonceStr: result.data.nonceStr,    // 必填,生成签名的随机串
                    signature: result.data.signature,  // 必填,签名
                    jsApiList: [
                        "scanQRCode",               //扫一扫接口
                        "chooseImage",              //拍照或从手机相册中选图接口
                        "previewImage",             //预览图片接口
                        "getLocalImgData",          //获取图片接口
                        "chooseWXPay",              //微信支付接口
                        "getLocation",              //定位接口
                    ]
                })
            })
    }else {
        // 如果没有openid就重新向微信授权
        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + uri + "&response_type=code&scope=snsapi_userinfo#wechat_redirect"
    }
</script>
</html>

结尾

第一次开发公众号肯定有很多不到位的地方,如有更好的方案欢迎指正

你可能感兴趣的:(JavaScript,公众号)