总结微信vue单页应用开发的一些坑

最近在做一个微信上的移动应用,踩了不少坑,做了以下的总结:


1.微信分享功能,安卓和iPhone存在着很多而差异。一开始调用微信分享功能需要引入jssdk,在入口文件index.js中引入了http://res.wx.qq.com/open/js/jweixin-1.0.0.js  js文件,然后出现了的问题是安卓可以进分享,但是iPhone却总是出现invalid signature,后来发现是因为iOS 9.0需要引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js,否则会分享失败。



2.iOS overflow:auto滚动不流畅问题。这个问题一般加上一句-webkit-overflow-scrolling : touch;就可以就解决问题,但是当有已导航栏用了fixed或者absolute定位的,定位就会失效,这是需要给overflow:auto的标签加上一个绝对定位,如position:fixed或者position:absolute。


3.有关于css选择器的坑:如果在html和body选择器中写了overflow:auto,对子元素div的滚动条的scrolltop值就总会为0,这和浏览器的兼容不同,这个神奇的坑花了我很长的时间才解决。


4.做微信支付接口jsapi调用的时候,支付目录的配置很有讲究,Vue项目如果没有改变路由的mode的默认值hash,这时#的存在就会是支付目录的配置失败,这是需要更改mode的模式,变为history。


5.。引入了百度地图API后,在微信开发者工具上面的定位和手机上定位差距很大,竟然有十多公里,这个让我一直以为是百度定位不准确,还试过换微新jssdk的定位,到头却发现是因为浏览器定位不准确导致的,只要代码在手机上跑起来,定位就会很精确。


6.Vue的生命钩子:

1.mounted钩子就是等dom结构渲染完成后就马上执行。

2.updated钩子里面的方法是每当dom结构发生改变的时候,就会触发该钩子里面的方法。但是该钩子十分消耗内存,慎用。

3.created:dom树还没渲染,就会触发该钩子里面的函数。

4.computed:当数据发生改变时就会触发函数。


7.Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

上面的警告是由于定时器引起的dom渲染延迟导致事件触发无效,但是没有找到很好的解决方法。



8.上传文件的坑,或者说是上传图片,用formdata通过ajax发送给后台,但是图片太大的话node会报一个错误request entity too large,这是node上传文件限制的原因,这个需要在node加上一个上传文件的限制//app.use(express.limit(100000000))//app.use(bodyParser({limit : "5000kb"}));//app.use(json({limit: '5000kb'}));但是一般体验文件太大的话用户体验不好,又消耗流量,最好还是使用canvas压缩上传。















最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,833评论 19 139
  • 我无法改变我的过去, 也无法预知我的未来。 现在的每一天都是上天给我的恩赐。 或许我终于可以放下内心所有的牵牵绊绊...
    简小鱼阅读 1,625评论 0 0
  • 解决方法是修改DNS,换成以下dns:谷歌:8.8.8.8和8.8.4.4阿里:223.5.5.5或233.6.6...
    Devid阅读 3,638评论 0 0

友情链接更多精彩内容