美文网首页ionic
微信开发之Angular6+Ionic4与JS-SDK

微信开发之Angular6+Ionic4与JS-SDK

作者: 蒹葭乄白露 | 来源:发表于2018-12-18 17:36 被阅读373次

    刚开始接到这个项目时,因为对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地址。

    修改完之后,重新部署项目,问题完美解决!

    相关文章

      网友评论

        本文标题:微信开发之Angular6+Ionic4与JS-SDK

        本文链接:https://www.haomeiwen.com/subject/rmmckqtx.html