https://github.com/tencentyun/iot-panel-component
腾讯连连标准面板组件库
https://github.com/tencentyun/iot-panel-component
iot panel taro
Last synced: about 1 year ago
JSON representation
腾讯连连标准面板组件库
- Host: GitHub
- URL: https://github.com/tencentyun/iot-panel-component
- Owner: tencentyun
- Created: 2021-09-22T07:56:51.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-23T09:50:34.000Z (about 3 years ago)
- Last Synced: 2025-04-21T14:04:07.544Z (about 1 year ago)
- Topics: iot, panel, taro
- Language: TypeScript
- Homepage: https://tencentyun.github.io/iot-panel-component/
- Size: 1.31 MB
- Stars: 2
- Watchers: 44
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# qcloud-iot-panel-component
腾讯连连标准面板组件库，支持在 h5 面板和 Taro 小程序中使用。
## H5 使用
```bash
yarn add qcloud-iot-panel-component
```
开始引用组件：
```ts
/* panel.tsx */
// 引入组件库的css
import 'qcloud-iot-panel-component/lib/index.css';
import { BoolWidget } from 'qcloud-iot-panel-component';
```
## 小程序使用
使用 [Taro](https://github.com/NervJS/taro) 的 [HTML编译功能](https://taro-docs.jd.com/taro/docs/use-h5)，我们可以将`qcloud-iot-panel-component`使用在小程序中，在这之前需要先将 Taro 版本升级到 3.3 以上。
1. 在config中配置如下：
```js
plugins: [
['@tarojs/plugin-html', {
// 包含 `iotp-` 的类名选择器中的 px 单位不会被解析
pxtransformBlackList: [/iotp-/]
}]
],
```
除了上述配置外，使用方法上与h5相同:
```ts
// 引入组件库的css
import 'qcloud-iot-panel-component/lib/index.css';
import { BoolWidget } from 'qcloud-iot-panel-component';
```
## 开发
```bash
yarn #安装依赖
yarn dev #开发组件
yarn build #打包组件
# 最后执行 yarn docs 可以实时预览组件效果
yarn docs
```
在小程序中使用本地包时，可以执行以下命令：
```bash
# 在组件库目录
yarn build
yarn pack # 生成 qcloud-iot-panel-component-v0.0.xx.tgz
# 在小程序目录下
yarn add path/to/qcloud-iot-panel-component-v0.0.xx.tgz
```