微信开发工具-公众号网页调试处理跨域请求

在开发阶段，进行接口调试过程中，请求线上接口出现跨域问题；不想麻烦后端人员(主要是嫌麻烦，还得掰扯)。可以对开发工具进行调整，以便接口调试，方法：

1、将微信开发者工具路径及文件名均修改为英文，例如：
D:\应用软件\微信开发者工具.exe 改为 D:\useing\wxtools.exe
2、右键选择 .exe 文件，发送到 =》桌面快捷方式
3、在桌面上找到刚刚创建的快捷方式，右键单击，选择属性 =》快捷方式 =》目标，在.exe后面输入" --disable-web-security --allow-running-insecure-content" （注意最前面要空格） ，然后点击应用 =》确定

4、然后通过快捷方式打开微信开发者工具即可
通过这波操作，在开发过程中可以畅快的进行接口调试了；但是这也为我后续遇到问题埋下了一个坑😭😭😭

微信公众号网页开发，调用扫一扫功能,测试过程中安卓机正常，iPhone无法正常调起js接口

上一篇文章中已经详细介绍了网页中如何进行扫一扫功能，但是在实际开发过程中又发现了一个问题，那就是安卓机上可以正常调起微信扫一扫，但是iPhone无法成功。
然后带着问题开始进行百度，一开始我怀疑使用的npm包有问题，然后按照文档的说明，引用官方的js文件。 uniapp中引用第三方js步骤：

在index.html中直接script引入；js文件引入后，会在全局下挂载 jWeixin 对象，将上篇文章中的 wx 改为 jWeixin 即可；可惜的是修改过后，问题依旧没有解决；

问题所在：

将 jWeixin.config 中的debug 改为 true，然后进行调试，最终发现了问题所在：获取的 JS-SDk 权限验证签名有问题，在获取签名时，需要传当前页面的 url，安卓与iphone中获取的url 有区别

解决方法

假设当前页面路径为：https:xxx.xxx.net/pages/p1/p1

安卓：

传的url：https:xxx.xxx.net/pages/p1/p1

window.location.href.split('#')[0];

iphone:

传的url： https:xxx.xxx.net/
iphone类型的url获取可以在 app.vue 中的mounted进行获取：location.href，然后将其存下来，针对url的获取可以封装一个函数

/** app.vue中 **/
mounted() {
    uni.setStorage({
        key: 'wxSignUrl',
        data:location.href
    });
}

/**
 * 判断用户设备的机型
 * 返回正确的url，然后发送给后端
 * 获取JS-SDK 权限验证的签名
 */
function getSignUrl() {
    var signUrl = '';
    var ua = navigator.userAgent.toLowerCase();
    if (/iphone/.test(ua)) {
	ignUrl = uni.getStorageSync('wxSignUrl');
	if(!signUrl) signUrl = location.href
    } else {
	signUrl = location.href
    }
    return signUrl;
}

经过这一波操作，完成了iphone设备中的扫一扫功能实现🎉🎉🎉。

微信浏览器网页内拉取用户的头像、昵称

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。微信网页授权官方文档链接注意：
1、scope 需为 snsapi_userinfo；
scope有两个值可选：snsapi_base、snsapi_userinfo；
snsapi_base：是用来获取进入页面的用户的 openid 的。 snsapi_userinfo：用来获取用户的基本信息的。
2、前端需要改变地址栏，来打开该链接，而不是发起请求

window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect`

3、步骤二中回调的url，必须要在网页授权域名中进行配置；步骤：进入公众号 =》设置与开发 =》公众号设置 =》功能设置 =》网页授权域名；个人进行功能测试的时候，也可以在测试公众号中进行设置，测试公众号中支持ip。
说了这么多，回归正题，到底如何拉取用户信息，获取用户的头像、昵称呢。

通过网页授权，我们获取了code。通过code可以换取网页授权access_token；
敲黑板👀，官方文档中有这样一句话，为前端人员省去了很大的烦恼；

但是由于之前，我对开发工具进行了修改，处理了跨域，导致在开发的时候我直接前端发起了请求，开发工具内正常，但是到了线上就获取不到用户信息了。
此时我已经忘记了自己做过的事儿😭😭😭；更为巧合的是，我之后想起了开发工具被我修改了，然后我又下载了一个新的微信开发工具进行测试，发现出现了跨域操作，然后我反馈给了后端工程师，想通过他那边进行处理。
后端向发起了请求，谁成想他那边犯了个弱智错误，导致返回的用户信息中没有头像，造成我又怀疑起了其他原因。在我静下心来仔细阅读官方文档，发现了这一问题，将其反馈给了后端工程师，坚定的认为肯定是后端出现了问题吗，最终后端工程师发现了自己犯的错，改正了过来；
至此拉取用户信息，获取头像、昵称功能实现完毕。

总结

1、开发功能的过程中要多阅读官方提供的技术开发文档，其中的每一句话都是有意义的；在程序员的路上要不断提升自己阅读文档的能力
2、在开发过程中要记住自己做了那些重大的修改，避免前期爽，后期还要自己填坑。

本次分享之旅结束了，公司的公众号开发也告一段落；抓住金石计划的尾巴，做一下阶段总结，第一次做公众号，记录一下，希望能给大家带来帮助。

微信公众号H5开发阶段总结

使用到的工具：