# weui-miniprogram

**Repository Path**: hihopeorg/weui-miniprogram

## Basic Information

- **Project Name**: weui-miniprogram
- **Description**: 基于样式库weui-wxss开发的适配ohos的扩展组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-10-13
- **Last Updated**: 2022-09-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## weui-miniprogram组件库
#### 简介

小程序功能扩展组件库

![img](miniprogram.gif)



## 下载安装
```shell
npm install @ohos/weui_miniprogram
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。


#### 使用说明

 1、底部弹起的操作按钮组件
 ```
 <actionsheet id="actionsheet"  
      actions="{{groups}}"  
      title="这是一个标题，可以为一行或者两行"  
      @actiontap="itemClick"></actionsheet>
 ```
 2、用于多张图片展示，类似原生的previewImage的展示。
 ```
  <gallery id="gallery"  
       show-value="{{showValue}}"  
       @hide="hide" @change="change"  
       @delete="delete"  
       img-urls="{{images}}"></gallery>  
 ```
 3、半屏弹窗，辅助完成当前页面任务时
 ```
    <half-screen-dialog id="typeT" closabled="{{false}}">
                <text class="title_two" slot="title">测试标题A</text>
                <text class="desc_text" slot="desc">这是自定义描述区</text>
                <div style="flex-direction: row;" slot="footer">
                    <text slot="footer" class="footer_one">按钮A</text>
                    <text slot="footer" class="footer_two">按钮B</text>
                </div>
            </half-screen-dialog>
 ```
4、小程序的顶部导航组件
   ```
 <navigation  title="UI组件库"  
      loading="{{waiting}}"  
      color="{{color}}"  
      background="{{background}}"  
      show-value="{{showValue}}"  
      animated="{{animated}}"></navigation>
   ```

5、Toptips顶部错误提示组件
   ```
 <toptips type="error"  
     ext-class="top100"  
     msg="距离顶部100px"  
     show-value="{{ show1 }}"></toptips>
   ```
## 目录结构
````
|---- entry
|     |---- common  # 公共资源文件夹 
|           |---- style  # 公共样式文件夹 
|     |---- pages  # 示例代码文件夹       
|---- weui-miniprogram   
|     |---- common  # 库文件夹               
|     |     |---- component  # 自定义组件文件夹                  
|     |     |---- doc  # readme文档夹                  
|     |     |---- images  # 图片资源文件夹               
|     |     |---- style  # 公共样式文件夹              
         
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/weui_miniprogram/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/weui_miniprogram/pulls) 。

## 开源协议
本项目基于 [MIT](https://gitee.com/hihopeorg/weui_miniprogram/blob/master/LICENSE) ，请自由地享受和参与开源。