年初刚重构了微信小程序，没有做任何兼容支付宝的东西。4月，接到了支付宝的需求，开始做起了调研：微信小程序是17年初正式发布的，而支付宝是在18年初，仔细观察，其实两者非常相似，当然还有开发文档的那件事。第一次写文章，将自己遇到的一些问题记录下来

我使用的是uni框架，第一次编译至支付宝就遇到一个奇怪的问题，一个自定义组件未定义。。原来是开发时同学把这个组件定义在了pages.json里了，这个就有点无语了😓。来总结下这次开发遇到了那一些陷阱吧。

1:css内核不一致导致的样式错乱，这个基本大家都会遇到吧，没办法，只有手动一点一点的调试，喜大普奔的是js是不会在两个平台有兼容的问题（其实也有，同学的if语句：变量XXXX==“true” ，在微信不会有问题，支付宝上全为false）

2:ali报了所有自定义组件的错（‘Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders’），错误信息为在组件内重新定义了props的值，这不符合vue的理念了，但是仔细查看了我的代码，根本没有做任何操作呀，顶多就是computed计算属性封装了一下，后来发现这全是支付宝的误报操作，下面贴段代码，只有强制过滤掉，世界瞬间安静了🤫

Vue.config.warnHandler = function (msg) {  
  if (!msg.includes('Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.')) { 
    return console.warn && console.warn(msg)  
  }  
}

3:css改的正不亦乐乎的时候突然发现，我们后端某一模块的所有接口在模拟器上全都调不了，而ios是正常的，网络状态码200，body啥也没有，想想认为可能是编辑器的缘故，下载了一个最新编辑器，解决。因为本人没有安卓调试，直到最后测试突然发现，安卓也有这个bug，咨询支付宝客服，说是我们后端会返304，而安卓不支持。（非常常规的一个解释），直接在请求data加上一个字段，带上时间戳，也是不行，说明不是304的原因，等了客服3个小时，结果有了

接口返回的contentType，把charset=UTF-8 放到最后！！！

这个陷阱踩的，不看他源码，我们自己根本不可能排查出来

4:在做支付宝授权时，由于是使用uni，两边的button调取授权都没法进入授权成功回调，支付宝文档的示例会报错

googel一下⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

<template>
	<view>
      <button type="default" open-type="getAuthorize" @getAuthorize="getPhoneNumber" @error="onAuthError" scope='phoneNumber'>授权手机号</button>
	</view>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    getPhoneNumber() {
      this.onGetAuthorize()
        .then(res => {
          // console.log(res)
          var resData = JSON.parse(res.response);
          // console.log(resData);
          // 重新赋值方便后台获取
          var params = {
            phoneNumber: resData.response,
            sign: resData.sign
          };
          console.log(params);
        })
        .catch(err => {
          console.log(err);
        });
    },
    onGetAuthorize() {
      return new Promise((resolve, reject) => {
        my.getPhoneNumber({
          scopes: "auth_user",
          success: res => {
            resolve(res);
          },
          fail: res => {
            reject(res);
          }
        });
      });
    },
    onAuthError() {
      console.log("123321");
    }
  }
};
</script>
————————————————
版权声明：本文为CSDN博主「AS_TS」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/as_ts/java/article/details/102703899

5:navigateTo，跳转页面，所有页面均出现重复触发的现象，这个有点惨啊，只有手动做节流，开发成本着想，只在页面传参数的情况下做节流，其余接口获取参数的页面暂不做。节流代码网上一大堆，这个要注意的是函数传参。

6:做授权的时候，希望alipay能关心关心我们这些脱发猿，预览模式，调试窗口在授权界面打开时会被关闭，再次打开日志没有了😭，只有使用ide真机调试，奇怪的是，这和预览模式不一样啊，真机调试可以成功授权执行回调并登陆，预览模式居然不行？！！！