跨平台开发02-uni-app 核心语法.pptx

跨平台开发uni-app;;什么是uni-ui？

uni-ui是DCloud提供的一个UI组件库，一套基于Vue组件、flex布局的跨全端UI框架。

uni-ui不包括uni-app框架提供的基础组件，而是基础组件的补充。

详情：/component/uniui/uni-ui.html

uni-ui特点

高性能

目前为止，在小程序和混合app领域，uni-ui是性能的标杆。

自动差量更新数据。uni-app引擎底层会自动用diff算法更新数据。

优化逻辑层和视图层通讯折损。比如，需要跟手式操作的UI组件，底层使用了wxs、bindingx等技术，实现了高性能的交互体验

WXS（WeiXinScript）是小程序的一套脚本语言，结合?WXML，可以构建出页面的结构。在iOS设备上小程序内的WXS会比JavaScript代码快2~20倍。

bindingx技术提供了一种称之为表达式绑定(ExpressionBinding)?的机制，在weex上让手势等复杂交互操作以60fps的帧率流畅执行，而不会导致卡顿。

全端

uni-ui的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。

uni-ui还支持nvue原生渲染、以及PC宽屏设备

风格扩展

uni-ui的默认风格是中型的，与uni-app基础组件风格一致。

支持uni.scss?，可以方便的扩展和切换应用的风格。;方式一（推荐）：通过uni_modules（插件模块化规范）单独安装组件，通过uni_modules按需安装某个组件：

步骤1：官网找到扩展组件清单，然后将所需要的组件导入到项目，导入后直接使用，无需import和注册。

步骤2：通常我们还想切换应用风格，这时可以在uni.scss导入uni-ui提供的内置scss变量，然后重启应用。

注意：需要登录DCloud账号才能安装

方式二（推荐）：通过?uni_modules导入全部组件

如想把所有uni-ui组件导入到项目，可以借用HbuilderX插件导入。

如没自动导入其他组件，可下载源码复制过去即可。

方式三：在HBuilderX新建uni-app项目时，在模板中选择uni-ui模板来创建项目

由于uni-app独特的easycom（自动导包）技术，可以免引入、注册，就直接使用符合规则的vue组件。

方式四：npm安装

在?vue-cli?项目中可用?npm?安装?uni-ui?库

;1.安装dart-sass插件(一般都会提示，并自动安装)

2.在项目根目录的uni.scss文件中引入uni-ui组件库的variable.scss变量文件，然后就可以使用或修改对应的scss变量。

@import@/uni_modules/uni-scss/variables.scss;

3.变量主要定义的是主题色。

;uni-froms组件使用步骤（类似ElementPlus的表单组件用法）：

安装uni-forms等组件

uni-forms搭建表单布局

编写表单项的验证规则

提交表单时验证表单项

重置表单

;1.小程序、App直接重写，需要添加important

2.H5、App和小程序使用：global(selector)，需要添加important

3.H5、App和小程序使用：deep(selector)，需要添加important

;uni-app能实现一套代码、多端运行，核心是通过编译器+运行时实现的：

编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等。

运行时：动态处理数据绑定、事件代理，保证Vue和对应宿主平台数据的一致性；

跨平台存在的问题：

uni-app已将常用的组件、JSAPI封装到框架中，开发者按照uni-app规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

大量写ifelse，会造成代码执行性能低下和管理混乱。

编译到不同的工程后二次修改，会让后续升级变的很麻烦。

跨平台兼容解决方案：

在C语言中，通过#ifdef、#ifndef的方式，为windows、mac等不同os编译不同的代码。

?uni-app?参考这个思路，为?uni-app?提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

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

具体的语法：以?#ifdef?或?#ifndef?加?%PLATFORM%?开头，以?#endif?结尾。

#ifdef：if