vue 项目如何引入微信sdk接口的方法(2)

获取config配置信息：

前端要获取上面那些信息，不用做太多东西，只要调后端接口就可以了。后端会把那些信息处理好，然后通过一个接口返给你这些参数。你要给后端传一个 当前路由页面的完整url ，后端就会返回上述的那些信息给你，后面就可以根据自己的需求调用相应的接口，自定义里面的东西。

坑点：url

这里要注意的就是url的问题，如果url没有正确传递，后端也会返回信息，但是签名信息会是错误的。

上面提到的完整url指的是：'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。可以通过 location.href 来获取。

注意： 如果你的vue项目，路由没有开启history 模式,也就是你的url上面包含“#”，这个时候要从后端正确获取签名，就需要 去掉url上#后面的字符 。（url去掉'#'hash部分，可用 location.href.split('#')[0] ）

封装调用sdk注入：

因为要在每个路由页面都注入sdk，这个肯定要复用的，不然那么多代码，看着就头大。

我是这么做的：

因为我把axios包了一层，然后把axios接口，在main.js里面挂载到Vue实例。

然后在全局函数里面调用这个接口，然后在每个路由页面的相应组件里面调用这个函数，把当前页面的url以及其他标题、图片什么的传进去。

里面的具体步骤就不说了，最重要的是参考上面的那个流程，函数里面的东西也都是基于那个流程的。

签名校验：

当你反复确认步骤都没有问题，微信sdk注入还是签名失败的时候，这个时候你就要考虑是不是后端那边的算法有问题，可以把后端返回的签名和微信提供的JS 接口签名校验工具生成的签名对比一下，或许是后端那边算法的问题也不一定。

后话

实不相瞒，当时我做的时候就是被url这个坑了，第一次做这个东西，没有经验，折腾了好久。引入sdk并不难，重要的是那个配置信息要填写正确，然后其他的就根据实际需求来做了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。