原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅

本文为我创业过程中,开发项目的填坑之旅。作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱_

我决定实现如下功能

  • 架构上,实现前后端分离。方便以后前后端的分工
  • 考虑到体验,前端做成SPA站点,也就是单页面应用
  • 需要使用微信的JSSDK
  • 需要有微信支付功能

作为一个偏后端的半专业前端人士,经过一两周的调研和学习后,

我决定使用如下技术

  • 后端使用php搭建接口,本文主要讲前端,不细说
  • webpack实现前端代码打包
  • vue实现数据绑定,vue-router实现前端路由
  • weui提供UI框架
  • vux,提供各种组件,包括对weui的组件化封装

然后

我遇到了如下的坑

  1. 微信JSSDK签名出错
  2. 微信支付签名出错
  3. 微信支付路径要求二级或以上路径
  4. 开启调试模式后,微信支付仍然没有错误提示
  5. 授权回调处理
  6. 微信的模板消息,会自动把url中的问号(?)去掉

一一详述

微信JSSDK签名出错

JSSDK在普通网站中是没问题的,但是在SPA站点中,签名经常出错

JSSDK官方文档是这么说的

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

也就是说,android下的微信客户端里,不支持vue-router的history模式。

解决办法见支付签名问题

  • vue-router使用hash模式
  • 每次url更改的时候,重新调用JSSDK的config接口

微信支付签名出错

支付授权的坑,大家可以参考这篇文章

按照文中的描述,其实我们也可以在js中根据android还是ios,来分别进行处理;但是推荐采用文中的方式,逻辑上更统一,使用也更方便。

另外说明一点,文中的#!做分隔符的方式已经废弃了,大家使用#即可,叹号(!)去掉了

另外就是wx.config的签名url和支付签名url,微信处理也不一样,见下面的解决办法

解决办法

  • vue-router路由使用hash模式
  • 每次url更改的时候,重新调用JSSDK的config接口
  • hash分隔(#)前面加一个问号(?),如果js判断没有问号,则跳转一次
  • wx.config签名使用的url,通过window.location.href.split('#')[0]获取
  • 微信支付签名使用的url,通过用window.location.href获取

微信支付路径要求二级或以上路径

在遇到这个问题之前,我的php接口都统一加了一个前缀api,也就是 **http://example.com/api/other 这样的url,服务器会自动转发给php服务,其他url则转发给前端服务器。遇到微信这个问题后,我把前端url也统一加了一个前缀frontend,这样前端url就变成了 **http://example.com/frontend/?#hash

解决办法

  • 所有前端url,统一加一个/frontend前缀

开启调试模式后,微信支付仍然没有错误提示

不止微信支付,JSSDK的其他接口,也经常没有错误提示,或者提示很模糊,微信这简直是慢性谋杀。

不过我对比发现,ios下的各种提示,要比android下全面很多,如有必要,推荐大家在ios下进行调试

解决办法

  • 使用iphone进行开发调试

授权回调处理

这个不算坑,只是说下我的处理。

每次加载页面后,我都会调用后台接口判断是否登陆,如果没登陆,则跳转回到后台url进行授权,授权后再跳转回当前页面

微信的模板消息自动去掉url的问号(?)

前面解决微信签名问题的时候,我们给每个url特意加了一个问号(?),但是我发现,在发送微信模板消息的时候,即使给微信的url是对的,当用户点击模板消息的时候,微信打开的链接中,仍然把问号去掉了,这个很让人无语。考虑到尽量自己解决问题的原则,最后我的解决方案是在js中进行判断处理,自动把缺失的问号加上

解决办法

  • 如果页面没有问号(?),则跳转到正确的url,代码如下
  1. function directRightUrl () {
  2. let paths = window.location.href.split('#')
  3. paths[1] = paths[1] || '/'
  4. // 老式的#!分隔跳转
  5. if (paths[0].charAt(paths[0].length - 1) !== '?') {
  6. paths[0] = `${paths[0]}?`
  7. }
  8. if (paths[1].charAt(0) === '!') {
  9. paths[1] = paths[1].substr(1)
  10. }
  11. let url = `${paths[0]}#${paths[1]}`
  12. if (window.location.href !== url) {
  13. window.location.href = url
  14. }
  15. }

以上代码有三个作用

  1. 自动添加问号(?)
  2. 自动把分隔符由#!变成#
  3. 分隔符后面,自动判断是否为斜杠(/),没有则添加上

结束语

以上就是我在开发过程中遇到的一些还记得的坑,欢迎大家探讨

另外介绍一下我的公众号启奏陛下

这是一个提供“一句话新闻”的公众号,没有标题,标题即内容

扫描以下二维码可以关注

使用vue开发微信公众号下SPA站点的填坑之旅的更多相关文章

  1. vue开发微信公众号--开发准备

    由于工作项目的原因,需要使用vue开发微信公众号,但是这种微信公众号更多是将APP套了一个微信的壳子,除了前面的授权和微信有关系以外,其他的都和微信没多大的关系了,特此记录 开发流程 首先需要在电脑上 ...

  2. Vue开发微信公众号默认背景为灰色

    最近公司有一个项目,使用Vue开发微信公众号,开发过程遇到一个问题,即设计图的整体背景是白色的,但是公众号里默认的背景是浅灰色,如果某个页面高度没能占满一屏,就会露出浅灰色的默认背景,会显得很不协调. ...

  3. 用vue开发一个公众号商城SPA——1.前期准备和写页面

    使用vue开发公众号商城 第1篇记录项目准备.搭建,写页面遇到第问题以及总结,持续更新 公司最近接了个商城项目,包括PC端商城.微信公众号网页商城.后台管理系统.这几天在做微信公众号商城,又新接触了很 ...

  4. vue开发微信公众号--地图

    在最近开发的微信公众号中,要实现一个打卡功能: 由于个人感觉微信SDK里面的地图不太好用,所以使用了腾讯地图. 在项目中引入腾讯地图 1,需要登录腾讯地图网站,注册一个账户,获得一个key. 2,然后 ...

  5. 微信公众号支付备忘及填坑之路-java

    一.背景 最近公司给第三方开发了一个公众号,其中最重要的功能是支付,由于是第一次开发,遇到的坑特别的多,截止我写博客时,支付已经完成,在这里我把遇到的坑记录一下(不涉及退款).不得不吐槽一下,腾讯这么 ...

  6. 使用vue开发微信公众号,解决微信缓存

    1.页面加入标红的代码,让页面不缓存 <!DOCTYPE html> <html manifest="IGNORE.manifest"> <head& ...

  7. vux+vuex+vue+Es6开发微信公众号的坑

    初次开发微信公众号遇到很多问题,可能是基础不怎么牢靠,最近几天一直在看vue的东西,现在就来慢慢介绍vux和vue这个骚东西的用法: 细看文档一步步来, npm install vux --save ...

  8. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  9. vue+node.js+webpack开发微信公众号功能填坑——组件按需引入

    初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/d ...

随机推荐

  1. C#-VS远程通信

    上下文 应用程序内的一套规则.例如使用了begentransaction,就建立了一个规则:再如把synchronization特性应用到某个对象,是多个线程轮流访问这个对象,这也在当前应用产生了一个 ...

  2. day29(对象转xml(使用java))

    通常使用xStream工具. 将集合,数组,对象转成XML. 导入两个包: xpp3_min-1.1.4c.jar xstream-1.4.4.jar 自定义一个类 package com.baidu ...

  3. 关于Linux学习中的问题和体会

    本科期间未开展过与之相关的课程,所以初次接触Linux难免有些问题!参照老师给的学习资料中内容,逐步解决了一些问题,但还有一些问题没解决,下面列举出自己遇到的一些问题. 1.在环境变量与文件查找专题中 ...

  4. android 屏幕旋转 不重新加载oncreate

    当手机设定了使用横屏或者竖屏的时候,还想要使用重力感应,可以设置activity属性 android:screenOrientation="sensor" 但是每次翻转屏幕,都会重 ...

  5. 状态 ajax

    //html部分 <a href="#" data-status="{$vo.state}" data-urid="{$vo.id}" ...

  6. 关于 Keil uVision2 中文注释会显示不完整,字体不正常的问题

    在Keil中添加中文注释经常出现这样情况: ,注释文字不正常! 解决方案:Edit---->Option----->选择color&fonts选项卡中的Editor c Files ...

  7. AlexNet详解3

    Reference. Krizhevsky A, Sutskever I, Hinton G E. ImageNet Classification with Deep Convolutional Ne ...

  8. Windows8.1 安装SQL Server2012——部分组件安装不成功!(提示安装.NET 3.5时出错,无Internet情况下利用win8.1安装镜像安装.NET 3.5)

    虽然从事着与开发毫无关系的工作,但却也断断续续维持了近6年的WEB开发,有时因为其它工作原因,可能每做一个项目的时间间隔比较大,有时甚至在做的一个项目因为其他事情而停滞几个月之久(有些项目是自己兴趣或 ...

  9. 键'attachdbfilename'的值无效。

    ---恢复内容开始--- ---恢复内容结束---

  10. 为什么主流的 App 看起来都差不多?这可能是件好事

    欢迎访问网易云社区,了解更多网易技术产品运营经验. 现在设计师可以把精力都花在真正有意义的地方了. 打开Instagram.Airbnb.Apple Music.Twitter.Dropbox或Lyf ...