M站开发总结

写这个主要是为了提醒自己之前所遇见的坑，也算自己的一些经验，也是为了以后谁碰见这种问题可以及时的解决，废话不多说，开干！！

项目描述：

多加网微信官微，项目使用vue脚手架（vue-cli），所用技术有chart、mint-ui、less、sass、vuex、vue-router等前端技术

1、微信二次分享

遇到的签名失败的问题，分享失败

开发流程：

获取当前url地址，通过Ajax把当前url传给后台，后台返回appid、时间戳、签名等，后台可以正常返回值，但是分享还是失败，最后找到原来是url有一些特殊符号，比如@#&等，这些字符是不会进行编码的，需要encodeURIComponent对这些特殊字符进行编码，让浏览器能够正常读取url，传给后台

2、微信支付

      OpenId拿不到

      因为也是第一个进行微信支付的项目，也遇见了一些坑，后来在网上查了一些资料，看了一些api文档，原来需要首次进入页面时候进行跳转微信提供的接口，首页获取url重定向中的code，所用方法是通过JS原生进行正则判断截取，获取当前code传给后台，拿到openId

3、cookie安卓没问题，iOS获取不到

      功能实现，用户填写信息页面，填写信息后点击协议，返回浏览器后退把之前的用户填写信息保存本地，再赋值，首先使用了cookie，本地模拟器可以正常的存值、

取值、但是在手机上Android没有问题，iOS取值为null，后来查了一下原因，原来是微信为了用户安全，会在你操作之前把本地的cookie清空，但是localStorage是没有问题的，localStorage在手机上和浏览器的都是没有问题，cookie保存的时间是1天，可以存值的时候设置为0.25，大概是25分钟左右，localStorage是不手动删除是不会过期的，除非你把浏览器关闭，否则是不会自动消失

4、vue使用@keyup.enter键盘事件不起作用

功能实现，在手机上用户点击确定或者前往的时候进行下一步操作，又是iOS的问题，本地用的是谷歌开发者工具，模拟器上没有问题，输入内容后，点击enter键可以进行下一步操作，手机上死活不行，后来查了一些资料才发现，vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符，注意！！！如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native

5、上传照片multiple属性在部分手机上不触发onchange事件

自己做了一个上传照片的插件，本身99.999%的手机都是没有问题的，but，就有一个非常特殊的手机不行vivo，死活点不了，事件都加上了，就是不弹出选择照片的框框，很是蛋疼，开始上网查各种资料，也是很少有这种意外的事情，决定还是从自己本身的代码去解决，最后找到了input 本身的multiple属性，W3C标准给的是该属性，则允许一个以上的值。果断先去掉试一下，真的没有问题了，看来还真是这个属性搞得鬼，另外提示一下，因为自己写的上传照片是没有向其他插件是的有自动压缩的功能的，所有一定要自己去压缩，没有经过处理的照片都是非常大的，再加上现在的这种网速，上传照片等待的时间太长，对于用户来说可能是以为卡了，体验很不好，压缩的办法有很多种，我使用的是base64进行的压缩

（持续进行更新中......）