uniapp怎么判断是微信还是支付宝小程序

1. 前言

随着移动互联网的普及，小程序已经成为了移动互联网的重要组成部分，UniApp则是其中比较火热的一款开发框架，因为它可以同时开发多种小程序，如微信、支付宝、百度等等。但不同的小程序平台之间会有些许的差异，因此需要针对不同的小程序平台进行不同的开发，今天我们就来谈谈如何在开发 UniApp 时区分微信小程序和支付宝小程序。

2. 如何判断是微信还是支付宝小程序

2.1 全局对象 wx 或 my

在 UniApp 开发微信小程序时，可以直接使用 wx 全局对象对微信小程序的 API 进行开发，如下：

wx.login({

  success (res) {
    if (res.code) {
      // 发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

而支付宝小程序则需要使用 my 全局对象，如下：

my.getLocation({

  success(res) {
    console.log(res);
  },
  fail() {
    my.alert({ title: '定位失败' });
  },
});

因此，我们可以通过判断当前全局对象是 wx 还是 my 来判断当前运行的是微信小程序还是支付宝小程序。

if (typeof wx !== 'undefined') {

  // 微信小程序
} else if (typeof my !== 'undefined') {
  // 支付宝小程序
}

2.2 获取小程序运行环境参数 platform

UniApp 小程序在初始化运行时，会根据当前平台自动注入全局对象（如上面提到的 wx / my 等），同时还会注入一个小程序运行环境参数 uni.getSystemInfoSync().platform。通过获取该参数，我们也可以判断当前运行的是微信小程序还是支付宝小程序。

if (uni.getSystemInfoSync().platform === 'wechat') {

  // 微信小程序
} else if (uni.getSystemInfoSync().platform === 'Alipay') {
  // 支付宝小程序
}

3. 如何根据不同的小程序做不同的适配

针对不同的小程序平台，可能需要做出不同的适配，以下是一些常见的适配场景。

3.1 样式适配

微信小程序和支付宝小程序在样式适配上可能会有些许差异，这时可以使用条件编译语句来解决。以底部菜单栏为例，微信小程序和支付宝小程序对应的 tabbar 标签分别如下：

<span class="hljs-comment">//微信小程序</span>

<tabbar>
  <tabbar-item></tabbar-item>
</tabbar>
<span class="hljs-comment">//支付宝小程序
<tabbar>
  <tabbar-item></tabbar-item>
  <tabbar-item></tabbar-item>
  <tabbar-item></tabbar-item>
</tabbar>

这时我们可以使用条件编译语句来隐藏多余的 tabbar-item，具体实现如下：

<span class="hljs-comment">//微信小>序</span>

<tabbar>
  <tabbar-item></tabbar-item>
  <tabbar-item></tabbar-item>
  <tabbar-item></tabbar-item>
  <tabbar-item></tabbar-item>
  <tabbar-item></tabbar-item>
  <tabbar-item></tabbar-item>
  <tabbar-item></tabbar-item>
 #ifdef MP-WEIXIN
  <tabbar-item></tabbar-item>
  #endif
</tabbar>
<span class="hljs-comment">//支付宝小程序</span>
<tabbar>
  #ifdef MP-ALIPAY
  <tabbar-item></tabbar-item>
  <tabbar-item></tabbar-item>
  <tabbar-item></tabbar-item>
  #endif
</tabbar>

3.2 API 适配

微信小程序和支付宝小程序在某些 API 的调用方式上也可能存在差异，这时可以使用条件编译语句来判断并进行不同的调用。例如，获取用户信息的 API 在微信和支付宝小程序中的调用方式如下：

<span class="hljs-comment">//微信小程序</span>

wx.getUserInfo({
  success(res) {
    console.log(res)
  }
})
<span class="hljs-comment">//支付宝小程序</span>
my.getAuthUserInfo({
  success(res) {
    console.log(res);
  }
});

这时我们可以使用条件编译语句来判断当前小程序平台，然后进行不同的 API 调用。具体实现如下：

#ifdef MP-WEIXIN

wx.getUserInfo({
  success(res) {
    console.log(res)
  }
})
#endif
#ifdef MP-ALIPAY
my.getAuthUserInfo({
  success(res) {
    console.log(res);
  }
});
#endif

4. 总结

通过全局对象和小程序运行环境参数，我们可以很容易地判断当前运行的是微信小程序还是支付宝小程序。同时，在样式和 API 调用方面可能会存在些许差异，针对这些差异，我们可以使用条件编译语句来进行适配。希望这篇文章能够对开发 UniApp 小程序的同学们有所帮助。