更新记录

1.0.4(2022-08-03)

  • 添加作用域插槽:third,可自定义第三方账号登录样式

1.0.3(2022-07-12)

  • 修改样式
    • 按钮颜色:若配置的渐变$hic-login-btn-bg-color不生效,使用背景颜色$hic-login-bg-color
  • 添加参数
    • autoClearPwd:删除账号,是否自动清空密码
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
3.1.0 app-vue × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× ×

hic-login 登录组件

基本用法

示例

  • 修改登录组件主题颜色:uni.scss文件引入默认的scss自定义变量

    @import '~@/uni_modules/hic-login/theme.scss';

    或者不引入,直接在uni.scss文件添加scss自定义变量

    $hic-login-bg-color: #4e9eeb;       // 背景颜色
    $hic-login-input-bg: #f8f8f8;       // 输入框背景颜色
    $hic-login-triangle-color: #5057cb; // 输入框右侧三角颜色
    $hic-login-btn-bg-color: linear-gradient(45deg, #0081ff, #1cbbb4);  // 按钮背景渐变色
    $hic-login-btn-color: #fff;         // 按钮文字颜色
    // 文字大小
    $font-xl: 19px;
    $font-df: 30rpx;
    $font-light: #c0c4cc;   // 文字颜色
  • 组件示例

<hic-login
    logo="/static/images/logo/logo_white.png"
    title="益农数字农业"
    :props="props"
    :history="history"
    :thirdProps="thirdProps"
    wxProfile
    @login="handleLogin"
    @remove="remove"
    @third-login="thirdLogin"
    @wx-login="wxLogin">
    <template #user>
        <text class="cuIcon-my form-input"></text>
    </template>
    <template #pwd>
        <text class="cuIcon-unlock form-input"></text>
    </template>
    <template #bottom>
        <view>福建海智信息技术有限公司</view>
        <view class="text-center">0591-88515005</view>
    </template>
</hic-login>

对应script

export default {
    data() {
        return {
            props: {account: 'loginName', password: 'password'},
            history: [],
            thirdProps: [
                { provider: 'weixin', text: '微信授权', icon: 'cuIcon-weixin', color: 'lines-green' }
            ]
        }
    },
    methods: {
        handleLogin(form) {
            // 表单验证
            console.log(form);  // {loginName: '13xxx81', password: '123'}
        },
        remove(item, index) {
            uni.showModal({
                title: '提示',
                content: `确定删除账号${item.loginName}?`,
                success: (res) => {
                    this.history.splice(index, 1);
                }
            });
        },
        thirdLogin(res) {
            console.log(res);   // {errMsg: "login:ok", code: "xxx"}
        },
        wxLogin(data) {
            console.log(data);  // {code: "xxx", userInfo: {nickName: 'xx', gender: '0', avatarUrl: 'http://xxx'}}
        }
    }
};

对应css

.form-input {
    font-size: 45rpx;
    color: $hic-login-triangle-color;
    margin: 0 10rpx;
}
.cuIcon-weixin:before {
    content: "\e612";
}
.text-green, .line-green, .lines-green {
    color: #39b54a;
}
  • 可以修改pages.json,取消默认的原生导航栏
{
    "path": "pages/login/login",
    "style": {
        "navigationBarTitleText": "登录",
        "navigationStyle": "custom"
    }
}

API

hic-login Props

参数 说明 类型 可选值 默认值
logo logo图片地址 String
title 标题 String
props 返回的form字段,参数history,配置选项,具体看下表 Object { account: 'account', password: 'password' }
btnText 登录按钮文字 String 登录
history 历史登录账号列表,配置选项同props Array []
thirdProps 第三方账号登录配置,具体看下表 Array []
wxProfile 微信授权,是否需要通过wx.getUserProfile获取用户信息 Boolean true/false false
loading 是否加载中 Boolean true/false false
autoClearPwd 删除账号 是否自动清空密码 Boolean true/false false

props Options

参考:{account: 'loginName', password: 'password'}

参数 说明 类型 默认值
account 用户名对应字段 String account
password 密码对应字段 String password

thirdProps Options

参考:{ provider: 'weixin', text: '微信授权', icon: 'cuIcon-weixin', color: 'lines-green' }

参数 说明 类型
provider 登录服务提供商,通过 uni.getProvider 获取 String
text 文字 String
icon 显示Icon对应的class String
color Icon颜色对应的class String

hic-login Slot

name 说明
logo logo部分的显示方式
user 用户名前Icon
pwd 密码前Icon
tips 密码输入框、登录按钮之间
bottom 底部显示方式
wx-authorize wxProfile为true时,微信授权显示方式
third 第三方账号登录 每一个item(作用域插槽 参数: item)

hic-login Events

事件名 说明 参数
remove 删除历史登录账号 item, index
login 点击登录按钮,按props配置返回输入内容 {[account], [password]}
third-login 第三方账号登录 {code: 'xxx'}
wx-login wxProfile为true时,微信授权登录 {code: 'xxx', userInfo: {...}}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问