uni-app在不同平台 样式不同以及方法等 条件编译

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

根据不同的平台改变不同的样式

写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。

#ifdef:if defined 仅在某平台存在
#ifndef:if not defined 除了某平台均存在
%PLATFORM%:平台名称

条件编译写法 说明
#ifdef APP-PLUS 需条件编译的代码 #endif 仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif 除了 H5 平台,其它平台均存在的代码
#ifdef H5 “或” MP-WEIXIN 需条件编译的代码 #endif 在 H5 平台或微信小程序平台存在的代码(这里只有 “或”,不可能出现&&,因为没有交集)

上面的“或” 要用符号 || 代替

%PLATFORM% 可取值如下:

平台
APP-PLUS App
APP-PLUS-NVUE或APP-NVUE App nvue
H5 H5
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小程序
MP-TOUTIAO 字节跳动小程序
MP-QQ QQ小程序
MP-360 360小程序
MP 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION 快应用联盟
QUICKAPP-WEBVIEW-HUAWEI 快应用华为

支持的文件

.vue
.js
.css
pages.json
各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug
注意:

条件编译是利用注释实现的,在不同语法里注释写法不一样
,js使用 // 注释、css 使用 /* 注释 */、
vue/nvue 模板里使用 ;
条件编译APP-PLUS包含APP-NVUE和APP-VUE,APP-PLUS-NVUE和APP-NVUE没什么区别,
为了简写后面出了APP-NVUE ;

API 的条件编译

// #ifdef %PLATFORM%
平台特有的API实现
// #endif
uni-app在不同平台 样式不同以及方法等 条件编译_第1张图片

组件条件编译


平台特有的组件

<view>
    <view>微信公众号关注组件view>
    <view>
        
        
                <official-account>official-account>
            
    view>
view>

样式的条件编译

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */
/* #ifdef H5 */
        uni-page-head { display: none; }
    /* #endif */

uni-app在不同平台 样式不同以及方法等 条件编译_第2张图片

你可能感兴趣的:(uni-app,uni-app)