关于自己使用React开发微信公众号的一些坑和解决方法

[ahaow]

最近在工作中，接连到两个项目都是微信公众号网页开发，起初觉得没有太大难度，因为也就是一些微信页面而已，可是在实际的开发中还是遇到了几个让自己抓狂的坑。

1.关于授权

在react中我自己结合项目的做法是把授权做到了加载这个组件中（顾名思义是显示加载的页面），附上代码‘

`

getUserinfo（） {
    const url = localStorage.getItem（“url”）
    if（url） {
        const getcode = GetRequ（window.location.search）;
        const _props = JSON.parse（localStorage.getItem（'_ props'））;
        let code = getcode.code;
        axios.get（https: //www.xxx.com/xxx/xxx/xxx?code=${code}）。then（res => { 
        window.localStorage.setItem（'userinfo'，JSON.stringify（res.data.data））window.localStorage.removeItem（'url'）alert（res.data）;
        setTimeout（（） = >{
            if（_props.location.state.pathname === '/ single'） {
                this.props.history.replace（'/ single'）
            } else if（_props.location.state.pathname = =='/ setmeal'） {
                this.props。
            } else if（_props.location.state.pathname === '/ user'） {
                this.props.history.replace（'/ user'）
            } else if（_props.location.state.pathname === '/ activity '） {
                this.props.history.replace（'/ activity'）
            }
        }，1000）
    }）.
    catch（err = >{
        if（err） {
            alert（'登录失效，重新登录'）;
            localStorage.removeItem（'userinfo'）;
            localStorage.removeItem（'_ props'）;
            localStorage.removeItem（'url'）;
            this.props.history.replace（'/ user'）;
        }
    }）
} else {
    window.location.href = ' https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxea312fb8dd46a9f8&redirect_uri=http://www.xxx.com/xxx/xxxx&RESPONSE_TYPE =代码＆范围= snsapi_userinfo＆状态=状态＃wechat_redirect'localStorage.setItem（'_ props'，JSON.stringify（this.props））localStorage.setItem（“url”，window.location.href）;
}

`

1. 首先在url地址中redirect_uri对应的地址必须要是你反打打包后放上去的地址。
2. 然后授权后，出现xxx.com?code=xxx获取到了代码，并将url存储到本地
3. 我是根据本地存储是否有url来进行判断用户是否授权登录了的
4. 我还存储了一个react的道具，这个主要是用来根据用户第一次进入页面是从哪个页面进来的（结合自己项目，比如是：单品页面，套餐页面，用户页面）; 之所以要在其他，也就是授权链接那里存，是因为我调试的时候，点击登录刷新页面在if if判断里面打印props的location.state是undefined;
5. 然后根据后台给的接口，我将代码发送过去，得到用户信息userinfo，并且存在本地。
6. !!这个问题是很久就出现了，但一直没有太重视的问题。后台如果将我在用户列表中删去后，苹果手机打开后用户就会一直在载页面，然后没有反应。但安卓可以直接进入，然后我在授权的请求中警报（错误）; 打印错误的参数给我报了错误500; 之所以会这样是我自己认为存储的那个url中的代码过期了，而一直请求获取用户信息的是我存在本地的url中的代码，所以在err的回调函数中，我才会删除url这个本地存储;删除之后重新走了一次授权登录，就可以了 - - （但我认为这不是最好的解决办法）;

2.关于使用js-jdk

`

let href = window.location.href;
let url2 = encodeURIComponent（href.split（'＃'） [0]）;
axios.get（https: //www.xxx.com/index/access/access?url=${url2}）。then（res => { 
	console.log（res）window.wx.config（ {
    	debug：false，appId：res.data.appId，timestamp：res.data.timestamp，nonceStr：res.data.nonceStr，signature：res.data.signature，jsApiList： ['checkJsApi'，'scanQRCode'，'chooseWXPay'，'getLocation']
	}）
}）.
catch（err = >{
    console.log（err）;
}）

`

1. 使用hashRouter。
2. 使用微信js-jdk，什么步骤啊，引入什么的，不需要写了，文档已经很详细了
3. 在获取权限验证配置的时候，ajax要发送一个当前的url地址给后台，结果老是报错，获取签名失效，试了很多次都不行，后面才发现需要的是动态地址，让url = window.location.href; 在发给后台就获取成功了
4. 使用hashRouter我们发送的url必须encodeURIComponent（href.split（'＃'）[0]）; 进行处理
5. 老问题：就是调用微信支付或者其他微信方法时，也会报错误500; 也是通过让用户重新登录一次就可以继续使用了（但我认为这不是最好的解决办法）。

小结:其他微信就是授权和jdk这里比较麻烦，其他的都和我们平时正在开发一样..