uniapp 自定义条件编译

1、条件编译

对应某个特殊平台进行单独编写代码,js、css、json皆可条件编译
在这里插入图片描述

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

2、拓展条件编译

比如发布h5,但是可能会放到不同的浏览器里面(qq、钉钉、微信浏览器中),由于浏览器不同,可能会有些微差异需要进行单独适配,拓展条件编译
官网添加条件编译说明
现在可以争对h5进行条件编译,所以钉钉、qq等浏览器都是可以识别这个编译的,但是现在还需要做一个只有钉钉才能识别的编译条件,qq不能识别
拓展方式如下:(官网直接搬运说明)

{
    /**
     * package.json其它原有配置 
     * 拷贝代码后请去掉注释!
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置,可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "browser":"",  //运行到的目标浏览器,仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": "",  //基准平台
                    "MY_TEST": "", // ... 其他自定义环境变量
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量,建议为大写
                }
            }
        }    
    }
}

在这里插入图片描述

示例:钉钉h5

1、添加配置


"uni-app": {
	"scripts": {
		"h5-dingtalk": { 
		"title":"钉钉h5发布", 
			"env": { 
				"UNI_PLATFORM": "h5" 
			},
			"define": { 
				"H5-DINGTALK": true 
			}
		}
	}
}

代码中使用H5-DINGTALK进行条件编译,如下:

// #ifdef H5
h5平台通用代码(含钉钉、qq等)
// #endif
// #ifdef H5-DINGTALK
钉钉平台通用代码(钉钉可以识别、qq等其他浏览器识别不了)
// #endif

在这里插入图片描述

运行及发布项目:

vue-cli开发者可通过如下命令,启动钉钉小程序平台的编译:

//开发
npm run dev:custom h5-dingtalk
//发布
npm run build:custom h5-dingtalk

在这里插入图片描述

HBuilderX会根据package.json的扩展配置,在运行、发行菜单下,生成自定义菜单(钉钉h5发布),开发者点击对应菜单编译运行即可,如下图:
在这里插入图片描述
在这里插入图片描述
注意:假设 h5这个是第一级,下面的钉钉、qq、微信等浏览器作为第二级,条件编译只能拓展第二级,不能拓展第一级

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp中,我们可以使用条件编译来根据不同的平台执行不同的代码。在给定的代码中,我们可以看到通过`is_iOS()`函数来判断当前平台是否为iOS,并根据判断结果呈现不同的视图。具体实现是在`common.js`文件中定义了一个全局函数`is_iOS()`,通过`uni.getSystemInfoSync().platform`获取当前系统平台,如果是iOS则返回`true`,否则返回`false`。在页面中,我们使用`v-if`和`v-else`指令来根据`is_iOS()`的返回结果呈现不同的视图。 同时,根据给定的引用内容,我们可以看到在代码中还有一个条件编译的示例。在这个示例中,通过`#endif`指令来结束条件编译的代码块,而在`#if`和`#endif`之间的代码只会在特定条件下执行。具体来说,这段代码在判断条件为真时执行。 总结来说,给定的代码示例展示了在uniapp中使用条件编译来根据不同的平台执行不同的代码。在第一个示例中,我们通过判断当前平台是否为iOS来呈现不同的视图。在第二个示例中,我们可以看到一个条件编译的代码块,其中的代码只会在特定条件下执行。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uniapp-条件编译安卓Android/苹果iOS](https://blog.csdn.net/Jo_liver/article/details/110997075)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [uniapp,开始编译... 一直不运行](https://blog.csdn.net/qq_27909209/article/details/130975042)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [反编译开源影视视频APP源码 绿豆影视对接苹果CMS 支持多功能自定义DIY页面布局](https://download.csdn.net/download/winkexin/88244788)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值