前端工做平常爬坑之——单页面微信开发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数据，那么能不能直接上传图片...因为项目工期问题，一直还没去测试...若是有大神看到，而且知道，请留言说一下哈，谢谢。