每个人都可以，
拥有SSL证书

做UniApp久了会发现，跨平台这事，大部分时候靠条件编译和组件适配就能扛下来。写法上官方已经给了比较清晰的路径，但实际项目里怎么组织、什么地方容易乱，还是值得整理一下。

条件编译这功能，UniApp做得比较直接。

想在某几个平台才跑的代码，用 #ifdef 包裹，比如 #ifdef MP-WEIXIN，那这段代码就只在微信小程序里生效，App、H5这些端在编译时直接忽略。反过来，如果不希望某个平台出现，就用 #ifndef，例如 #ifndef H5，除了H5其他平台都会包含。块结束就是 #endif，跟C语言的预处理差不多。

JS里区分平台写业务逻辑很常见，比如微信登录和App端获取版本号：

// #ifdef MP-WEIXIN
wx.login({
  success: res => console.log('微信登录成功', res.code)
});
// #endif

// #ifdef APP
plus.runtime.getProperty(plus.runtime.appid, info => {
  console.log('App版本号:', info.version);
});
// #endif

样式也可以按平台来，尤其不同端的设计规范不一致时，直接在CSS里写条件编译就好：

/* #ifdef MP-WEIXIN */
.button {
  background-color: #1AAD19;
}
/* #endif */

/* #ifdef APP */
.button {
  background-color: #007AFF;
}
/* #endif */

HTML模板里同样能用，比如微信的 open-type 授权按钮跟App端普通按钮，直接分块写：

<!-- #ifdef MP-WEIXIN -->
<button open-type="getUserInfo">微信授权</button>
<!-- #endif -->

<!-- #ifdef APP -->
<button @click="appSpecificFunction">App功能</button>
<!-- #endif -->

基础组件这块，UniApp把常用的都做了统一。view 替代 div，默认支持 flex，swiper 做轮播，navigator 负责页面跳转，button 在微信里还能用 open-type 等扩展属性。

大部分时候直接拿过来用就行，不过有些平台特有属性还是得靠条件编译兜底。写个轮播图，基本就是下面这样，编译到各端都正常：

<template>
  <swiper :autoplay="true" interval="3000">
    <swiper-item v-for="(img, idx) in images" :key="idx">
      <image :src="img" mode="aspectFill"></image>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://example.com/img1.jpg',
        'https://example.com/img2.jpg'
      ]
    }
  }
}
</script>

业务复杂一些之后，就会用到扩展组件。官方推的 uni-ui 基本都处理过多端兼容，npm 安装按需引入就行了：

npm install @dcloudio/uni-ui

像评分组件，引入就能用，不用自己再写一套：

<template>
  <uni-rate :size="30" :value="3" @change="handleRateChange"></uni-rate>
</template>

<script>
import uniRate from '@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue';
export default {
  components: { uniRate },
  methods: {
    handleRateChange(e) {
      console.log('评分值:', e.value);
    }
  }
}
</script>

如果用的是第三方组件，没经过官方适配，那就还是得回到条件编译的老办法，不同平台引入不同组件：

<!-- #ifdef MP-WEIXIN -->
<custom-wx-component></custom-wx-component>
<!-- #endif -->

<!-- #ifdef APP -->
<custom-app-component></custom-app-component>
<!-- #endif -->

项目搞多了有几个习惯会比较省力。平台特有的代码尽量抽到独立文件里，通过条件编译去引，这样主逻辑清晰，改某个端不至于影响其他端。对差异明显的组件，可以自己封一层统一的 API，内部再根据平台走不同实现。还有一点，条件编译块里别塞太重、太长的逻辑，不然久了再看，自己都可能绕进去。最后，建议维护一个简单的平台差异表，记录各个 API 在微信、App、H5 上的表现差异，时间一长真的很管用。

整条链路走下来，代码复用率一般能到 80% 往上，同时各平台该有的特性一个也不少，开发效率会明显提一个档次。