AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

微信小程序开发之自定义组件（会议OA项目其他页面搭建）

2023-11-15 101
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序开发之自定义组件（会议OA项目其他页面搭建）


前言

      老铁们好啊，今天又到了日常知识点的时候了。我们一起来回顾一下上期博客我们都收货到了什么，首先我们先是了解到了什么是FLex弹性布局，以及将弹性布局运用在实例中去展示效果以及演示了利用mock.js实现模拟后台数据交互，最后搭建会议OA首页界面。今天我要给大家带来的是微信小程序中的自定义组件的知识分享以及搭建会议OA其他界面。

一、WeChat中的自定义组件

1. 基本概述

       微信小程序中的自定义组件是一种可以在小程序中复用的组件。它由一个独立的文件夹组成，包含了相应的 wxml、wxss 和 js 文件。通过自定义组件，可以将页面上的一些模块化的功能或样式封装成一个组件，然后在不同的页面中重复使用。

       使用自定义组件的好处是提高代码的复用性和可维护性。当多个页面都需要某个功能或样式时，只需要在不同的页面中引用同一个自定义组件即可，减少了重复编写相同代码的工作量。同时，自定义组件也可以实现封装复杂的逻辑和交互，使页面结构更加清晰。

       自定义组件有自己的一套生命周期和数据传递机制。在组件的 js 文件中，可以定义组件的属性、方法和生命周期函数，用于实现组件的特定功能。在引用组件的页面中，可以通过设置属性值传递数据给组件，并通过事件机制与组件进行交互。

2. 包含文件及作用

自定义组件文件

文件 作用
.json 用于配置自定义组件的基本信息，例如组件的名称、引用时的标签名、是否启用插槽等。
.wxml 定义自定义组件的模板。可以使用小程序的模板语法，包括数据绑定、条件判断、循环等。
.wxss 设置自定义组件的样式。对应的是组件内部的样式，并不会影响到使用组件的页面。
.js 编写自定义组件的逻辑部分。你可以在这里定义组件的属性、方法和生命周期函数，实现组件的功能。

       在自定义组件中，通过使用 properties 字段来声明组件的属性，这样可以让页面在使用组件时进行数据的传递。通过在组件内部使用 this.properties 来获取传递进来的属性值。另外，还可以在组件中定义响应事件，并通过this.triggerEvent() 来触发事件并传递数据给页面。

       要在页面中使用自定义组件，需要在页面的 .json 文件中进行注册，以便能够在页面的模板中引用。注册时需要指定自定义组件对应的文件路径和组件名。

3. 自定义组件的作用

微信小程序自定义组价有以下作用：

  1. 提高开发效率：通过将页面拆分为多个自定义组件，可以使开发团队更高效地并行开发。每个组件负责一部分功能，可以独立调试和测试，同时也方便重复使用。
  2. 规范化UI：自定义组件可以根据设计规范建立一套UI风格，确保小程序中各个页面和组件的一致性。这有助于提升用户体验并增加小程序的品牌价值。
  3. 提供丰富的功能：自定义组件可以封装一些常见的功能和交互效果，比如轮播图、下拉刷新、导航等。开发者只需引入并配置相应的组件，无需从零开始实现这些功能。
  4. 易于维护和扩展：自定义组件具备良好的封装性，内部的实现细节对外部是隐藏的，这样可以避免代码耦合和冲突。当需要修改或扩展某个功能时，只需要修改自定义组件的代码，而不会影响其他部分。

4.使用步骤：

  1. 创建自定义组件：在小程序项目中创建一个新的文件夹来存放自定义组件相关的文件，通常以.wxml、.wxss、.js和.json为后缀。其中，.js文件负责组件的逻辑，.wxml文件负责组件的视图结构，.wxss文件负责组件的样式，.json文件用于配置组件的属性、样式和行为。
  2. 注册自定义组件：在使用自定义组件的页面或其他自定义组件中，需要在json文件中的usingComponents字段中注册组件。使用自定义组件时，可以通过指定标签名来引入和使用该组件。

例如，在页面的json文件中注册自定义组件的示例代码如下：

{
  "usingComponents": {
    "custom-component": "/components/custom-component/custom-component"
  }
}
  1. 使用自定义组件：在页面的wxml文件中，直接使用组件的标签名来引入该组件。可以在组件标签上设置组件的属性，并通过data属性传递数据给组件。

例如，在页面中使用自定义组件的示例代码如下：

<custom-component prop1="value1" prop2="{{data}}" bind:customEvent="handleCustomEvent"></custom-component>
  1. 在自定义组件中处理事件：自定义组件可以触发事件并将数据传递给父组件。在组件的js文件中，通过this.triggerEvent来触发自定义事件，并通过参数传递数据给父组件。

例如，在组件的js文件中触发自定义事件的示例代码如下：

// 在组件的内部逻辑中触发自定义事件
this.triggerEvent('customEvent', { data: "Hello, parent component!" });
  1. 在父组件中处理自定义事件：在使用自定义组件的父组件中，可以通过在组件上绑定相应的事件处理函数来接收自定义事件传递的数据。

例如，在父组件的js文件中处理自定义事件的示例代码如下：

// 在父组件的事件处理函数中接收自定义事件传递的数据
Page({
  handleCustomEvent(e) {
    console.log(e.detail); // 输出自定义事件传递的数据
  }
});

通过以上步骤，你就可以在微信小程序中使用自定义组件了。记得在开发过程中，要确保正确引入和使用自定义组件，并处理好组件间的通信和交互。

二、tabs组件及会议管理布局

tabs组件

1. 创建组件

准备

       在创建组件的之前，先创建一个文件夹用于存放组件，每创建一个组件在该文件夹下再创建一个文件存放该组件。

        右击tabs,点击新建component选项，会在该文件夹下生成四个文件

        创建好之后控制台会出现一个错误，需要我们添加一个设置。

"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false,

将该代码添加到project.config.json文件中，然后重新编译一下。

报错

创建

       类似于页面，一个自定义组件由 jsonwxmlwxssjs 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

{
  "component": true
}

        同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。

代码：

内容

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

样式

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

        在自定义组件的 js 文件中，需要使用Component()来注册组件，并提供组件的属性定义、内部数据和自定义方法。

代码：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})
使用组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

效果

会议管理布局

tabs.wxml指定组件模版

<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
            <view style="margin-bottom:5rpx">{{item}}</view>
            <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view>
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

tabs.wxss完成样式设计

.tabs {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    border-bottom: 1px solid #efefef;
    padding-bottom: 20rpx;
}
.tabs_title {
    /* width: 400rpx; */
    width: 90%;
    display: flex;
    font-size: 9pt;
    padding: 0 20rpx;
}
.title_item {
    color: #999;
    padding: 15rpx 0;
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.item_active {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
}
.item_active1 {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
    border-bottom: 6rpx solid #333;
    border-radius: 2px;
}

tabs.js定义属性

在会议界面中运用组件

添加数据

       在对应界面的list.js文件中造数据。根据自身需求进行添加或删除

tabs:['会议中','已完成','已取消','全部会议'],

 

        添加点击导航栏显示的对应数据

lists: [
        {
          'id': '1',
          'image': '/static/persons/1.jpg',
          'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/2.jpg',
          'title': 'AI WORLD 2016世界人工智能大会',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/3.jpg',
          'title': 'H100太空商业大会',
          'num':'500',
          'state':'进行中',
          'time': '10月09日 17:31',
          'address': '大连市'
        },
        {
          'id': '1',
          'image': '/static/persons/4.jpg',
          'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
          'num':'150',
          'state':'已结束',
          'time': '10月09日 17:21',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/5.jpg',
          'title': '新质生活 · 品质时代 2016消费升级创新大会',
          'num':'217',
          'state':'进行中',
          'time': '10月09日 16:59',
          'address': '北京市·朝阳区'
        }
      ],
      lists1: [
        {
          'id': '1',
          'image': '/static/persons/1.jpg',
          'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/2.jpg',
          'title': 'AI WORLD 2016世界人工智能大会',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/3.jpg',
          'title': 'H100太空商业大会',
          'num':'500',
          'state':'进行中',
          'time': '10月09日 17:31',
          'address': '大连市'
        }
      ],
      lists2: [
        {
          'id': '1',
          'image': '/static/persons/1.jpg',
          'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/2.jpg',
          'title': 'AI WORLD 2016世界人工智能大会',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        }
      ],
      lists3: [
        {
          'id': '1',
          'image': '/static/persons/1.jpg',
          'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/2.jpg',
          'title': 'AI WORLD 2016世界人工智能大会',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/3.jpg',
          'title': 'H100太空商业大会',
          'num':'500',
          'state':'进行中',
          'time': '10月09日 17:31',
          'address': '大连市'
        },
        {
          'id': '1',
          'image': '/static/persons/4.jpg',
          'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
          'num':'150',
          'state':'已结束',
          'time': '10月09日 17:21',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/5.jpg',
          'title': '新质生活 · 品质时代 2016消费升级创新大会',
          'num':'217',
          'state':'进行中',
          'time': '10月09日 16:59',
          'address': '北京市·朝阳区'
        }
      ]

 tabs.js定义点击事件

handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }

效果

定义函数绑定显示数据及显示内容编译

       在list.js文件中定义一个函数绑定数据。

tabsItemChange(e){
        let tolists;
        if(e.detail.index==1){
            tolists = this.data.lists1;
        }else if(e.detail.index==2){
            tolists = this.data.lists2;
        }else{
            tolists = this.data.lists3;
        }
        this.setData({
            lists: tolists
        })
    }

        编写页面显示内容及样式

list.wxml
<!--pages/meeting/list/list.wxml-->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 50px;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-img">
            <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text></view>
            <view class="list-tag">
                <view class="state">{{item.state}}</view>
                <view class="join"><text class="list-num">{{item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block>
list.wxss
/**index.wxss**/
.mobi-title{
  background-color: lightgray;
  padding: 10px;
}
.mobi-icon{
  border: 1px solid red;
  margin-right: 5px;
}
.mobi-title text{
  font-weight: 700;
}
.list{
display: flex;
align-items: center;
/* background-color: lightgray; */
border-bottom: 3px solid lightgray;
}
.list-img{
padding:0 10px;
}
.video-img{
 height: 80px;
 width: 80px;
}
.list-detail{
  display: flex;
  flex-direction: column;
  margin: 0px 0px 0px 5px;
}
.list-title{
font-weight: 700;
margin: 3px 0;
}
.list-tag{
  display: flex;
  align-items: center;
}
.state{
border: 2px solid lightblue;
padding: 3px 8px;
color: lightblue;
margin-right:0 5px 10px 0 ;
}
.join{
color: lightgray;
}
.list-num{
  font-weight: 700;
  color: red;
}
.list-info{
  color: lightgray;
  font-size: 13px;
}
.bottom-line {
  text-align: center;
}

效果演示

三、个人中心布局及效果搭建

ucenter/index/index.wxml

<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<!-- 用户信息 -->
<view class="user">
<image class="user-img" src="/static/persons/110.jpg"></image>
<view class="user-name">木易</view>
<view class="user-oper">修改</view>
</view>
<!-- 会议选项 -->
<view class="info">
<view class="item1">
<!-- 图标 -->
<view class="icon">
<image class="item-icon" src="/static/tabBar/sdk.png" />
</view>
<!-- 选项标题 -->
<view class="item-title">
我主持的会议
</view>
<!-- 数量 -->
<view class="item-num">10</view>
<!-- 操作符 -->
<view class="item-oper">＞</view>
</view>
<view class="item2">
<!-- 图标 -->
<view class="icon">
<image class="item-icon" src="/static/tabBar/sdk.png" />
</view>
<!-- 选项标题 -->
<view class="item-title">
我参与的会议
</view>
<!-- 数量 -->
<view class="item-num">10</view>
<!-- 操作符 -->
<view class="item-oper">＞</view>
</view>
</view>
<!-- 投票选项 -->
<view class="vote">
<view class="item1">
<!-- 图标 -->
<view class="icon">
<image class="item-icon" src="/static/tabBar/sdk.png" />
</view>
<!-- 选项标题 -->
<view class="item-title">
我发布的投票
</view>
<!-- 数量 -->
<view class="item-num">8</view>
<!-- 操作符 -->
<view class="item-oper">＞</view>
</view>
<view class="item2">
<!-- 图标 -->
<view class="icon">
<image class="item-icon" src="/static/tabBar/sdk.png" />
</view>
<!-- 选项标题 -->
<view class="item-title">
我参与的投票
</view>
<!-- 数量 -->
<view class="item-num">9</view>
<!-- 操作符 -->
<view class="item-oper">＞</view>
</view>
</view>
<!-- 操作 -->
<view class="work">
<view class="item1">
<!-- 图标 -->
<view class="icon">
<image class="item-icon" src="/static/tabBar/template.png" />
</view>
<!-- 选项标题 -->
<view class="work-title">
消息
</view>
<!-- 操作符 -->
<view class="item-oper">＞</view>
</view>
<view class="item2">
<!-- 图标 -->
<view class="icon">
<image class="item-icon" src="/static/tabBar/component.png" />
</view>
<!-- 选项标题 -->
<view class="work-title">
设置
</view>
<!-- 操作符 -->
<view class="item-oper">＞</view>
</view>
</view>

ucenter/index/index.wxss

/* pages/ucenter/index/index.wxss */
.user{
display: flex;
align-items: center;
border-bottom: 15px solid #F5F5F5;
}
.user-img{
height: 80px;
width: 80px;
margin: 10px;
border-radius: 5px;
border:2px solid lightgreen
}
.user-name{
font-weight: 700;
width:170px ;
}
.user-oper{
color: lightgray;
font-weight: 700;
}
.info{
  border-bottom: 15px solid #F5F5F5;
}
.item1{
display: flex;
align-items: center;
padding: 5px 10px;
border: 1px solid lightgrey;
}
.item-icon{
width: 30px;
height: 30px;
}
.item-title{
width: 210px;
margin-left: 5px;
}
.item-num{
width: 35px;
}
.item-oper{
color: lightgrey;
font-weight: 700;
}
.item2{
  display: flex;
align-items: center;
padding: 5px 10px;
}
.vote{
  border-bottom: 15px solid #F5F5F5;
}
.work-title{
  width: 245px;
margin-left: 5px;
}

页面效果

四、扩展：投票页面布局

1. 创建运用组件

list.json

{j
  "usingComponents": {
    "tabs": "/components/tabs/tabs"
  }
}

创造导航数据

tabs:['全部','已发布','已参与','未参与',],

2. 页面运用组件及布局

<!--pages/vote/list/list.wxml-->
<text>pages/vote/list/list.wxml</text>
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 50px;"></view>
<view class="vote">
<!-- 投票标题 -->
<view class="votetitle">
<!--图标  -->
<image class="votetitle-img" src="/static/tabBar/sdk.png"></image>
<!-- 标题 -->
<view class="votetitle-titie">你最喜欢的QQ头像</view>
</view>
<!-- 投票内容 -->
<view class="voteinfo">
<!-- 左侧 -->
<view class="left">
<image class="left-image" src="/static/persons/111.jpg"></image>
<!-- 票数 -->
<view class="votenum">票数:
<view class="num">55</view>
</view>
<!-- 投票按钮 -->
<view class="votebtn">
<image class="btn-img" src="/static/tabBar/vote.png" bin></image>
</view>
</view>
<!-- 右侧 -->
<view class="right">
  <image class="right-image" src="/static/persons/112.jpg"></image>
  <!-- 票数 -->
  <view class="votenum">票数:
  <view class="num">99</view>
  </view>
  <!-- 投票按钮 -->
<!-- 投票按钮 -->
<view class="votebtn" >
<image class="btn-img" src="/static/tabBar/vote.png"></image>
</view>
</view>
</view>
<view class="tishs">点击图标进行投票</view>
</view>
<!-- 第二个 -->
<view class="vote">
<!-- 投票标题 -->
<view class="votetitle">
<!--图标  -->
<image class="votetitle-img" src="/static/tabBar/sdk.png"></image>
<!-- 标题 -->
<view class="votetitle-titie">你最喜欢的微信头像</view>
</view>
<!-- 投票内容 -->
<view class="voteinfo">
<!-- 左侧 -->
<view class="left">
<image class="left-image" src="/static/persons/113.jpg"></image>
<!-- 票数 -->
<view class="votenum">票数:
<view class="num">55</view>
</view>
<!-- 投票按钮 -->
<view class="votebtn">
<image class="btn-img" src="/static/tabBar/vote.png" bin></image>
</view>
</view>
<!-- 右侧 -->
<view class="right">
  <image class="right-image" src="/static/persons/114.jpg"></image>
  <!-- 票数 -->
  <view class="votenum">票数:
  <view class="num">99</view>
  </view>
  <!-- 投票按钮 -->
<!-- 投票按钮 -->
<view class="votebtn" >
<image class="btn-img" src="/static/tabBar/vote.png"></image>
</view>
</view>
</view>
<view class="tishs">点击图标进行投票</view>
</view>

3. 编写样式

/* pages/vote/list/list.wxss */
.votetitle{
  display: flex;
  align-items: center;
}
.votetitle-img{
  width: 30px;
  height: 30px;
}
.votetitle-titie{
  font-weight: 700;
  width: 250px;
  /* background-color: lightseagreen; */
  text-align: center;
}
.vote{
  border-bottom: 5px solid lightgray;
}
.voteinfo{
  padding: 10px;
}
.left{
padding: 0 15px 0 15px;
}
.right{
  padding: 0 15px 0 15px;
}
.left-image{
  width: 120px;
  height:120px;
  border-radius: 5px;
}
.right-image{
  width: 120px;
  height:120px;
  border-radius: 5px;
}
.voteinfo{
  display: flex;
}
.votenum{
  font-size: 15px;
  font-weight: 600;
  color: red;
  display: flex;
  text-align: center;
  margin-left: 25px;
}
.num{
  width: 40px;
}
.btn-img{
  width: 25px;
  height: 25px;
  margin-left: 50px;
}
.tishs{
  font-size: 15px;
  color: lightgray;
  text-align: center;
}

页面效果

        本期博客分享到此结束，三连加关注就是对博主最大的支持，下期博客会进行进一步的功能拓展，敬请期待

文章标签：
小程序
JavaScript
数据格式
JSON
UED
关键词：
微信开发
微信小程序自定义
微信自定义组件
微信小程序组件
微信组件
君易--鑨
目录
相关文章
chnjames
|
1月前
|
小程序 数据可视化 JavaScript
微信小程序：轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点，帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能，并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法，以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
chnjames
58 1
微信小程序：轻松实现时间轴组件
邹荣乐
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
邹荣乐
203 3
邹荣乐
|
30天前
|
小程序
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
邹荣乐
395 1
chnjames
|
1月前
|
小程序 搜索推荐 API
微信小程序：自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改，但产品经理的需求却需要个性化的定制。在这种情况下，我们需要寻找解决方案，以满足这些特殊需求，尽管这可能有点棘手。
chnjames
59 0
微信小程序：自定义关注公众号组件样式
clicksun
|
8天前
|
安全 搜索推荐 数据安全/隐私保护
点晴免费OA办公系统：高效协同，安全易用
信息技术发展推动企业信息化，即企业利用现代技术提升生产、经营、管理效率，增强竞争力。点晴免费OA系统作为信息化管理的基础，是实现企业信息化的关键手段。
clicksun
21 2
clicksun
|
1月前
|
数据安全/隐私保护
点晴OA办公系统让企业变得高效协同
随着企业信息化进程的加快，很多企业开始寻求使用企业管理免费OA办公系统来提高工作效率。然而，有些些企业可能缺乏信息化经验，对技术一无所知，甚至从未接触过OA办公系统。在这种情况下，企业需要寻求功能比较全面的OA办公系统，以满足企业的实际需求。
clicksun
41 1
yeye向阳而生
|
30天前
|
敏捷开发 数据可视化 数据挖掘
哪些OA任务管理系统值得推荐？4款高效办公工具介绍
在现代企业中，OA（办公自动化）任务管理系统是提升工作效率和团队协作的关键工具。本文介绍了4款备受推崇的OA任务管理系统：板栗看板、Trello、Asana和Monday.com，分别从提高工作效率、增强团队协作、优化资源分配和提升工作质量等方面进行了详细说明，为用户提供全面的参考和选择指南。
yeye向阳而生
77 0
clicksun
|
1月前
|
存储 安全 数据安全/隐私保护
如何明智选择免费OA系统的关键因素
在数字化办公日益普及的今天，选择一款合适的免费OA系统对于企业提升工作效率和管理水平至关重要。不管是办公的便捷方便，还是与其他平台的融合，免费OA系统的选择，需要看这几点，易用性、开放性、稳定性、服务性、实用性、安全性。
clicksun
22 0
clicksun
|
2月前
|
搜索推荐 BI 数据处理
点晴OA系统让考勤管理不再头疼
在当今数字化管理趋势下，点晴OA办公系统中的考勤管理作为企业内部管理的重要组成部分，其自动化和智能化水平的提高在提高企业运营效率和员工满意度方面发挥着重要作用。
clicksun
53 4
热爱技术的小郑
|
3月前
|
Java uml
某OA系统需要提供一个假条审批的模块，如果员工请假天数小于3天，主任可以审批该请假条；如果员工请假天数大于等于3天，小于10天，经理可以审批；如果员工请假天数大于等于10天，小于30天，总经理可以审批
该博客文章通过一个OA系统中的请假审批模块示例，使用Java语言实现了职责链模式，展示了如何根据不同的请假天数由不同级别的领导进行审批，并讨论了职责链模式的优缺点。
热爱技术的小郑
61 1
某OA系统需要提供一个假条审批的模块，如果员工请假天数小于3天，主任可以审批该请假条；如果员工请假天数大于等于3天，小于10天，经理可以审批；如果员工请假天数大于等于10天，小于30天，总经理可以审批

热门文章

最新文章

  • 1
    微信小程序使用export和import
  • 2
    【微信小程序】页面tabBar切换、下拉刷新
  • 3
    微信小程序：获取不限制的小程序码后端Java实现
  • 4
    【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
  • 5
    微信小程序 安装依赖 vant
  • 6
    微信小程序：阿里云OSS直传实践-PHP实现服务端签名
  • 7
    Java微信小程序开发_00_资源帖
  • 8
    微信小程序把玩（三十五）Video API
  • 9
    微信小程序使用vant组件样式不生效的问题
  • 10
    微信小程序下拉刷新
  • 1
    外卖小程序实战-接单后小票机自动打印订单
    171
  • 2
    认养模式小程序系统开发|成熟技术|项目案例
    49
  • 3
    微信小程序echart图片不显示 问题解决
    61
  • 4
    小程序和vue写法的区别
    54
  • 5
    小程序和页面生命周期详解
    56
  • 6
    小程序；vue；uniapp优缺点（各5条）
    141
  • 7
    UniApp与微信小程序介绍及区别
    577
  • 8
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（二）
    548
  • 9
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（一）
    285
  • 10
    轻松学会微信小程序开发（一）
    217

    • 相关课程

    更多
  • IoT小程序框架课程
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 软件供应商进阶管理实操
  • 软件用户使用服务及供应商进阶管理
  • 数据管理 DMS产品介绍及Data Copilot演示教程智能助手 DMS Data Copilot简介
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 搭建微信小程序（AMD 8代）
  • 1分钟SAE部署Web在线游戏
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • DataV模版快速创建可视化看板
  • 1分钟SAE部署PHP商城小程序
    • 下一篇
    阿里云OSS设置跨域访问