uniapp使用条件编译#ifdef（跨平台设备兼容）

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

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

大量写 if else，会造成代码执行性能低下和管理混乱。

编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 #ifdef、#ifndef的方式，为 windows、mac等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

条件编译

官方文档：https://uniapp.dcloud.io/platform条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

常用写法：

以#ifdef或 #ifndef加%PLATFORM%开头，以 #endif结尾。

css样式

/*  #ifdef  APP-PLUS  */
width: 60upx;
height: 60upx;
/*  #endif  */

html标签

/*  #ifdef  APP-PLUS  */
<button type="default"></button>
/*  #endif  */

js函数

change() {
	// #ifdef APP-PLUS
	statusbarHeight = plus.navigator.getStatusbarHeight()
	// #endif
}

扩展

#ifdef：if defined 仅在某平台存在；
#ifndef：if not defined 除了某平台均存在；
%PLATFORM%：平台名称写法如下：

支持：

  • .vue
  • .js
  • .css
  • pages.json
  • 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

注意:： 条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 ；

以上就是uniapp使用条件编译#ifdef（跨平台设备兼容）的详细内容，更多关于uniapp使用条件编译#ifdef（跨平台设备兼容）的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • uniapp开发打包多端应用完整方法指南

    一.uni-app项目介绍 用uni-app开发多端项目,一套代码可同时打包出各端小程序.h5和app,uni-app支持通过 HBuilderX可视化界面 和 vue-cli命令行 两种方式创建项目,下面示例项目采用 HBuilderX可视化界面 的方式创建,cli项目可参考uni文档,大部分流程都是通用的. 项目结构: ├── components 公用组件 ├── libs 公共方法 ├── pages 页面 ├── static 本地静态资源,注意:静态资源只能存放于此 ├── stor

  • uniapp使用高德地图的超详细步骤

    目录 1.项目前准备 2.页面创建引入 3.地图实现js 4.地图实现单点标记 5.地图实现终点与起点标记 6.最后 上代码~ 总结 1.项目前准备 1.1.首先你需要去申请一个属于自己的高德地图key,怎么申请暂不多说需要的去官网看 1.2.链接: 高德地图申请key直通车,点击前往. 有一个uniapp项目. 2.页面创建引入 新建一个uniapp的空白页 使用web-view 渲染html文件页 <web-view src="/hybrid/html/adminr.html"

  • uniapp页面间传参的几种方法实例总结

    目录 前言 一.上级页面 → 下级页面(单向) uni.navigateTo:URL编程式传参 <navigator>标签传参 二.上级页面 ← 下级页面(单向) uni.$on(eventName,callback):监听事件 触发事件 三.上级页面 ↔ 下级页面(双向) 上级页面内代码 总结 前言 在Uniapp中的传参主要分为以下三种类型: 上级页面 → 下级页面(单向)上级页面 ← 下级页面(单向)上级页面 ↔ 下级页面(双向) 本文将围绕这三种传参展开,分享其使用方法以及我使用中所遇

  • uniapp语音识别（讯飞语音）转文字

    常见应用:游戏界面 文字语音.商城导航栏的语音输入搜索框.聊天界面的语音文字输入等. 引自官方 unicloud官方语音: 语音输入接口可使得网页开发人员能快速调用设备的麦克风进行语音输入,而不需要安装额外的浏览器插件.规范不定义底层语音识别引擎的技术架构,浏览器实现可基于语音识别服务器或本地内置语音识别模块. 配置SDK–识别讯飞语音(如果用不了讯飞语音,可换百度语音,自己去看接入文档) 进入项目根目录下的 manifest.json -> App模块配置->speech 勾选 讯飞语音识别

  • 使用uniapp打包上架微信小程序完整教程

    首先打开manifest.json下的微信小程序配置 ,勾选所有 点击“发行” 点击发行 这时候就会跳转到微信小程序中,如果没出现以下错误可以跳过此步骤 在本地设置中勾选“不校验合法域名........” 输入版本号和备注后点击上传   在微信小程序官网中点击“版本管理”,下面有个刚刚的开发版本 点击提交审核 填写信息 直接提交会出现以下问题 点击我知道了,再次点击 “更新当前版本的用户隐私协议” 进入后填写以下信息 填写完成后返回再次提交 以上就是使用uniapp打包上架微信小程序完整教程的详

  • uniapp实现h5、app与微信小程序三端pdf文件下载和预览功能

    以下代码兼容三端,app,h5,微信小程序,经过个人测试 手机端有两种方法,使用renderjs或者uniapp的api 两者的区别 使用renderjs的写法,会提示用户是否下载文件,下载完成后用户需要手动点击下载的文件,才会打开文件 使用uniapp的api则可以直接下载并直接预览,不需要用户操作 根据场景需求进行选择即可 <template> <div> <!-- #ifdef APP-PLUS --> <button @click="test.e

  • 手把手教你写一个uniapp通用页面组件

    目录 前言 需求 开发 初始化页面数据 实现状态栏与底部配置 页面使用 总结 前言 做移动端项目时为了兼容各种手机型号的界面,最好有一个统一的页面组件对样式做统一处理,例如:判断是否显示状态栏,是否显示头部导航,是否空出底部区域等等,本篇会带大家从零到一开发一个 uniapp 的通用页面组件 需求 本次开发的页面,组件,需要完成以下功能 可配置控制是否显示原生导航,显示状态栏,并且也可以控制状态栏颜色 可配置控制是否留出底部固定区域 开发 初始化页面数据 编写页面组件类,获取系统配置,初始化样式

  • uniapp打包安卓App的两种方式(云打包、本地打包)方法详解

    在HBuilder上对APP提供了两种打包方式,云打包和本地打包,下面主要对这两种打包方式做个介绍 两者的区别:云打包相对简单,但是每天最多只能打包五次,而且在高峰期打包时间可能会很长,本地打包相对比较复杂,但是不限制次数,打包时间也短 一. uniapp云打包安卓App: 只需要设置相应参数即可.比较复杂的地方可能就是证书,如果你是测试包,Android的话直接选择共用证书即可,ios则需要申请相应证书,申请证书的具体方法官方也介绍的很清楚了,就不赘述了. 二. uniapp本地打包安卓App

  • uniapp微信小程序打卡功能的详细实现流程

    uniapp微信小程序打卡功能的详细实现流程

    目录 一.vue后台地图选地点 step1| 注册账号并申请Key step2| 设置 JSAPI 安全密钥的脚本标签 step3| 地图选点页面demo 二.uniapp微信小程序打卡 step1| 获取key step2| manifest.json中配置权限 step3| 获取定位地址与经纬度 三.核心流程描述 总结 一.vue后台地图选地点 step1| 注册账号并申请Key 请参考链接注册账号并申请Key 部分 step2| 设置 JSAPI 安全密钥的脚本标签 注意事项: 必须在vu

  • uniapp使用条件编译#ifdef（跨平台设备兼容）

    uni-app 已将常用的组件.JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足. 但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况. 大量写 if else,会造成代码执行性能低下和管理混乱. 编译到不同的工程后二次修改,会让后续升级变的很麻烦. 在 C 语言中,通过 #ifdef.#ifndef的方式,为 windows.mac等不同 os 编译不同的代码. uni-app 参考这个思路,为 uni-app 提供了条件编译手

  • uniapp 获取系统信息的方法小结

    目录 一.uni.getSystemInfo(OBJECT) 二.uni.getSystemInfoSync() 三.总结 uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息. 系统信息返回的内容非常多,各操作系统.各家小程序.各浏览器对它们的定义也不相同.uni-app里重新梳理了这些概念,同时为了向下兼容也保留了这些平台原来的概念,但不推荐使用. 按照运行环境层级排序,从底层向上,uni-app有6个概念

  • 浅谈VUE uni-app 核心知识

    目录 规范 a. 页面文件遵循vue单文件组件规范 b. 组件标签靠近小程序规范 c. 接口能力(JS API)靠近微信小程序规范 e. 数据绑定及事件处理使用Vue.js 规范 特色 a. 条件编译 b. App端的Nvue开发 c. HTML5+ 总结 规范 a. 页面文件遵循vue单文件组件规范 <!-- 模板块 --> <template> <view class="main"> {{msg}} </view> </temp

  • 解析C++编程中的#include和条件编译

    解析C++编程中的#include和条件编译

    文件包含的作用 所谓"文件包含"处理是指一个源文件可以将另外一个源文件的全部内容包含进来,即将另外的文件包含到本文件之中.C++提供了#include命令用来实现"文件包含"的操作.如在file1.cpp中有以下#include命令: #include ″file2.cpp″ 它的作用见图示意. "文件包含"命令是很有用的,它可以节省程序设计人员的重复劳动. #include命令的应用很广泛,绝大多数C++程序中都包括#include命令.现在,

  • .NET Core跨平台资源监控工具CZGL.SystemInfo用法

    .NET Core跨平台资源监控工具CZGL.SystemInfo用法

    目录 简介 dotnet tool 体验 CZGL.SystemInfo SystemPlatformInfo ProcessInfo 内存监控 NetworkInfo DiskInfo Linux 直接使用 简介 CZGL.SystemInfo 是一个支持 Windows 和 Linux 等平台的能够获取机器硬件信息.采集机器资源信息.监控进程资源的库. 在不引入额外依赖的情况下,使用 .NET Runtime 本身的 API,或通过计算获得信息,提供高性能的计算方式以及缓存,提高性能,还提供

  • 判断iOS、Android以及PC端的示例代码

    前言 我们在做移动端时,在跨平台.浏览器.移动设备兼容的时候,要根据设备.浏览器做特定调整,想起用navigator.userAgent来对浏览器类型进行判断,查了点资料,在这里总结下 还有一个就是移动端的缩放问题,在meta标签中进行设置,对部分浏览器进行强制性的限制 1.navigator的一些常用属性 navigator为window对象的一个属性,指向了一个包含浏览器相关信息的对象 navigator.appVersion 浏览器的版本号 navigator.language 浏览器使用

  • 使用contextMenu插件实现Bootstrap table弹出右键菜单

    使用contextMenu插件实现Bootstrap table弹出右键菜单

    如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中,其中"开发高效,设备兼容"的特点表现得非常明显.再加上它默认的美观的UI组件,简直就是很多前端的大爱啊!!! 今天在这里跟大家分享Bootstrap table弹出右键菜单的实现方法. 最近遇到有一个需求,需要在Bootstrap table上使用右键.网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/wenzhixin/bootstra

  • 双缓冲解决VC++绘图时屏幕闪烁

    双缓冲解决VC++绘图时屏幕闪烁

    通常来说程序根据需要调用Invalidate(FALSE)使窗口客户区无效引起重绘,然后在窗口OnPaint函数(基于文档视图的程序则是OnDraw)中进行稳定绘图就行了.但是,我们在OnPaint中进行多重绘制(画背景.棋盘.棋子等),前后绘制的反差造成了闪烁现象.以前知道Java中解决屏幕闪烁问题是用双缓冲的方法,现在发现在vc++中也是可以这么做的.简单来说,双缓冲就是先把需要绘制的东西全部一口气画在内存中,最后把内存中的数据搬到屏幕上显示. 最近做中国象棋,绘制界面时遇到些问题,绘图过程

  • 深入浅析Node.js单线程模型

    深入浅析Node.js单线程模型

    Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这个问题来探讨Node.js的单线程模型: 1.高并发 一般来说,高并发的解决方案就是多线程模型,服务器为每个客户端请求分配一个线程,使用同步I/O,系统通过线程切换来弥补同步I/O调用的时间开销,比如Apache就是这种策略,由于I/O一般都是耗时操作,因此这种策略很难实现高性能,但非常简单,可以实

  • 易被忽视的js事件问题总结

    一.跨平台事件 什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同. 什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有属性.主要处理DOM事件和IE事件的磨合,使其尽可能的相似. 下面我们来看一下DOM和IE之间的对象属性和方法做个对比(这里只指出两者之间不同的属性和方法),主要有以下五大点: DOM属性和方法   IE属性和方法 charcode               keycode preventDefa

随机推荐