知识

uni-app官方文档传送门: 条件编译(点我) 相信很多刚接触uni-app的童鞋都不太喜欢先看完整官方文档。总会碰到很多不懂的地方第一时间上网搜答案,就比如在uni-app模版看到的#ifdef MP,这

您当前位置>主页 > 知识 > APP开发 >

uni-app条件编译:#ifdef #ifndef #endif

发表时间:2020-07-30 16:17

文章来源:admin

浏览次数:

uni-app官方文档传送门:条件编译(点我)

相信很多刚接触uni-app的童鞋都不太喜欢先看完整官方文档。总会碰到很多不懂的地方第一时间上网搜答案,就比如在uni-app模版看到的#ifdef MP,这是什么鬼?

对于学过C语言的童鞋并不陌生,因为这是条件编译语句

为什么会出现在uni-app里呢?因为uni-app的特性---一份代码,多平台运行。没错,就是一套代码,可以在android ios 各个小程序和h5上运行,因此为了代码简洁性引入的条件编译,

#ifdef   #ifndef  #endif(其实官网介绍的也很详细)

标准的语法


  1.  
    // #ifdef %PLATFORM%
  2.  
    %PLATFORM%为平台名称
  3.  
    这里的内容只会编译在该平台
  4.  
    // #endif

可以看到其实以#ifdef开头 #endif结尾,但是注意一下就会发现前面双斜杠,这里是注释标记

也就是说在各个代码块里的注释不一样,注释标记就要切换掉,比如


  1.  
    js:  // #ifdef
  2.  
    tag标签: <!--  #ifdef  -->
  3.  
    css样式: /*  #ifdef  */

解释一下语句是什么意思

#ifdef :       if defined  仅在某个平台编译

#ifndef :     if not defined  在除里该平台的其他编译

#endif :       end if 结束条件编译

%PLATFORM%       需要编译的平台,上面的MP就是各个小程序的意思

uni-app支持的各个平台(下面官网copy过来的)

平台 参考文档
APP-PLUS 5+App HTML5+ 规范
APP-PLUS-NVUE 5+App nvue Weex 规范
H5 H5  
MP-WEIXIN 微信小程序 微信小程序
MP-ALIPAY 支付宝小程序 支付宝小程序
MP-BAIDU 百度小程序 百度小程序
MP-TOUTIAO 头条小程序 头条小程序
MP-QQ QQ小程序 (目前仅cli版支持)
MP 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序  

示例 如果只需要在微信小程序上编译某段代码的话


  1.  
    // #ifdef MP-WEIXIN
  2.  
    我是那个代码
  3.  
    // #endif

uni-app是逻辑和渲染分离的,渲染层在app端提供了两套排版引擎。
小程序方式的webview渲染,和weex方式的原生渲染,两种渲染引擎可以自己根据需要选。
vue文件走的webview渲染
nvue走weex方式的原生渲染

组件和js写法是一样的,css不一样,原生排版的能用的css必须是flex布局

uni-app的App端内置了一个基于weex改进的原生渲染引擎,提供了原生渲染能力。
在App端,如果使用vue页面,则使用webview渲染;如果使用nvue页面(native vue的缩写),则使用原生渲染。一个App中可以同时使用两种页面,比如首页使用nvue,二级页使用vue页面,hello uni-app示例就是如此。

虽然nvue也可以多端编译,输出H5和小程序,但nvue的css写法受限,所以如果你不开发App,那么不需要使用nvue。

nvue 和 vue 相互通讯

在 uni-app 中,nvue 和 vue 页面可以混搭使用。

推荐使用uni.$on,uni.$emit的方式进行页面通讯


作者:wyc0859
链接:https://www.jianshu.com/p/6705eeb8eb3a
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关项目查看更多