uniapp一套代码实现多端运行_前端怎么实现一套代码多端发布

一、为何使用uniapp

uni-app 是一个使用 Vue.js 开发所有前端应用的开源框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）等多个平台。

uni-app 使用 vue 的语法、小程序的标签和API。具有 vue 和微信小程序的开发经验，可快速上手 uni-app。
uni-app 最大的特点就是一套代码编译以后多端通用，开发人员不需要在每个平台都单独开发一套代码就可以同时生成安卓、iOS、H5、小程序等等。节省了大量的成本。

二、使用uniapp多端运行

大量写 if else，会造成代码执行性能低下和管理混乱。编译到不同的工程后二次修改，会让后续升级变的很麻烦。在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

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

写法：以 #ifdef 或 #ifndef 加%PLATFORM% 开头，以 #endif 结尾。
官方中定义了许多%PLATFORM%
 

详细请见文档 跨端兼容 | uni-app官网

三、示例

 只在APP中显示
 

 只在H5中显示

除了APP中其他平台都显示