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
代码块,进行编写判断。
网友评论