日常爬坑

遇到的情况大致说明:

  • 项目基于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数据,那么能不能直接上传图片...由于项目工期问题,一直还没去测试...如果有大神看到,并且知道,请留言说一下哈,谢谢。

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

  1. (转)前端:将网站打造成单页面应用SPA

    前端:将网站打造成单页面应用SPA(一) Coffce 680 6月19日 发布 推荐 6 推荐 收藏 85 收藏,3.1k 浏览 前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不 ...

  2. Python 2.7_爬取CSDN单页面博客文章及url(二)_xpath提取_20170118

    上次用的是正则匹配文章title 和文章url,因为最近在看Scrapy框架爬虫 需要了解xpath语法 学习了下拿这个例子练手 1.爬取的单页面还是这个rooturl:http://blog.csd ...

  3. Python 2.7_爬取CSDN单页面利用正则提取博客文章及url_20170114

    年前有点忙,没来的及更博,最近看爬虫正则的部分 巩固下 1.爬取的单页面:http://blog.csdn.net/column/details/why-bug.html 2.过程 解析url获得网站 ...

  4. 前端:将网站打造成单页面应用SPA

    前端:将网站打造成单页面应用SPA   前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不再使用普通的a标签做跳转了.他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML ...

  5. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面

    一.引言 接着上一篇,京东个人中心的所有功能数据分析完成之后,现在需要把静态页面完成,实现过程中要用到的技术有:Bootstrap.html5表单新特性等.除此之外,还要利用Node.js的Expre ...

  6. 使用vue-cli快速搭建大型单页面应用开发环境

    工作环境:terminal,已经全局安装了vue(可使用npm install -g vue) 全局安装vue-cli npm install -g vue-cli 创建一个基于webpack模板的项 ...

  7. 前端单页面富应用(SPA)的实现

    一. 什么是单页面富应用? 单页面应用:Single Page Application 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进.后退等机制被破坏等问题.并且页面访问会被浏览器保 ...

  8. 基于angularJs的单页面应用seo优化及可抓取方案原理分析

    公司使用angularJs(以下都是指ng1)框架做了互联网应用,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持.搜了下发现单页面应用做seo比较费劲,国内相关实践 ...

  9. SPA单页面应用

    什么是单页应用 单页Web应用,就是只有一张Web页面的应用.浏览器一开始会加载必需的HTML.CSS和JavaScript,之后所有的操作都在这张页面完成,这一切都由JavaScript来控制.因此 ...

随机推荐

  1. http参数的封装(后台接受参数的场景)

    场景 不管是任何web框架作为一个web的开发人员必须要搞明白control层如何接受各种参数. 下面就根据我们公司的系统架构(nutz)来进行一下场景描述.各位小伙伴也可以根据这些 场景自己去总结一 ...

  2. QT 常用控件二

    QT提供QHBoxLayout类.QVBoxlayout类及QGridLayout类等的基本布局管理,分别是水平排列布局,垂直排列布局和网格排列布局 addWidget()方法用于向布局中加入需要布局 ...

  3. arcgis中求多点到一条曲线的最短欧几里得距离

    1.使用的工具:Arctoolbox----Analysis Tools----Proximity----Near工具. 2.注意:在求距离之前一定要先设置好坐标系统.

  4. faster-rcnn 结构杂谈

    faster-rcnn结构图: (只截取了最难理解的部分) 这个网络看似很复杂,但是理解了其中关键的层,就基本可以掌握这个结构了.要看源码!!要看源码!!要看源码 !!重要的事情说三遍. 关键的层: ...

  5. PHP开发者常用的正则表达式及实例【长期更新收录】

    正则表达式在程序开发中是非常有用的,用好正则我们可以搜索.验证及替换文本或任何类型的字符.在这篇文章中,UncleToo为大家搜集了15个开发过程中常用的PHP正则表达式.函数及PHP示例,学习这些你 ...

  6. mongodb配置问题

    1.安装好mongodb后需要在控制行输入很长的一窜很麻烦,可以新建一个.bat文件 cd F:\mongodb\Server\3.0\binmongod --dbpath "F:\mong ...

  7. 什么是卷积convolution

    定义 卷积是两个变量在某范围内相乘后求和的结果.如果卷积的变量是序列x(n)和h(n),则卷积的结果 , 其中星号*表示卷积. 当时序n=0时,序列h(-i)是h(i)的时序i取反的结果:时序取反使得 ...

  8. Qt学习之路

      Qt学习之路_14(简易音乐播放器)   Qt学习之路_13(简易俄罗斯方块)   Qt学习之路_12(简易数据管理系统)   Qt学习之路_11(简易多文档编辑器)   Qt学习之路_10(Qt ...

  9. web应用下的安全问题以及tomcat/nginx对应解决方法(持续更新、亲测可解决问题)

    最近一券商那边扫描反馈了下面几个非业务型安全漏洞,要求解决,如下: XSS 自己写个脚本response的时候对特殊字符进行了处理,或者网上搜下一堆(不要忘了回车.换行). HTML form wit ...

  10. python-day21--sys模块

    sys模块是与python解释器交互的一个接口 1.sys.argv           命令行参数List,第一个元素是程序本身路径     # 传参 应用场景:权限控制 2.sys.path    ...