使用iot-ui组件库方法

• 安装hap-toolkit, hap-toolkit版本>=0.0.37,查看hap-toolkit版本号执行 hap -V
• 组件使用了less,需要在项目中执行npm install --save-dev less-loader less
• 项目manifest.json文件config.designWidth需要设置成1080,组件库是按照设计宽度1080开发的
• 安装iot-ui组件库 npm install iot-ui --save
• 使用import标签引用组件例如使用Btn组件:

 <import name="Btn" src="iot-ui/Btn/index.ux"></import>

注意 ⚠️

• 2.0版本并不不兼容1.0的版本. 请详细查看每个组件的文档
• 如果想修改组件默认样式,请修改组件库下的theme.less文件
• 注意组件图片的引用路径.路径错误会导致图片无法显示.图片路径请使用绝对路径或者http地址,例如你的 icon.png图片在 /src/Mydir/icon.png下,那么绝对路径就是/Mydir/icon.png
• 有的示例使用了prompt,manifest.json文件需要添加接口声明,接口声明示例
• 如果使用IOT接口,manifest.json文件需要添加接口声明{"name": "service.iot"},然后import IOT from '@service.iot' 或 const IOT = require('@service.iot')
• 组件是按照1080设计宽度开发的,manifest.json文件config.designWidth需要设置成1080,可以参考页面样式与布局-方案一

环境要求

Node.js (>= 8.9.*), Npm version 4+(Yarn preferred), and Git.

组件

• Btn 按钮
• Btns 按钮组
• CheckBox 选项
• ISwitch 开关
• Loading
• Modal 对话框
• ActionSheet 对话框
• NavBar 导航栏
• ConfigNetSteps 配网步骤
• TwoLevelList 二级列表

运行本项目

# 克隆项目
git clone https://github.com/vivoquickapp/iot-ui.git your-project-name
# 进入目录
cd your-project-name
# 安装依赖包
npm install
# 监听打包快应用
npm run watch
# 打开服务器,扫描安装快应用
npm run server