更新记录

1.0.0（2026-05-20） 下载此版本

实现华为AGC云函数调用，示例项目结合华为登录的unionid实现云函数查询云数据库

平台兼容性

uni-app(5.05)

uni-app x(5.03)

其他

lsx-login

简介

lsx-login 是一款专为 HarmonyOS Next (鸿蒙) 平台设计的 UTS 原生插件。实现华为登录卡片功能，该插件自动获取用户昵称，头像，unid。

功能特性

• ✅ 原生性能：基于 ArkTS 开发，直接调用鸿蒙系统 API。
• ✅ 类型安全：内置完善的 TypeScript/UTS 类型定义。
• ✅ 灵活传参：支持传入 Object 对象或 JSON 字符串作为云函数参数。
• ✅ 异常捕获：统一的错误处理机制，方便前端调试。

使用方式

需要在设备中登录华为账号。

<template>
    <view class="page-container">
        <!-- 卡片主体 -->
        <view class="card">
            <!-- 头部：头像区域 -->
            <view class="card-header">
                <image 
                    :src="displayAvatar" 
                    class="avatar-img" 
                    mode="aspectFill"
                    @error="onImageError"
                ></image>
            </view>

            <!-- 中部：用户信息 -->
            <view class="card-body">
                <text class="nickname">{{ nickName }}</text>
                <text class="union-id" v-if="unionID">ID: {{ unionID }}</text>
                <text class="hint-text" v-else>点击登录获取信息</text>
            </view>

            <!-- 底部：操作按钮 -->
            <view class="card-footer">
                <button @click="dj" class="login-btn" :class="{ 'logged-in': unionID }">
                    {{ unionID ? '重新登录' : '华为账号登录' }}
                </button>
            </view>
        </view>
    </view>
</template>

<script>
    import { login } from '@/uni_modules/lsx-login'

    export default {
        data() {
            return {
                nickName: '未登录',
                log: '', // 存储登录返回的头像URL
                unionID: '',
                defaultAvatar: '/static/logo.png' // 默认头像路径
            }
        },
        computed: {
            // 计算属性：决定显示哪张图片
            displayAvatar() {
                return this.log ? this.log : this.defaultAvatar;
            }
        },
        methods: {
            dj() {
                // 简单的加载状态反馈（可选）
                if (!this.unionID) {
                    uni.showLoading({ title: '登录中...' });
                }

                login({
                    suc: (data) => {
                        uni.hideLoading();
                        console.log('登录成功数据：', data);

                        // 更新数据
                        this.nickName = data.nickName || '未知用户';
                        this.unionID = data.unionID || '';
                        this.log = data.avatarUri || ''; 

                        uni.showToast({
                            title: '登录成功',
                            icon: 'success'
                        });
                    },
                    fail: (err) => {
                        uni.hideLoading();
                        console.error('登录失败：', err);
                        uni.showToast({
                            title: '登录取消或失败',
                            icon: 'none'
                        });
                    }
                });
            },
            onImageError(e) {
                console.warn('图片加载失败', e);
            }
        }
    }
</script>

<style>
    /* 页面背景 */
    .page-container {
        min-height: 100vh;
        background-color: #f5f7fa; /* 浅灰背景，突出卡片 */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
    }

    /* 卡片样式 */
    .card {
        width: 100%;
        height:100%;
        max-width: 60%; /* 限制最大宽度 */
        max-height: 100%;
        background-color: #ffffff;
        border-radius: 46px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.3s ease;
    }

    /* 头像区域 */
    .card-header {
        margin-bottom: 40px;
    }

    .avatar-img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 3px solid #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background-color: #eee;
    }

    /* 信息区域 */
    .card-body {
        text-align: center;
        margin-bottom: 30px;
        width: 80%;
    }

    .nickname {
        display: block;
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
    }

    .union-id {
        display: block;
        font-size: 12px;
        color: #999;
        background-color: #f8f8f8;
        padding: 4px 8px;
        border-radius: 4px;
        display: inline-block;
    }

    .hint-text {
        font-size: 12px;
        color: #ccc;
    }

    /* 按钮区域 */
    .card-footer {
        width: 100%;
    }

    .login-btn {
        width: 100%;
        height: 44px;
        line-height: 44px;
        font-size: 16px;
        border-radius: 22px;
        background: linear-gradient(135deg, #007dff, #005bea); /* 渐变蓝 */
        color: #fff;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 125, 255, 0.3);
        transition: transform 0.1s;
    }

    .login-btn:active {
        transform: scale(0.98);
    }

    /* 登录后按钮样式变化 */
    .login-btn.logged-in {
        background: #fff;
        color: #007dff;
        border: 1px solid #007dff;
        box-shadow: none;
    }
</style>

开发文档

UTS 语法 UTS API插件 UTS uni-app兼容模式组件 UTS 标准模式组件 Hello UTS