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

时间:2023-05-18 22:41:14

日常爬坑

遇到的情况大致说明:

  • 项目基于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标签显示,于是乎,直接通过ajaxbase64上传至后端,后端进行2进制解码就可以获得图片了。

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