刚开始接到这个项目时，因为对Angular比较熟悉，所以就选用了Angular6+Ionic4框架构造整个项目，开发界面时一切顺利，到了开发微信JS-SDK的时候就有点懵了，网上关于Angular2~6开发微信JS-SDK的案例一个都找不到，这下就不好办了，这时候再换框架的话就太拖进度了，会被骂死，而且新框架也不一定那么适用。
辛辛苦苦配置好服务器之后，开始开发JS-SDK了，从官方平台上下载了demo源码，有Java、node、PHP、pyhon四个版本的代码，我对PHP比较熟悉，所以直接拿PHP代码开干。代码分为四个文件
首先，access_token.php 和 jsapi_ticket.php 两个文件是用来缓存全局变量access_token，jsapi_ticket和expire_time的。
access_token.php
jsapi_ticket.php
然后就是jssdk.php，是主要的文件，里面存放的是请求方法,通过调用此处的方法，请求微信JS-SDK的配置信息。
sample.php文件是入口文件，用php语言写的一个html页面，令人尴尬的是，这个页面是直接调用jssdk.php中的方法请求JS-SDK的配置信息,直接使用的，这种前后端不分离的做法，不存在任何的问题。可是当我在开发angular项目的时候，需要前后端分离，那么就要通过http请求一个php文件，然后在这个php文件中调用jssdk.php的方法请求到参数，然后再返回给前端，最后前端获取到配置信息，直接使用。下面是我写的php代码：
interface.php
从流程上来讲这样是没问题的，之前的JS安全域名和IP地址白名单都已经配好了的，运行demo代码的时候也成功获取到配置信息。但是，当我把项目打包好部署到服务器之后，发现第一个问题：在angular项目中如何注入配置信息？首先，angular组件中肯定是没wx这个对象的，需要导入微信JS-SDK的js文件：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
一开始，我是在项目的配置文件中导入，但是发现并没有用，在应用模块中导入不了wx对象，而且在渲染出来的页面中并没有加载到jweixin-1.4.0.js 。
angular.json
然后我又试着直接在index文件的头部信息中引入：
index.html
这样引用之后，在渲染出来的页面中看到有加载到jweixin-1.4.0.js。
渲染后的前端页面代码
但是这时候出现了困扰我的一个问题，那就是如何获取js文件中的wx对象。angular框架引入第三方框架的时候，是通过导入的方法获取到对象的，可是现在没办法这样做，那么我要如何获取到这个wx对象呢？
在网上找了很久，没发现有Angular6开发微信的案例，很多都是挂羊头卖狗肉（我一直认为，Angular2~6和Angular1.X不是同一个框架，两者区别太大）。网上找不到答案后，就只能自己想办法。后面突然想起之前做混合开发的时候，通过window注入对象由android和IOS调用的例子，我试着打印window对象，发现在加载了jweixin-1.4.0.js之后，wx对象下面挂载了一个wx对象，于是我想到可以通过window获取wx对象：
嗯 这样是可以的，所以说，在加载了JS-SDK接口文件之后，不需要注入，直接从window下获取wx对象。
本来到了这里，应该就可以请求到配置信息了，事实上配置信息确实请求到了，但是在调用验证接口的时候提示签名错误。
请求到的配置信息
调用接口服务的报错提示
这我就纳闷了，明明配置信息都请求到了，使用的时候又提示错误。我想了好久，都不知道什么原因。百度到出现这种错误的几种原因：
1.确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2.确认config中noncestr, timestamp与用以签名中的对应noncestr, timestamp一致。
3.确认url是页面完整的url，包括GET参数部分。
4.确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
5.确保一定缓存access_token和jsapi_ticket，可以减少两次服务器请求加速体验外，还避免了触发频率限制，提高服务稳定性。
然后我逐条的分析：
首先，我的签名算法是没问题的，直接copy的官方案例；
其次，config中参数与用以签名中的对应参数是完全一致的，因为所有的参数都是由返回的，签名时用的什么参数，返回的就是什么，所以这点也没问题。
然后，因为url是由php文件获取的，获取的方法是官方案例中的，所以肯定也没问题；
php获取url的方法
再然后，config 中的 appid 与用来获取 jsapi_ticket 的 appid 是完全一致的，这个我检查过；
最后，缓存机制是在直接copy的官方代码，这个肯定也没错。
那么问题来了，错误到底出在哪儿？
我又把代码逐字逐句的检查，发现都没问题。
后来我想了很久，突然之间灵光一闪想到：会不会有可能是因为请求配置信息的URL跟注入配置信息时的URL不一样的原因。
因为官方的demo案例中，是前后端不分离的，请求配置信息和注入配置信息时在同一个文件，所有URL肯定是不变的。
可是当我前后端分离后，请求配置信息的URL是www.demo.com/wx/php/interface.php，然后在注入配置信息的时候使用的也是这个URL。
但微信检测到注入配置信息的请求是由www.demo.com/wx/www/index.html发送过来的，所以判定URL不一样，验证失败。
想到这个可能，于是我又想到：如果我把请求配置信息时后端获得的URL变成www.demo.com/wx/www/index.html，那么问题是不是就解决了。
想到就做，修改URL的获取方式，由原来的拼接当前页面的URL地址变成现在获取前一页面的URL地址。
修改完之后，重新部署项目，问题完美解决！
网友评论