完成第一个vue项目之微信公众平台支付遇到的问题和解决的方法

一.vue实现微信支付的基本流程：
1.准备工作:
1.1.首先要有一个开通商户注册的公众号，我们需要他的appid；
1.2.其次要开通商户公众号的公众号支付的功能，开通完成后就可以基本开始我们的开发了
2.第一步：获取到支付用户的code，
获取code的基本方法是向微信的支付地址https://open.weixin.qq.com/connect/oauth2/authorize发送appid，scope（决定授权的方式，我选择的是snsapi_base静态授权，另一种授权方式为snsapi_userinfo，可以获取用户的基本信息但需要用户手动同意）和url（访问接口完成后返回的地址），然后就可以从浏览器的url中获取到自己的code
基本代码：
function getCodeApi(state){//获取code
let urlNow=encodeURIComponent(window.location.href);
let scope=‘snsapi_base’; //snsapi_userinfo //静默授权 用户无感知
let appid=’’;
let url=https://open.weixin.qq.com/connect/oauth2/authorize? appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}&connect_redirect=1#wechat_redirect;
window.location.replace(url);
}

function getUrlKey(name){//获取url 参数
return decodeURIComponent((new RegExp(’[?|&]’+name+’=’+’([^&;]+?)(&|#|;|KaTeX parse error: Undefined control sequence: \+ at position 45: …])[1].replace(/\̲+̲/g,'%20'))||nul…router.push({ path:‘地址’,query:}）进行传值，我使用的解决方法是用缓存的方式进行传值使用的（localStorage.setItem(‘缓存名称’, 缓存的值)，提取的值=localStorage.getItem(‘缓存名称’)）解决的。

二.取得code值的测试方法：
如果个人练习或者公司配置的地址已满暂时无法实现在微信公众平台进行修改，可以用测试号的方法先行进行测试使用获取到code（此方法只能用在测试）
模拟公众号接口测试地址：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index