摘要：原文见我的博客，点击进入使用开发微信公众号下站点的填坑之旅本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱。
原文见我的博客，点击进入使用vue开发微信公众号下SPA站点的填坑之旅
本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱^_^。
我决定实现如下功能架构上，实现前后端分离。方便以后前后端的分工
考虑到体验，前端做成SPA站点，也就是单页面应用
需要使用微信的JSSDK
需要有微信支付功能
作为一个偏后端的半专业前端人士，经过一两周的调研和学习后，
我决定使用如下技术后端使用php搭建接口，本文主要讲前端，不细说
webpack实现前端代码打包
vue实现数据绑定，vue-router实现前端路由
weui提供UI框架
vux，提供各种组件，包括对weui的组件化封装
然后
我遇到了如下的坑微信JSSDK签名出错
微信支付签名出错
微信支付路径要求二级或以上路径
开启调试模式后，微信支付仍然没有错误提示
授权回调处理
微信的模板消息，会自动把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/?...
解决办法
所有前端url，统一加一个/frontend前缀
开启调试模式后，微信支付仍然没有错误提示不止微信支付，JSSDK的其他接口，也经常没有错误提示，或者提示很模糊，微信这简直是慢性谋杀。
不过我对比发现，ios下的各种提示，要比android下全面很多，如有必要，推荐大家在ios下进行调试
解决办法
使用iphone进行开发调试
授权回调处理这个不算坑，只是说下我的处理。
每次加载页面后，我都会调用后台接口判断是否登陆，如果没登陆，则跳转回到后台url进行授权，授权后再跳转回当前页面
前面解决微信签名问题的时候，我们给每个url特意加了一个问号(?)，但是我发现，在发送微信模板消息的时候，即使给微信的url是对的，当用户点击模板消息的时候，微信打开的链接中，仍然把问号去掉了，这个很让人无语。考虑到尽量自己解决问题的原则，最后我的解决方案是在js中进行判断处理，自动把缺失的问号加上
解决办法
如果页面没有问号(?)，则跳转到正确的url，代码如下
function directRightUrl () {
let paths = window.location.href.split("#")
paths[1] = paths[1] || "/"
// 老式的#!分隔跳转
if (paths[0].charAt(paths[0].length - 1) !== "?") {
paths[0] = `${paths[0]}?`
}
if (paths[1].charAt(0) === "!") {
paths[1] = paths[1].substr(1)
}
let url = `${paths[0]}#${paths[1]}`
if (window.location.href !== url) {
window.location.href = url
}
}
以上代码有三个作用
自动添加问号(?)
自动把分隔符由#!变成#
分隔符后面，自动判断是否为斜杠(/)，没有则添加上
结束语以上就是我在开发过程中遇到的一些还记得的坑，欢迎大家探讨
结束语
以上就是我在开发过程中遇到的一些还记得的坑，欢迎大家探讨
另外介绍一下我的公众号"启奏陛下"
这是一个提供“一句话新闻”的公众号，没有标题，标题即内容
扫描以下二维码可以关注
扫描以下二维码关注
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/88120.html
摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。 目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现 前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付 技术方案 后端使用 php ...
摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。 目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现 前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付 技术方案 后端使用 php ...
摘要：博客搬家原地址原发表时间本文讨论使用安装包构建网站底层服务后，包括域名解析，的管理等的一系列填坑历程。域名解析问题相关首先将本人的网站信息公布如下域名地址主机提供方搬瓦工域名托管及解析阿里云万网本文之后的内容均是基于以上信息。 「博客搬家」 原地址: CSDN 原发表时间: 2016-11-16 本文讨论使用 LNMP 安装包构建网站底层服务后，包括域名解析，MySQL 的管理等...
先对项目进行一下简单的介绍 vue开发微信商城项目总结之一–项目介绍 项目开发初期，由于项目比较着急上线，前端的框架在选型上比较仓促，只是因为vue学习成本较低，就选了它，没有什么别的原因， 之前看过angular2一段时间，又趁着周末看了两天vue，就仓促开发，所以埋下了很多坑，项目（项目目前没有对游客开放，是2B2C的模式）上线后，回头填坑，发现了很多问题，因为之前一直是基于Jquery模式的...
阅读 1308·2021-11-11 10:57
阅读 3722·2021-09-07 10:10
阅读 3445·2021-08-03 14:03
阅读 3070·2019-08-30 13:45
阅读 684·2019-08-29 11:19
阅读 1042·2019-08-28 18:07
阅读 3102·2019-08-26 13:55
阅读 812·2019-08-26 12:17
