前端工作日常爬坑之——单页面微信开发Jssdk相关，以及jssdk图片直传自己服务器的实现。

日常爬坑

遇到的情况大致说明：

• 项目基于Vue2全家桶实现，vue-router控制前端路由，路由模式是History（主要是领导追求太高，觉得hash带#号太丑，然后遇到了小坑...），主要是服务于微信端，于是乎自然要使用jssdk。

• 目前实现的功能其实很简单，只是点击然后调用jssdk，上传图片至自己服务器，成功的情况下返回一个可以使用的图片url

---

关于jssdk配置错误

好吧，其实最大的问题是，我在此之前根本没有接触过微信端相关，自然没啥经验，于是乎且行且努力吧。

要调用jssdk第一步，自然是引入jssdk文件后，配置jssdk然后注入页面。按照文档的需求，配置中需要的数据是后端进行运算后得到的，所以前端通过ajax将部分进行运算必要的数据传给后端，然后返回进行配置所需要的数据就可以了。

进行实际配置时，由于在文档看到了一段红色的文字....尤其是我加粗的这段文字

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

我当时假装思考了一下....既然文档说在每次url变化时进行调用，那么我就想当然的在Vue-router的钩子router.beforeEach中调用ajax，进行获取数据，配置jssdk（以上操作封装在函数内），这么不带脑的做法导致的是刷新页面时不会调用...于是改成在组件生命周期钩子中调用，不再监听路由变化。

理想是好的，计划也是完美的，进行测试时总是出错，由外部链接直接进入，获取本页面刷新后jssdk都是正常使用的，然而一旦退出页面，由微信公众号入口重新进入，那么就会遭遇invalid signature的错误，jssdk配置失败。

经过数小时后，终于发现：

单页面的情况下，ios（微信）的url永远不变，简单来说，就是单页面应用，无论前端路由怎么进行变化，但是微信始终认为你的路由没有变化....是最初进入网站时的url，所以进行配置单页面应用进行配置jssdk时，只需要在初始化应用时，获取到进入应用时的url，进行一次ajax请求，然后配置jssdk就可以了....只需要第一次....

重要的事情再强调一次，单页面应用的情况下，微信会判断最初进入应用的url作为整个单页面应用的根url，进入应用后无论前端路由怎么修改，微信浏览器始终认为最初进入应用的url是当前的url。

以上的问题，暂时没有在安卓中发现，然后如果不希望出现这样的问题，可以采用比较丑的hash模式路由，因为在hash模式下，会忽略掉#号后面的内容。

---

关于通过jssdk图片选择接口，不经过微信临时服务器，直接传递图片至自己服务器。

目前采用的方法很简单，但需要后端支持。

调用wx.chooseImage 获取到 localIds （注意：是数组）然后调用 wx.getLocalImgData 获取到图片的base64数据，文档上说可以直接用img标签显示，于是乎，直接通过ajax将base64上传至后端，后端进行2进制解码就可以获得图片了。

其实之前一直在想，既然能够由localIds直接获取到图片的base64数据，那么能不能直接上传图片...由于项目工期问题，一直还没去测试...如果有大神看到，并且知道，请留言说一下哈，谢谢。