ifdef 仅出现在XXx平台上

仅出现在 App 平台下的代码

#ifdef APP-PLUS
需条件编译的代码
#endif
<!-- 只在H5上有哈 -->
<!-- #ifdef H5 -->
<view>
我只会出现在h5上
</view>
<!-- #endif --> <!-- 只在小程序上有哈 -->
<!-- #ifdef MP-WEIXIN -->
<view>
我只会出现在小程序上
</view>
<!-- #endif -->

除了 H5 平台,其它平台均存在的代码

#ifndef H5
需条件编译的代码
#endif
<!-- #ifndef H5 -->
<view>
除了H5平台,其他的平台都存在的哈
</view>
<!-- #endif -->
在写条件编译时,需要注意的点。千万别忘记写
<!-- XX -->这个是必须要有的。
否者不能够产生条件编译
代码只有在支付宝小程序中才能够生效
<!-- #ifdef MP-ALIPAY -->
<view class="demo">
我在支付宝中才有的
</view>
<!-- #endif --> //仅在支付宝小程序中生效
/* #ifdef MP-ALIPAY */
.demo{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
background: #1AAD19;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
font-size: 30rpx;
padding: 10rpx;
}
/* #endif */
最后总结一下
条件编译是利用注释实现的,在不同语法里注释写法不一样,
js使用 // 注释、
css 使用 /* 注释 */、
vue/nvue 模板里使用 <!-- 注释 -->
json文件使用 // 注释、

uni-app之条件编译的更多相关文章

  1. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  2. uni app 零基础小白到项目实战-1

    uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...

  3. uni app以及小程序 --环境搭建以及编辑器

    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据以上网页下载自己电脑相应的版本的微信开发者工具(目录 ...

  4. uni app canvas 不生效

    canvas 创建canvas绘图上下文. <canvas style="width: 300px; height: 200px;" canvas-id="firs ...

  5. uni app 零基础小白到项目实战2

    <template> <scroll-view v-for="(card, index) in list" :key="index"> ...

  6. uni app 零基础小白到项目实战

    $emit 子组件传给父组件 $ref 父组件操作子组件 公用模板 uni-app全局变量的几种实现方法 const websiteUrl = 'http' const now = Date.now ...

  7. uni app中关于图片的分包加载

    因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...

  8. 5G到来,App的未来,是JavaScript,Flutter还是Native ?

    Native App React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发.与H5开发不同的是,它使用JS桥接技术在运行时编译成各个平台的Nativ ...

  9. uni-app: 如何实现增量更新功能?

    都知道,很多APP都有增量更新功能,Uni APP也是在今年初,推出了增量更新功能,今天我们就来学习一波. 当然,很多应用市场为了防止开发者不经市场审核许可,给用户提供违法内容,对增量更新大多持排斥态 ...

  10. Vue接口日常学习

    最近使用uni.app 进行app的开发  页面搭完之后,发现不会调接口,今天学习了下 各个程序运行时,都会发起网络请求,网络相关的API在使用之前都会在使用前配置域名白名单 首先   现在中间件上一 ...

随机推荐

  1. vue-quill-editor 自定义图片上传和视频上传

    安装 npm install vue-quill-editor --save 在main.js  引入 import 'quill/dist/quill.core.css' import 'quill ...

  2. vue-elementui中el-table跨页选择和v-if导致列错乱/选择框无法显示

    在vue-elementui中使用el-table,当type="selection"的时候,分页数据进行不同页跳转选择 需要这种功能的时候我们需要在el-table的标签上为每个 ...

  3. ETCD存储满了如何处理?

    一.前言 当运行 ETCD 日志报 Erro: mvcc database space exceeded 时,或者查看健康状态显示 failed to commit proposal: Active ...

  4. JS 正则表示式 字符串匹配 忽略大小写

    在项目中遇到了需要使用字符串进行正则匹配,同时还要忽略大小写可以按照以下方法:1 先使用new RegExp(newVal, 'i')生成需要匹配的规则,其中 'i' 表示忽略大小写2 再对相应的字符 ...

  5. kubernetesApi官方文档

    kubernetes API官方文档在github上经常打不开,于是就放在博客了,以下内容均复制于github All URIs are relative to http://localhost Me ...

  6. 基于Spring源码分析AOP的实现机制

    Spring一个重要的特性就是提供了AOP,使得我们可以在原有的基础上增加我们自己的系统业务逻辑.使得我们系统业务逻辑与应用业务逻辑相分离,耦合性降低,并且大大的提高了开发的效率.Spring的AOP ...

  7. Golang网络模型netpoll源码解析

    0.引言 在学习完了Socket编程的基础知识.Linux系统提供的I/O多路复用的实现以及Golang的GMP调度模型之后,我们进而学习Golang的网络模型--netpoll.本文将从为什么需要使 ...

  8. Jetpack Compose学习(14)——ConstraintLayout约束布局使用

    原文地址: Jetpack Compose学习(14)--ConstraintLayout约束布局使用-Stars-One的杂货小窝 本文阅读之前,需要了解ConstraintLayout的使用! 各 ...

  9. 数据万象AVIF图片压缩 - 小程序省流量利器

    导语 微信小程序因其便捷的开发环境和天然的微信生态,使得越来越多企业平台通过小程序建立自己的业务.在小程序上使用图片非常广泛,但传统格式图片(如 JPG/PNG)占用空间大,加载速度慢,可能导致昂贵的 ...

  10. Linux 网络设置及管理

    Linux 网络管理 网络管理 1.使用NetworkManager管理网络 NetworkManager(网络管理器)是一个动态网络的控制器与配置系统,它用于当网络设备可用时保持设备连接和开启并激活 ...