更新记录

1.0.0（2024-03-21）

初次发布

平台兼容性

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

使用方法：

在页面中引入js即可，例如：import {textBecomeImg} from "@/uni_modules/cxk-cloud-avatar/js_sdk/avatar.js";

然后直接调用，例如：let image = textBecomeImg('陈晓')；

代码示例：

<template>
    <view class="container">
        <view class="example">
        </view>
        <view class="filter-bar" >
        </view>
        <view class="data-list" >
            <!-- 用户列表 -->
                <uni-row>
                    <uni-col :span="21">
                        <uni-list-item :title="user.nickName" :note="user.createTime" showArrow
                            :thumb="user.headImg" thumb-size="lg" clickable >
                        </uni-list-item>
                    </uni-col>
                </uni-row>
        </view>
    </view>
</template>

<script>
    import {textBecomeImg}  from "@/uni_modules/cxk-cloud-avatar/js_sdk/avatar.js";// 绘制文字头像工具
    export default {
        components: {
        },
        data() {
            return {
                user:{},
            }
        },
        onShow(options) {//监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
            this.getList();
        },
        onLoad () {
        },
        mounted() {
        },
        methods: {
            /** 查询用户列表 */
            getList() {
                this.user = {
                    "createTime": "2024-01-25 14:40:56",
                    "userName": "demo",
                    "nickName": "演示账户",
                };
                this.user.headImg = textBecomeImg('陈晓');    
            },
        }
    }
</script>

<style>
    page{
        height: 100%;
    }
    .container{
        height: 100%;
        display: flex; 
        flex-direction: column;
    }
    .example {
      padding: 15px;
      background-color: #fff;
    }
    /* 筛选栏样式开始 */
    .filter-bar{
        /* height: 100rpx; */
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        padding: 0 10px;
        /* position: sticky; */
    }
    /* 筛选栏样式结束 */

    /* 数据列表样式 */
    .data-list{
        overflow-y: auto; 
        flex: 1; 
        width: 100%;
    }
</style>

各位觉得好用的话，动动发财的小手给个五星好评!!!