# uniapp-uview-components 基于uview的unaiapp二次封装项目（目前主要适配微信小程序）


# 更新日志
### 2023/9/7 at 20:43 on <ibalbal@163.com>
+ 添加$requirePrivacyAuthorize主动触发授权事件，对于需要授权的页面未添加授权组件时输出提示消息
+ 添加专属icon配置文件

# 使用前置工作！！！

## 安装 uview-ui
```
npm install uview-ui
```

## 安装 uniapp-uview-components
```
npm install uniapp-uview-components
```

## main.js 引入
```js
import uView from "uview-ui";
import uniappUviewComponents from "uniapp-uview-components";
Vue.use(uView);
Vue.use(uniappUviewComponents)

```

## uni.scss 引入
```angular2html
    @import 'uview-ui/theme.scss';
```

## App.vue 引入
```angular2html
<style lang="scss">
    /* 注意style标签加入lang="scss"属性*/
    /*
        没有scss的看下面操作
        安装sass sass-loader，注意sass-loader需要版本10，否则可能会导致vue与sass的兼容问题而报错
        npm i sass sass-loader@10 -D
     */
    @import "uview-ui/index.scss";
    @import "uniapp-uview-components/index.scss";

</style>
```

## vue.config.js 配置
```js
// vue.config.js，如没有此文件则手动创建
module.exports = {
    transpileDependencies: ["uview-ui","uniapp-uview-components"]
}
```

## page.json 配置
```json
"easycom":{
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
    "^view-(.*)": "uniapp-uview-components/components/view-$1/view-$1.vue"
}
```


# API

> 使用微信隐私政策相关组件在2023/9/15号之前需要添加以下配置
>
> uniapp中 -> manifest.json -> "mp-weixin"
```json
"mp-weixin": {
    /* 添加以下配置 */
    "__usePrivacyCheck__": true,
},
```
> __usePrivacyCheck__ 开启后。使用对应的接口时需要在微信后台更新对应的接口隐私说明，不存在该接口隐私说明的可能无反应或报错


## view-agree-privacy 隐私政策组件
### props
| 属性                        | 类型      | 默认值                                                                  | 说明                                       |
|---------------------------|---------|----------------------------------------------------------------------|------------------------------------------|
| title                     | String  | 隐私政策概要                                                               | 标题当设置title时autoTitle不生效                  |
| autoTitle                 | boolean | false                                                                | 是否自动设置标题 默认false                         |
| subTitle                  | String  | 亲爱的用户，感谢您一直以来的支持!为了更好地保护您的权益，同时遵守相关监管要求，请认真阅读《xxx小程序隐私保护指引》，特向您说明如下: | 副标题                                      |
| agreePrivacyId            | String  | agree-btn                                                            | (可不配置)按钮id 当指定权限按钮id时要与该id对应             |
| disableCheckPrivacy       | boolean | false                                                                | 禁止自动检测隐私                                 |

### events
| 事件                       | 参数                       | 说明                                  |
|--------------------------|--------------------------|-------------------------------------|
| agree                    | buttonId                 | 用户点击同意事件   buttonId同意按钮的id                         |
| disagree                 | 无                        | 用户点击拒绝事件                            |
| needPrivacyAuthorization | resolve, eventInfo       | 当触发微信onNeedPrivacyAuthorization回调事件 |


### 用法
```vue
<template>
  <view>
    <!--  引入隐私组件  -->
    <view-agree-privacy @agree="agree" @disagree="disagree" @needPrivacyAuthorization="needPrivacyAuthorization"></view-agree-privacy>
    <u-button @getphonenumber="getphonenumber" open-type="getPhoneNumber"  text="获取手机号"></u-button>
    <u-button @click="test" text="主动触发隐私弹框"></u-button>
  </view>
</template>

<script>

  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    methods: {
      //主动触发隐私弹框
      test(){
        this.$requirePrivacyAuthorize({
          success:(res)=>{
            //同意
            console.log("success",res)
          },
          fail:(res)=>{
            //拒绝
            console.log("fail",res)
          },
          complete:(res)=>{
          }
        })
      },

      //触发授权回调
      needPrivacyAuthorization( resolve, eventInfo){
        console.log('触发本次事件的接口是：' + eventInfo.referrer)
      },
      // 同意
      agree(buttonId){
        console.log("buttonId", buttonId)
        console.log(".....agree")
      },
      // 不同意
      disagree(){
        console.log(".....disagree")
      },

      getphonenumber(e){
        console.log("e",e)
      }
    }
  }
</script>

<style>

</style>


```


## view-main 根组件

> 该组件一般用于根组件（后续会在该组件放入一些公共方法以方便调用）
>
> 目前该组件内包含 view-agree-privacy 用法与其组件相同


### props
| 属性                  | 类型     | 说明                                     |
|---------------------|--------|----------------------------------------|
| agreePrivacyConfig  | Object | 用于配置隐私弹框 详情预览view-agree-privacy组件props |

### events
| 事件                       | 参数                 | 说明                                  |
|--------------------------|--------------------|-------------------------------------|
| agree                    | buttonId           | 用户点击同意事件   buttonId同意按钮的id                         |
| disagree                 | 无                  | 用户点击拒绝事件                            |
| needPrivacyAuthorization | resolve, eventInfo | 当触发微信onNeedPrivacyAuthorization回调事件 |

### 用法
```vue
<template>
  <view>
    <view-main :agreePrivacyConfig="{title:'隐私保护政策说明'}" @agree="agree" @disagree="disagree" @needPrivacyAuthorization="needPrivacyAuthorization">
      <u-button  @getphonenumber="getphonenumber" open-type="getPhoneNumber"  text="获取手机号"></u-button>
    </view-main>
  </view>
</template>

<script>


  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    onLoad() {

    },
    methods: {
      getphonenumber(e){
        console.log("e",e)
      },
      needPrivacyAuthorization( resolve, eventInfo){
        console.log('触发本次事件的接口是：' + eventInfo.referrer)
      },
      agree(){
        console.log(".....agree")
      },
      disagree(){
        console.log(".....disagree")
      }
    }
  }
</script>

<style>

</style>

```

### slot
| 属性                  | 类型     | 说明                                     |
|---------------------|--------|----------------------------------------|
| default             | slot   | 主要用于存放子标签                              |


## view-card 卡片组件
| 属性        | 类型      | 默认值    | 说明             |
|-----------|---------|--------|----------------|
| show      | boolean | true   | 是否显示           |
| cardCss   | String  |        | 卡片的css         |
| styleBody | String  |        | 自定义slot中的style |
| bg        | String  | white  | 卡片背景色          |
| minHeight | String  |        | 卡片最小高度         |
| cardData  | {}      |        | 卡片携带的数据        |
| url       | String  |        | 卡片点击跳转的链接      |
| titleCss  | String  |        | 卡片顶部css        |
| title     | String  |        | 卡片title css    |
| border    | boolean | false  | 边框             |