更新记录

2.2.2（2024-05-12）

1.添加登录组件，10+模板，10+组件更新 2.2.2.2demo发布到小程序

2.2.0（2024-03-23）

1.新增更多的项目示例 2.demo发布到小程序

1.0.7（2023-06-19）

1.新增权限控制方法$ui.roles 需要配合vuex使用

平台兼容性

云函数类插件通用教程

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

shadow-ui 影子UI

所有功能源自网络，模仿为主。打造全，便捷的ui库。可以查看演示。下载的项目只有部分功能，完整项目需要用git，

只需要你发图过来就能通过这个项目生成对应组件和Ui

项目中使用到开源项目/库

1.async-validator
2.xe-utils
2.luch-request

部署流程

1. 完整main.js如下：

    import Vue from 'vue'
    import App from './App'
    import store from './store'

    Vue.config.productionTip = false

    // 引入全局UI
    import shadowUi from '@/uni_modules/shadow-ui'
    Vue.use(shadowUi)

    App.mpType = 'app'

    const app = new Vue({
        store,
        ...App
    })
    app.$mount()

2.完整uni.scss 如下：

    // 影子UI基础参数配置 开始
    // 文字尺寸 
    $ui-font-size:28rpx;

    // 颜色 
    $primary:#01AAED;   //主色
    $success:#009688;   //成功
    $fail:#FFC107;      //失败
    $warning:#FF5722;   //警告
    $danger:#ee0a24;    //危险
    $info:#8799A3;      //信息

    $borderColor:#d9d9d9; //所有页面的边框颜色
    $bgColor:#eaeef1; // 所有页面背景颜色

    $focusBorderColor:#40a9ff; // 获取焦点的边框样色
    $focusBoxShadow:#40a9ff33; // 获取焦点的边框影子样色

    $focusErrBorderColor:#ff4d4f; // 获取焦点的边框错误样色
    $focusErrBoxShadow:#ff4d4f33; // 获取焦点的边框错误影子样色
    // 影子UI基础参数配置 结束

    // 上下居中 比较常用所以放到了全局
    @mixin ui-flex-center(){
        display: flex;
        justify-content: center;
        align-items: center;
    }

3.完成安装组件命令

npm install

组件命名规范

1.组件export default {} 必须保护 name

2.上述name命名规则:ui+组件名称 egg: uiAlert

注意事项

1.部分版本小程序不支持text标签 用作图标

2.page的背景色不能有 scoped 小程序不生效的

// 请求示例

    async onClick(){
        let e = await this.$store.dispatch('workGoodsType/getTypeList')
        console.log(e)
    }

演示地址

客服咨询