当前位置: 移动技术网 > IT编程>开发语言>JavaScript > uni-app跨端兼容开发(条件编译)

uni-app跨端兼容开发(条件编译)

2020年07月08日  | 移动技术网IT编程  | 我要评论

我的项目是一套基于uni-app开发的兼容H5跟微信小程序的项目
所以在开发时难免有不一样的地方,这就需要区分平台进行开发了

因为我也是第一次遇到这种问题,所以一开始也不知道该用什么方法解决,在uni-app的官方文档中有这么一篇文档 条件编译 | 跨端兼容 文档连接

跨端兼容

uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。

但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
因为在开发时我用的编辑器是HBuliderX是支持这种开发模式的,所谓的条件编译就是通过特殊的注释作为标记来实现的
写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
例:H5的注释语法案例
在这里插入图片描述
这种注释就是此段代码只在H5存在
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码块支持
在 HBuilderX 中开发 uni-app 时,通过输入 ifdef 可快速生成条件编译的代码片段
在这里插入图片描述
语法高亮

在 HBuilderX 中对条件编译的代码注释部分提供了语法高亮,可分辨出写法是否正确,使得代码更加清晰(独立js文件需在编辑器右下角切换javascript es6+编辑器,独立css文件暂不支持高亮,但不高亮不影响使用)

在这里插入图片描述
正确注释和快速选中

在 HBuilderX 中,ctrl+alt+/ 即可生成正确注释(js:// 注释、css:/* 注释 */、vue/nvue模板: )。

点击 ifdef 或 endif 可快速选中条件编译部分;点击左侧的折叠图标,可折叠条件编译部分代码。
在这里插入图片描述
注意
Android 和 iOS 平台不支持通过条件编译来区分,如果需要区分 Android、iOS 平台,请通过调用 uni.getSystemInfo 来获取平台信息。支持ifios、ifAndroid代码块,可方便编写判断。
有些跨端工具可以提供js的条件编译或多态,但这对于实际开发远远不够。uni-app不止是处理js,任何代码都可以多端条件编译,才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码,很不利于复用和维护。举例,微信小程序主题色是绿色,而百度支付宝小程序是蓝色,你的应用想分平台适配颜色,只有条件编译是代码量最低、最容易维护的。
有些公司的产品运营总是给不同平台提不同需求,但这不是拒绝uni-app的理由。关键在于项目里,复用的代码多还是个性的代码多,正常都是复用的代码多,所以仍然应该多端。而个性的代码放到不同平台的目录下,差异化维护。

本文地址:https://blog.csdn.net/lwaner/article/details/107097967

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网