小程序动态class_基于mpvue构建微信和支付宝小程序（3）

（3）—— 踩坑篇

why?为啥会有这个系列？

无论是百度和google，关于mpvue构建小程序的项目讲的都是管中窥豹，没有一个系统的讲解。

本系列是关于基于mpvue同时构建微信和支付宝小程序的笔记，而网上大部分教程都在聊微信小程序，支付宝小程序大家聊的都很少，因此在该系列文章当中会基于大家在做同构支付宝和微信小程序当中一定会遇到的小程序的问题做一个深入的总结和分析，讲一些大家没有踩过的坑，讲解一些大家没有看过的东西。

what?要讲什么？

遭遇到的阻力主要来自于

不同api的使用方法

Mpvue只做了一些简单的弥合，更多复杂的东西就像前面讲到的一样，需要我们自己去封装一层。

具体的可以参考

makePhoneCall(number)
if (mpvuePlatform === 'wx')
mpvue.makePhoneCall(
phoneNumber: String(number) // 仅为示例，并非真实的电话号码
})
} else if (mpvuePlatform === 'my')
mpvue.makePhoneCall(
number: String(number) // 仅为示例，并非真实的电话号码
})
}

过多的不再赘述

mpvue本身的一些神奇的事情

神奇的主要是在api和部分文件上

1. 神奇的input

• input上v-model.lazy的值在watch当中没有问题，但是如果在method当中使用的时候会出现一定程度上的延迟。
  比如同步使用手机号去发请求，可能就会出现问题，导致mobile的值无法及时的更新。
• input上如果使用了v-model.lazy在支付宝小程序当中的@blur和@focus会失效
• 如果在input当中使用常量的正确姿势:enableNative='false'

1. 神奇的form和button在使用上报formId的时候，支付宝和微信不能公用同一个按钮，会出现一圈是额外的border
   解决办法：
   用v-if去判断是微信还是支付宝（如果非要用button的话，支付宝button默认样式比较恶心，暂时没找到更好的办法）
2. 神奇的v-if和v-show
   在支付宝当中强烈建议都使用v-if，v-show在根据某个动态更新的字段判断时，经常不生效，v-if无此问题
3. 神奇的class和style如果在同一个元素上挂两个动态加载的类
   :class=“{‘zIndex10': showOrderDetailFlag,'special-footer': isIphoneX}”
   在支付宝当中只能生效一个，在微信当中正常使用
   解决办法：
   支付宝当中嵌套使用，把两个动态挂载的class嵌套的挂载在外层元素上，以确保内层元素style

神奇的支付宝小程序

1. 神奇的input和键盘当input区域和键盘区域有重叠的时候，ios12.0-ios12.1.4(目前只测试了这么多)，input失去焦点之后，原来键盘的区域会出现一片空白，详情，可以看视频和复现的demo

解决办法：

:enableNative='false'
用这个属性可以解决（也没懂为啥哦）

1. 神奇的请求头'content-type': 'application/json'
   在支付宝当中请求头对大小写是敏感的，换用Content-Type会在部分10.1.55版本的小程序当中出现问题（其实我也没搞懂啥原理）
   解决办法：支付宝当中统一使用'content-type': 'application/json'
   微信暂无发现此类问题
2. 神奇的文档支付宝很多的文档感觉写的含糊不清，懂得都懂。
   解决办法：提工单咯，不得不说，支付宝的工单系统做的还可以，响应很及时（但是这样感觉真的成本很高哎）。
3. 没有社区就意味着没有足够丰富的答案。总是一句话：不要说了，自己猜吧，猜不透问官方

线上问题

线上问题，无论是支付宝还是微信小程序，线上版本几乎都是不可调试的，那么如何调试和定位问题呢？

如何定位问题？

有条件的同学建议把小程序接入node,借助自己的日志系统去定位和解决一些线上的问题

如何解决问题？

体验版和正式版环境是类似的，可以尝试用体验版去模拟线上的一些问题，然后每次自己更新代码之后，发到体验版，用体验版去测试自己代码是否正常

终极解决办法

不搞小程序（滑稽）