网站优化防范,提高工作效率总结心得,鞍山信息港家讯房产,wordpress主题 响应式一. 前言
在使用 uni-app 进行跨平台开发的过程中#xff0c;经常会遇到需要针对不同平台或不同环境进行条件编译的情况。条件编译是一种在编译过程中根据指定条件选择不同代码路径的技术#xff0c;可以帮助我们在不同平台或环境下编写不同的代码#xff0c;以适应不同的平…一. 前言
在使用 uni-app 进行跨平台开发的过程中经常会遇到需要针对不同平台或不同环境进行条件编译的情况。条件编译是一种在编译过程中根据指定条件选择不同代码路径的技术可以帮助我们在不同平台或环境下编写不同的代码以适应不同的平台实现逻辑。
在 uni-app 中可以说条件编译是 uni-app 实现多端部署的核心思想通过条件编译我们可以根据当前的平台、环境或配置选项来控制代码的执行逻辑从而实现定制化的开发需求。
在我之前的开发项目中不止需要已有平台的条件编译还涉及到自定义平台条件编译以适应项目中同一套代码多端部署的场景。
通过本篇文章你将学习到以下知识 接下来我将详细介绍 uni-app 中条件编译的使用和自定义平台帮助大家更好地利用条件编译优化自己的应用开发过程。
二. 什么是编译器
uni-app 为什么能实现一套代码、多端运行多端部署的功能其最核心的功能是通过 编译器 运行时 实现的我梳理了一下如下图整体流程图所示 好家伙不看不知道一看吓一跳一堆小程序平台 1. 编译器和运行时
编译器将 uni-app 统一代码编译生成每个平台支持的特有代码如在小程序平台编译器将 .vue 文件拆分生成 wxml、wxss、js 等代码。
运行时动态处理数据绑定、事件代理保证 Vue 和平台宿主数据的一致性。
2. 编译器的实现逻辑
uni-app 项目根据所依赖的 Vue 版本不同编译器的实现也不同目前 uni-app 的代码支持 Vue 2 和 Vue 3 两种语言版本。
Vue 2 版本的 uni-app 编译器基于 Wepback 实现而 Vue 3 版本的 uni-app 编译器基于 Vite 实现编译速度更快。
可以通过 manifest.json 文件中切换 Vue 的使用版本如下图所示 3. 注意事项
初始化 uni-app 项目有两种方式通过 HBuilderX 创建和使用 cli 方式创建下面来说一下这两种创建方式在编译器方面的使用差异 使用 cli 方式创建的项目编译器安装在项目下编译器不会跟随 HBuilderX 升级。如需升级编译器可以参考更新依赖到指定版本。 使用 HBuilderX 创建的项目编译器在 HBuilderX 的安装目录下的 plugin 目录随着 HBuilderX 的升级会自动升级编译器。
因此为了避免出现一些更新问题建议使用 HBuilderX 直接创建项目便于适时更新到最新版的编译器优化一些 bug。 提示经常跟随官方更新也会有问题有些旧版本的代码在新版上有可能会不兼容注意可能有坑 三. 条件编译
uni-app 已经将常用的组件、API 封装到框架中我们可以按照 uni-app 规范开发即可保证多平台兼容大部分业务均可直接满足但每个平台有自己的一些特性因此必然会存在一些无法跨平台的情况。
详细了解可参见 uni-app 的相关文档说明 uni-app 组件使用手册https://uniapp.dcloud.net.cn/component/ uni-app API 使用手册https://uniapp.dcloud.net.cn/api/
当我们在写代码涉及到多平台时由于每个平台的实现代码可能有所不同因此如果是大量写 if else会造成代码执行性能低下和管理混乱编译到不同的工程后二次修改会让后续升级变的很麻烦。
由以上这个背景 uni-app 参考在 C 语言中的一些实践经验为其提供了类似的条件编译手段通过 #ifdef、#ifndef 的方式为小程序端、Web 端、App 端 等不同客户端编译不同的代码在一个工程里优雅的完成了平台个性化实现。
那么接下来我们看一下什么是条件编译及其使用方法
1. 什么是条件编译
条件编译其实是用特殊的注释作为标记在编译时根据这些特殊的注释将注释里面的代码编译到不同平台。
条件判断规则
以 #ifdef 或 #ifndef 加 %PLATFORM% 开头以 #endif 结尾。
完整的判断方式为 #ifdef %PLATFORM%
此部分为实现对应平台的代码
#endif参数说明
#ifdefif defined 仅在某平台存在 #ifndefif not defined 除了某平台均存在 %PLATFORM%平台名称
2. 支持的平台
目前 uni-app 条件编译所支持的平台大概有 24 个分别如下
引擎编译器相关
值生效条件值生效条件VUE3用于区分 vue2 和 3VUE2用于区分 vue2 和 3UNI-APP-X用于区分是否是 uni-app x 项目uniVersion用于区分编译器的版本
APP 相关
值生效条件值生效条件APPAppAPP-PLUS编译为 App 时APP-PLUS-NVUE 或 APP-NVUEApp nvue 页面APP-ANDROIDApp Android 平台APP-IOSApp iOS 平台
Web 相关
值生效条件值生效条件H5H5WEBweb
小程序相关
值生效条件值生效条件MP包括所有小程序MP-WEIXIN微信小程序MP-ALIPAY支付宝小程序MP-BAIDU百度小程序MP-TOUTIAO抖音小程序MP-LARK飞书小程序MP-QQQQ 小程序MP-KUAISHOU快手小程序MP-JD京东小程序MP-360360 小程序
快应用相关
值生效条件QUICKAPP-WEBVIEW包括所有快应用QUICKAPP-WEBVIEW-UNION快应用联盟QUICKAPP-WEBVIEW-HUAWEI快应用华为
3. 支持的文件
我们主要可以在以下的文件中使用条件编译如下所示 主文件包括 .vue/.nvue/.uvue 文件 API 文件包括 .js/.uts 文件 样式文件包括 css 文件和各预编译语言文件如.scss、.less、.stylus、.ts、.pug 文件 配置文件pages.json 文件
4. 注意事项
关于条件编译有以下几个注意事项需要在编程的过程中重点关注一下 条件编译是利用注释实现的在不同语法里注释写法不一样不要使用错误的注释编写代码可能会造成一些问题具体注释形式如下所示 在 js/uts 文件中 使用 // 注释 在 css 文件中 使用 /* */ 注释 在 vue/nvue/uvue 模板里使用 !-- 注释 --
四. 总结
条件编译是 uni-app 实现一套代码、多端运行多端部署的核心思想uni-app 在条件编译方面不止是处理 js任何代码都可以多端条件编译因此可以大大降低了在实际项目的多端开发时的繁琐问题。 五. 资源文档 uni-app 组件使用手册 uni-app API 使用手册 如果您感觉文章还不错关注一下再走吧
