一、先说微信登陆授权
1、需要在微信公众平台上先登陆对应的服务号账号。在设置与开发->账号设置->功能设置->网页授权域名。这里需要把对应需要配置的域名写进来，必须是公网可以访问到的。
2、把微信公帐号这里的下载文件存放到对应的项目目录。比如说这样子。
3、在微信开发者平台，这里配置一个服务号的开发者权限。成功以后到这里就能看到对应的开发者权限了。
到这里如果丢到测试环境中已经可以进行微信登录接口的联调了，关于本地环境联调 下面会介绍怎么说明，现在先把微信支付的剩余环节处理完。
二、再说微信支付
1、微信支付需要在这个微信支付平台上先注册一个商户号。
2、有了商户号以后，需要在商户号上和微信服务号先进行一个绑定。
3、微信服务号绑定完以后，主要要设置一个支付授权目录，这个支付授权目录可以填写对应的域名。
走到这里，基本上对应的前端要做的事情都完成了，剩下就是和后端同学配合一起把流程走通。接下来就是本地如何联调的问题。
三、本地联调微信登录和微信支付 - cpolar内网穿透方式。
如果频繁的提交代码到测试环境验证效率就很低。
1、配置内网到公网的穿透工具、cpolar 这里有具体的使用教程。安装成功以后输入http://127.0.0.1:9200/ 会看到一个这样的页面。然后输入在cpolar申请的账号和密码。这里个人默认免费。
2、进入管理后台以后点击创建隧道，这边最好选择自定义域名。因为随机域名这里一天会更新一次。微信支付和微信登录那边就需要重新配置。本地地址那个地方就写你本地服务启动的地址。比如说一个vue项目启动的是localhost:3000。这里就填3000就好。
3、然后创建完以后可以看到一个在线隧道列表。这就代表你本地的服务从内网被映射到公网上了。
4、然后也可以测试一下对应的微信登录需要绑定的下载文件是否生效。因为这里是放到根目录下的，所以访问这个项目的根目录微信签名文件，这里就能看到对应的字符信息。这时候也就是成功了。
5、剩下就可以直接打开这个域名在微信的移动端去访问了，这个时候实时修改代码也能看到对应的更改。可以在微信开发者工具里通过公众号模式输入url查看，但是这里的微信支付是没办法测试的，需要在真机中
四、本地联调微信登录和微信支付 - whistle代理方式。
1、这个whistle主要是解决有的时候拉线上数据，想要真实测试的场景，也可以看到对应的请求信息。当然也可以本地联调。PC端安装whistle，按照教程安装完以后，打开127.0.0.1:8899可以看到一个这个页面。
2、然后手机和电脑放到同一个wifi下，打开移动端的wifi信息里，找到配置代理，这里配置成手动代理，然后把自己的IP输入到这里，端口配置成whistle的端口8899.
3、接下来在移动端输入这个whistle的ip地址。可以看到一个这样的页面，点击这个https这个地方，这里需要下载对应的证书，点击Download RootCA去下载。然后正常安装就好了。
4、还有一点要注意，以苹果手机为例，在通用->关于本机->证书信任设置->针对跟证书启用完全信任。这个也很重要。
5、接下来在whistle中配置一个映射，这个意思就是在移动端输入freestyle-test.riin.com会代理本地5173这个服务。然后在微信中打开freestyle-test.riin.com就可以访问对应的页面了。这样实时更改也会生效。
