uni-app 学习01

uni-ui 使用说明

---

初始化项目
在HBuilderX中新建uni-app项目，进入项目目录，执行

npm init -y

安装 uni-ui

npm install @dcloudio/uni-ui

使用 uni-ui
在script中引用组件：

import { uniBadge } from '@dcloud/uni-ui'
export default {
    components: { uniBadge }
}

在template中使用组件:

<uni-badge text = "1"></uni-badge>
<uni-badge text = "2" type="success" @click="bindClick"></uni-badge>

标准js和浏览器js的区别

---

uni-app的js代码，H5端运行于浏览器中。非h5端，iOS平台运行在iOS自带的jscore引擎中。

非H5端，不支持window、document、navigator等浏览器的js API， 但也支持ECMAScript。

ECMAScript由ECMA国际管理，是基础js语法。

* 浏览器基于标准js扩充了window、document等js API；
* Node.js基于标准js扩充了fs等模块；
* 小程序也基于标准js扩展了wx.xx、my.xx、swan.xx的API。

条件编译

---

API的条件编译

1、平台特有的API实现

//#ifdef APP-PLUS
平台特有的API实现
//#endif

2、如下代码不会在H5平台出现

//#ifndef H5
 todo
//#endif

3、如下代码会在App和H5平台上出现
除了支持单个平台的条件编译外，还支持多平台同时编译，使用 || 来分隔平台名称。

//#ifdef APP-PLUS || H5
平台特有的API实现
//#endif

组件的条件编译

<!-- #ifdef APP-PLUS -->
平台特有的组件
<!-- #endif>

样式的条件编译

/* #ifdef APP-PLUS */
平台特有样式
/* #endif*/

注意 ：样式的条件编译，无论是css还是sass/scss/less/stylus等预编译语言中，必须使用/*注释*/

static 目录的条件编译

static 目录下新建不同平台的专有目录（目录名称同 平台值域,但字母均为小写）
专有目录下的静态资源只有在特定平台才会编译进去

如以下目录结构，a.png 只有在App平台才会编译进去，b.png 在所有平台都会被编译。

┌─static                
│  ├─app-puls
│  │  └─a.png     
│  └─b.png
├─main.js        
├─App.vue      
├─manifest.json 
└─pages.json    

注意

---

** Android和iOS平台不支持通过条件编译来区分，通过调用uni.getSystemInfo来获取平台信息。在HBuilderX1.9.10起，支持ifios、ifAndroid代码块，进行编写判断。