一、跨端兼容
每个端有每个端的特点，有的能被抹平，有的不可能被抹平。
跨端，不是把web的习惯迁移到全平台。而是按照uni的写法，然后全平台使用。
按照uniapp规范开发可以保证多平台兼容，但每个平台有自己的一些特性。
uni-app在跨平台的过程中，不牺牲平台特色，不限制平台的能力使用。
应用开发中，90%的常规开发，比如界面组件、联网等api，uni-app封装为可跨多端的API。
而各个端的特色功能，uni-app引入条件编译。可以优雅的在一个项目里调用不同平台的特色能力。
二、条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
支持的文件
- .vue/.nvue/.uvue
- .js/.uts
- .css
- pages.json
- 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
注意：
条件编译是利用注释实现的，在不同语法里注释写法不一样。
js/uts使用 // 注释 css 使用 /* 注释 */ vue/nvue/uvue 模板里使用 <!-- 注释 -->
使用条件编译请保证编译前和编译后文件的语法正确性，即要保障无论条件编译是否生效都能通过语法校验。
三、兼容处理
1、API兼容
1.1、选择图片的方法
从本地相册选择图片或使用相机拍照。
uni.chooseImage(OBJECT)
微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。
拍摄或从手机相册中选择图片或视频。
uni.chooseMedia(OBJECT)
这个方法目前App和H5端都不支持，所以我们要做兼容处理。
小程序端使用方法判断
// #ifdef MP-WEIXIN uni.chooseMedia({ count: 1, mediaType: ['image'], success: (res) => { console.log(res) } }) // #endif
H5和APP端使用方法判断
// #ifdef H5 || APP-PLUS uni.chooseImage({ count: 1, success: (res) => { console.log(res) } }); // #endif
1.2、微信登录
// #ifdef MP-WEIXIN wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) // #endif
1.3、微信支付
// #ifdef MP-WEIXIN wx.requestPayment({ timeStamp: '', nonceStr: '', package: '', signType: 'MD5', paySign: '', success(res) {}, fail(res) {} }) // #endif
2、样式兼容
2.1、小程序端不支持*选择器
不可以使用
* { color: #333; }
可以使用这样的写法
view, text { color: #333; }
2.2、页面视口差异（tabBar页，普通页）
小程序和APP底部的tabBar是不包含在页面高度里的，而H5端tabBar是包含的页面高度里面的。
2.2.1、定位时的兼容
不可以使用
.xxx{ position:fixed; bottom:0; }
可以使用这样的写法
.xxx{ position:fixed; bottom:var(--window-bottom); }
2.2.2、上拉加载更多的高度兼容
不可以使用
page{ height:100vh; }
可以使用这样的写法
page{ height:100%; }
2.3、H5端默认开启scoped
H5端是单页面应用，为了隔离页面间的样式默认启用了 scoped。
非H5端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性。
H5端默认启用了 scoped样式隔离，导致组件样式无效。
可以把组件样式抽离，组件中和页面中分别引入。
组件中引入样式
<style lang="scss"> // 此处引入组件样式 @import '@/components/styles/common.scss' </style>
页面中引入样式
<style lang="scss"> /* #ifdef H5 || APP_PLUS */ @import '@/components/styles/common.scss'; /* #endif */ </style>
3、组件兼容
3.1、button按钮的联系客服
需要处理只在小程序端生效
<!-- #ifdef MP-WEIXIN --> <button open-type="contact">客服</button> <!-- #endif -->
3.2、button按钮的获取手机号
需要处理只在小程序端生效
<!-- #ifdef MP-WEIXIN --> <button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button> <!-- #endif -->
四、判断平台
平台判断有 2 种场景，一种是在编译期判断，一种是在运行期判断。
- 编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。
// #ifdef H5 alert('只有h5平台才有alert方法'); // #endif
如上代码只会编译到 H5 的发行包里，其他平台的包不会包含如上代码。
- 运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台。
switch (uni.getSystemInfoSync().platform) { case 'android': console.log('运行Android上'); break; case 'ios': console.log('运行iOS上'); break; default: console.log('运行在开发者工具上'); break; }
如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。
