本文主要是介绍uniapp开发多端应用项目时的常见跨端兼容处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、跨端兼容
每个端有每个端的特点，有的能被抹平，有的不可能被抹平。
跨端，不是把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;
}
如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。
这篇关于uniapp开发多端应用项目时的常见跨端兼容处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
