zoukankan      html  css  js  c++  java
  • uniApp 条件编译

    参考C语言的,详细如下:

    • 大量写 if else,会造成代码执行性能低下和管理混乱。
    • 编译到不同的工程后二次修改,会让后续升级变的很麻烦。

    在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路,为 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% 可取值如下:

    生效条件
    VUE3 HBuilderX 3.2.0+ 详情
    APP-PLUS App
    APP-PLUS-NVUE或APP-NVUE App nvue
    H5 H5
    MP-WEIXIN 微信小程序
    MP-ALIPAY 支付宝小程序
    MP-BAIDU 百度小程序
    MP-TOUTIAO 字节跳动小程序
    MP-QQ QQ小程序
    MP-KUAISHOU 快手小程序
    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 ;
    • 使用条件编译请保证编译前编译后文件的正确性,比如json文件中不能有多余的逗号;
    • VUE3 需要在项目的 manifest.json 文件根节点配置 "vueVersion" : "3"

    上面说那么多 现在开始实战,我们分别以 vue  、js 、 css  来写:

     

    <template>
        <view>
            
            <!-- #ifdef H5 -->
            <view>这行文字 只有在H5的环境下才能被看到!</view>
            <!--#endif-->
            
            <!-- #ifdef MP -->
            <view>这行文字 只有在小程序(微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序)的环境下才能被看到!</view>
            <!--#endif-->
            
            <!-- #ifdef APP-PLUS -->
            <view>这行文字 只有在IOS / 安卓的环境下才能被看到!</view>
            <!--#endif-->
            
            <!-- #ifndef MP  -->
            <view>这行文字 只有在IOS / 安卓 / H5 的环境下才能被看到! 小程序不可能被看到!</view>
            <!--#endif-->
            
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    
                }
            },
            methods: {
                
            },
            onLoad() {
                //#ifdef MP-WEIXIN
                console.log("只有微信小程序才能看到我输出这行");
                //#endif
                //#ifdef H5
                console.log("只有H5才能看到我输出这行");
                //#endif
            }
        }
    </script>
    
    <style>
    
    </style>
    flagCompile.vue

    C3哪里没实践,按照这 /**/ 照猫画虎即可  很简单啊!

    本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/15271902.html

  • 相关阅读:
    C++中使用多线程
    hdu 4223 dp 求连续子序列的和的绝对值最小值
    hdu 1372 bfs 计算起点到终点的距离
    hdu 4217 线段树 依次取第几个最小值,求其sum
    心得
    hdu 1175 bfs 按要求进行搜索,是否能到达,抵消两个(相同)棋子
    hdu 4221 greed 注意范围 工作延期,使整个工作时间罚时最少的单个罚时最长的值
    hdu 2844 多重背包 多种硬币,每一种硬币有一点数量,看他能组成多少种钱
    uva LCDDisplay
    hdu 4218 模拟 根据一个圆点和半径画一个圆 注意半径要求
  • 原文地址:https://www.cnblogs.com/bi-hu/p/15271902.html
Copyright © 2011-2022 走看看