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

更新日志

2023/9/7 at 20:43 on [email protected]

• 添加$requirePrivacyAuthorize主动触发授权事件，对于需要授权的页面未添加授权组件时输出提示消息
• 添加专属icon配置文件

使用前置工作！！！

安装 uview-ui

npm install uview-ui

安装 uniapp-uview-components

npm install uniapp-uview-components

main.js 引入

import uView from "uview-ui";
import uniappUviewComponents from "uniapp-uview-components";
Vue.use(uView);
Vue.use(uniappUviewComponents)

uni.scss 引入

    @import 'uview-ui/theme.scss';

App.vue 引入

<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 配置

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

page.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"

"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回调事件 |

用法

<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回调事件 |

用法

<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 | 边框 |