- config:invalid signature
- 单页应用入口文件缓存问题
- 开发和测试环境映射本地服务器
onfig:invalid signature
业务背景
- 验证jssdk获取gps
- 真机报错
- 但是微信开发者工具正常
报错内容
config:invalid signature
复现步骤
- 获取当前域名
- 将域名作为一个参数传递给后端
- 通过后端请求验证参数
- wx.config进行验证
尝试方案
- 把请求参数更换成
- 更换location.href
- 更换location.origin
解决
- 请求参数使用
location.href.split('#')[0]
原因
- 因为是单页面应用
- 所以在
#后面会有很多东西 - 这就导致了报错
- 可能开发者工具自动过滤了请求参数吧
- 所以开发者工具和真机表现不一致
单页应用入口文件缓存问题
业务背景
- 最近用
uni-app开发公众号 - 后端商品图片更新了(链接没变),前端不会自动刷新
- 首页里面有一个外部链接地址发生变化了,但是点击还是跳转以前的链接
- 商品分类页面样式变了,访问还是没变
复现步骤
- 只要修改东西,重新打包,上传到服务器
- 页面上基本都不会立即变化
- 苹果手机好像更严重
- 有时候安卓会自动更新,但是苹果不行
尝试方案
- 在拼接商品图片链接的时候,加个
?v=随机数,可以解决图片问题 - 首页外部链接地址也是加随机数解决的
- 或者干脆点右上角的三个点,刷新网页后就可缓存新的页面
存在的问题
- 用户不可能自己去点刷新,所以拆除
- 应用里面的样式或者js逻辑发生变化后,打包生成了新的js文件
但是,但是页面上还是请求之前的js文件,所以新的逻辑不会更新
解决
- 每次更新之后
- 在公众号菜单栏,给入口的
index.html文件加一个版本号即可
原因
- 公众号会自动缓存单
index.html文件 - 并且安卓和苹果的缓存机制还不一样
- 具体怎么不一样,以后想起来了再研究
测试环境映射本地服务器
业务背景
- 开发环境是一个测试公众号
a前端获取code的回调地址是a.com - 测试环境是另一个公众号
b前端获取code的回调地址是b.com - 使用
vue开发单页应用 本地服务器地址是localhost:3000 - 本地开发时,获取公众号
code之后,就会跳到另外一个地址
存在的问题
- 本身在
locahost上好好的,需要code的时候就跳到a.com - 如果要连接测试环境的数据,需要code的时候又跳到
b.com上面去了 - 我改一个样式,想看看效果,总不可能每次都把代码上传到服务器上吧
问题解决
- 本地开发时,可以启用
vue的本地ip服务器,即可以同时通过localhost:3000或192.168.99.99:3000访问 - 然后把测试公众号上的回调地址修改成
192.168.99.99:3000即可
还有问题
- 如果2个人同时开发,另外一个人的本地服务器是
192.168.99.100:3000 - 那么他在回调之后则会跳转到
192.168.99.100:3000
再解决
- 把公众号后台的跳转链接设置为
a.com - 把
vue devserver服务器的端口号修改为80 - 本地
host把a.com映射到自己的开发服务器 - 比如同事张设置host
192.168.99.99 a.com - 同事李设置host
192.168.99.100 a.com
