1. Toy模板网首页
  2. > Toy博客

小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）

9月前 作者：姿势不太差 分类：Toy博客 阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）,无纸化办公小程序的开发使用,小程序,vue.js,mybatis,javascript,spring

                                       ⭐⭐ 小程序专栏：小程序开发专栏

                                        ⭐⭐ 个人主页：个人主页

目录

一.前言

二.小程序自定义组件及其使用

2.1 自定义组件的使用

三.使用自定义组件完成会议功能界面的实现

   3.1 导航栏的实现

 3.2 会议界面内容的实现 

 四.投票管理界面

五.个人中心

今天的分享就到这啦！！！

一.前言

        继上一篇文章的首页搭建，今天来完成剩下的部分会议管理，投票管理及个人中心！！！

二.小程序自定义组件及其使用

        官网：自定义组件 / 介绍 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

        开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

2.1 自定义组件的使用

 右击新建一个文件夹，创建一个component文件,只有Windows10会报，windows7不会，我们只要添加一个设置即可：

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

小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）,无纸化办公小程序的开发使用,小程序,vue.js,mybatis,javascript,spring

小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）,无纸化办公小程序的开发使用,小程序,vue.js,mybatis,javascript,spring

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

{
  "component": true
}

在 wxss 文件中加入组件样式

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

定义所需要的属性：

小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）,无纸化办公小程序的开发使用,小程序,vue.js,mybatis,javascript,spring

接着要在页面的 json 文件中进行引用组件。此时需要提供自定义组件文件路径：

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

效果：

小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）,无纸化办公小程序的开发使用,小程序,vue.js,mybatis,javascript,spring

三.使用自定义组件完成会议功能界面的实现

        3.1 导航栏的实现

        前端代码，写在了自定义组件中 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;
}

在js里面定义属性以及定义点击的事件    tabs.js：

   /**
     * 组件的属性列表
     */
    properties: {
        // 这里定义属性，属性值可以在组件使用时指定
        tabList:Object
  
    },

 /**
     * 组件的方法列表
     */
    methods: {
        // 导航栏的方法
        handleItemTap(e){
            // 获取索引下标
            const {index} = e.currentTarget.dataset;
            // 触发 父组件的事件
            this.triggerEvent("tabsItemChange",{index})
            this.setData({
                tabIndex:index
            })
          }
    }

接着在会议文件夹中的前端中写入 list.wxml：

<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>

接着导入，在上篇文章就已经将所有的页面已经建好啦，现在只会写入代码即可在会议界面meeting的list.json导入：

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

最后加入一些假数据 list.js：

 /**
     * 页面的初始数据
     */
    data: {
        tabs:['已取消','进行中','已结束','全部会议'],
}

效果：

小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）,无纸化办公小程序的开发使用,小程序,vue.js,mybatis,javascript,spring

 3.2 会议界面内容的实现 metting

前端代码  list.wxml:

<!-- 设置与导航栏的间距 -->
<view style="height: 40px;"></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：

/* 会议样式 */
.mobi-title {
    font-size: 12pt;
    color: #777;
    line-height: 110%;
    font-weight: bold;
    width: 100%;
    padding: 15rpx;
    background-color: #f3f3f3;
}

.mobi-icon {
    padding: 0rpx 3rpx;
    border-radius: 3rpx;
    background-color: #ff7777;
    position: relative;
    margin-right: 10rpx;
}

/*list*/
.list {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 20rpx 0 0;
    border-top: 1px solid #eeeeee;
    background-color: #fff;
    margin-bottom: 5rpx;
    /* border-radius: 20rpx;
    box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}

.list-img {
    display: flex;
    margin: 10rpx 10rpx;
    width: 150rpx;
    height: 220rpx;
    justify-content: center;
    align-items: center;
}

.list-img .video-img {
    width: 120rpx;
    height: 120rpx;
    
}

.list-detail {
    margin: 10rpx 10rpx;
    display: flex;
    flex-direction: column;
    width: 600rpx;
    height: 220rpx;
}

.list-title text {
    font-size: 11pt;
    color: #333;
    font-weight: bold;
}

.list-detail .list-tag {
    display: flex;
    height: 70rpx;
}

.list-tag .state {
    font-size: 9pt;
    color: #81aaf7;
    width: 120rpx;
    border: 1px solid #93b9ff;
    border-radius: 2px;
    margin: 10rpx 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-tag .join {
    font-size: 11pt;
    color: #bbb;
    margin-left: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-tag .list-num {
    font-size: 11pt;
    color: #ff6666;
}

.list-info {
    font-size: 9pt;
    color: #bbb;
    margin-top: 20rpx;
}
.bottom-line{
    display: flex;
    height: 60rpx;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
}
.bottom-line text{
    font-size: 9pt;
    color: #666;
}

导入后台假数据：

根据导航栏的不同状态，各自写了一个数组数据  list.js：

 /**
     * 页面的初始数据
     */
    data: {
        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': '北京市·朝阳区'
            }
          ]
    },

改变导航栏页面的数据，根据会议状态做一个简单判断   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 if(e.detail.index==0){
            tolists = this.data.lists3;
        }else{
            tolists = this.data.lists;
        }
        this.setData({
            lists: tolists
        })
    },

效果：

小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）,无纸化办公小程序的开发使用,小程序,vue.js,mybatis,javascript,spring

 四.投票管理界面 vote

前端代码 ：

<!-- 导航栏 -->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<!-- 设置与导航栏的间距 -->
<view style="height: 40px;"></view>
<block wx:for-items="{{vote1}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text><text class="state">{{item.state}}</text>   </view>
           
            <view class="list-tag">
                <view class="join"> 参与投票人数: <text class="list-num">{{item.sum}}</text></view>
                <view class="join">已经投票人数: <text class="list-num">{{item.num}}</text></view>
            </view>
       
            <view class="list-info">投票截止时间: <text>{{item.time}}</text></view>
        </view>
    </view>
</block>

样式设计：

/* pages/vote/list/list.wxss */
/* 会议样式 */
/*list*/
.list {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 20rpx 0 0;
    border-top: 1px solid #cac7c7;
    background-color: rgb(253, 244, 244);
    margin-bottom: 5rpx;
   
}
.list-title{
    color: rgb(219, 85, 23);
    font-weight: 1000;
    font-size: smaller;
    display: flex;
    margin: 20rpx 10rpx;
    /* width: 300rpx;
    height: 120rpx; */
    /* justify-content: center; */
    align-items: center;
}
.join{
    font-size: smaller;
    font-size: 11pt;
    color: rgb(85, 79, 79);
    margin-left: -300rpx;
    display: flex;
    justify-content: center;
    /* align-items: center; */
}
.list-num{
    font-weight: 680;
    color: red;
}
.state {
    font-size: 9pt;
    color: #81aaf7;
    width: 180rpx;
    border: 1px solid #93b9ff;
    border-radius: 2px;
    margin: 10rpx 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.list-info {
    font-size: 9pt;
    color: rgb(17, 16, 16);
    margin-top: 20rpx;
    margin-left: 150px;
}

引入自定义标签：

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

定义一些假数据：

  /**
     * 页面的初始数据
     */
    data: {
        tabs:['待投票','历史投票','已投票'],
        vote1: [
            {
              'id': '1',
              'title': '【关于罢免张三的董事长职位】',
              'sum':'16人',
              'state':'还未进行投票',
              'time': '10月09日 17:59',
              'num': '10人'
            },
            {
              'id': '1',
              'title': '【世界人工智能大会是否上市】',
              'sum':'20人',
              'state':'还未进行投票',
              'time': '10月09日 17:39',
              'num': '7人'
            },
            {
              'id': '1',
              'title': '【H100太空商业大会是否召开】',
              'sum':'24人',
              'state':'还未进行投票',
              'time': '10月09日 17:31',
              'num': '21人'
            },
            {
              'id': '1',
              'title': '【关于李四的升职董事长的投票】',
              'sum':'10人',
              'state':'还未进行投票',
              'time': '10月09日 17:21',
              'num': '2人'
            }
          ],
          vote2: [
            {
              'id': '1',
            'title': '【关于公司是否支持空降总监的会议】',
              'sum':'23人',
              'state':'同意',
              'time': '10月09日 17:59',
              'num': '23人'
            },
            {
              'id': '1',
              'title': '【2016世界人工智能大会是否召开】',
              'sum':'23人',
              'state':'不同意',
              'time': '10月09日 17:39',
              'num': '23人'
            },
            {
              'id': '1',
              'title': '【H100太空商业大会是否召开】',
              'sum':'23人',
              'state':'弃权',
              'time': '10月09日 17:39',
              'num': '23人'
            }
          ],
          vote3: [ 
            {
              'id': '1',
              'title': '【关于王五的罢免的投票】',
              'sum':'34人',
              'state':'弃权',
              'time': '10月09日 17:59',
              'num': '31人'
            },
            {
              'id': '1',
              'title': '【2016世界人工智能大会的召开】',
              'sum':'34人',
              'state':'同意',
              'time': '10月09日 17:59',
              'num': '31人'
            },{
                'id': '1',
                'title': '【关于王五的罢免的投票】',
                'sum':'34人',
                'state':' 不同意',
                'time': '10月09日 17:59',
                'num': '31人'
              },
              {
                'id': '1',
                'title': '【2016世界人工智能大会的召开】',
                'sum':'34人',
                'state':'同意',
                'time': '10月09日 17:59',
                'num': '31人'
              },{
                'id': '1',
                'title': '【关于王五的罢免的投票】',
                'sum':'34人',
                'state':'同意',
                'time': '10月09日 17:59',
                'num': '31人'
              },
              {
                'id': '1',
                'title': '【世界人工智能大会的召开】',
                'sum':'34人',
                'state':'弃权',
                'time': '10月09日 17:59',
                'num': '31人'
              }
          ]
    },

导航栏改变事件：

// 导航栏改变事件，改变值
 tabsItemChange(e){
    let tolists;
    if(e.detail.index==0){
        tolists = this.data.vote1;
    }else if(e.detail.index==1){
        tolists = this.data.vote2;
    }else if(e.detail.index==2){
        tolists = this.data.vote3;
    }
    this.setData({
        vote1: tolists
    })
},

效果：

小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）,无纸化办公小程序的开发使用,小程序,vue.js,mybatis,javascript,spring

五.个人中心

前端代码 ucenter：

<view class="user">
    <image class="user-img" src="/static/persons/jennie1.jpg"></image>
    <view class="user-name">潇洒姿</view>
    <view class="user-oper">修改</view>
</view>
<view class="info">
    <view class="item1">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">我主持的会议</view>
        <view class="item-num">10</view>
        <view class="item-oper">></view>
    </view>
    <view class="item2">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">我参与的会议</view>
        <view class="item-num">7</view>
        <view class="item-oper">></view>
    </view>

</view>
<view class="info">
    <view class="item1">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">我发布的投票</view>
        <view class="item-num">6</view>
        <view class="item-oper">></view>
    </view>
    <view class="item2">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">我参与的投票</view>
        <view class="item-num">8</view>
        <view class="item-oper">></view>
    </view>

</view>
<view class="info">
    <view class="item1">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">消息</view>
        <view class="item-num">1</view>
        <view class="item-oper">></view>
    </view>
    <view class="item2">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">设置</view>
        <view class="item-num">10</view>
        <view class="item-oper">></view>
    </view>

</view>

样式设计：

/* pages/ucenter/index/index.wxss */
.user{
    display: flex;
    align-items: center;
    border-bottom: 8px solid rgb(236, 216, 219);
}
.user-img{
    width: 75px;
    height: 75px;
    margin: 10px;
}
.user-name{
    font-weight: 900;
    margin: 0 200rpx 0 50rpx;
    margin-left: 10px;
    color: palevioletred;
}
.user-oper{
    color: grey;
    width: 40px;
    margin-left: 10px;
}
.item-icon{
    width: 34px;
    height: 34px;
}
.item1,.item2{
padding: 5px;
display: flex;
align-items: center;
}
.item-title{
    width: 550rpx;

}
.item-num{
    
    color:rgb(231, 188, 217);
}
.item1{
    border-bottom: 1px solid rgb(236, 216, 219);
}
.item2{
    border-bottom: 5px solid rgb(236, 216, 219);
}
.item-oper{
    font-weight: 800;
   margin-left: 10px;
   width: 20px;
   color:rgb(100, 76, 84)

}

效果:

小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）,无纸化办公小程序的开发使用,小程序,vue.js,mybatis,javascript,spring文章来源地址https://www.toymoban.com/news/detail-745723.html

今天的分享就到这啦！！！

到了这里，关于小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序之自定义组件开发

    微信小程序之自定义组件开发

    从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自

    2024年02月02日
    浏览(57)
  • 微信小程序之自定义表单组件(radio)

    微信小程序之自定义表单组件(radio)

    背景： 最近在做项目的时候遇到一个问题，那就是微信的官方表单组件的可扩展性不强，无法达到设计稿所要求的效果，所以想到了用自定义组件的方法自定义一个表单组件。 （自定义组件其实往往用在需要复用的地方，比如每个页面都有一样的头部和底部，那么我们就可

    2024年02月09日
    浏览(44)
  • 微信小程序云开发之自定义顶部导航栏搜索框（非组件）

    微信小程序云开发之自定义顶部导航栏搜索框（非组件）

    提到微信小程序，就不得不提到它那磨人的顶部导航栏，真的有被丑到。身为强迫症患者，笔者实在是难以忍受，好在官方提供了解决方案，但是对于初学者还是有一丢丢的难度，为了初学者不在重蹈笔者的老路，这篇文章就给大家分享一下如何做一个好看的自定义顶部导航

    2024年02月10日
    浏览(40)
  • 微信小程序会议OA系统

    微信小程序会议OA系统

    Flex弹性布局 Flex弹性布局是一种 CSS3 的布局模式，也叫Flexbox。它可以让容器中的元素按一定比例自动分配空间，使得它们在不同宽度、高度等情况下仍能保持整齐和密集不间隙地排列。 在使用Flexbox弹性布局时，首先需要创建一个容器和若干个子元素。容器的属性display需要设

    2024年02月08日
    浏览(49)
  • 微信小程序之开发会议OA项目

    微信小程序之开发会议OA项目

    目录 前言 本篇目标  首页 会议 投票  个人中心  会议OA项目-首页 配置 tabbar mock工具 page swiper 会议信息 会议OA项目-会议  自定义tabs组件 会议管理 会议OA项目-投票 会议OA项目-个人中心 文章含源码资源，投票及个人中心详细自行查看源码即可 小程序没有DOM对象，一切基于组

    2024年02月19日
    浏览(46)
  • 微信小程序OA会议系统数据交互

    微信小程序OA会议系统数据交互

    前言 经过我们所写的上一文章：微信小程序会议OA系统其他页面-CSDN博客 在我们的是基础面板上面，可以看到出来我们的数据是死数据，今天我们就完善我们的是数据 后台 在我们去完成项目之前我们要把我们的项目后台准备好资源我放在我资源中，大家可以用于参考，也可

    2024年02月08日
    浏览(40)

  • 微信小程序之会议OA首页后台交互

    springboot+mybatis appliation.yml 生成mapper接口，model实体类，mapper映射文件 application.yml 在启动类 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象

    2024年02月20日
    浏览(42)
  • 微信小程序之会议OA首页数据交互，会议状态，会议人数转换，会议室交互，WXS的使用

    微信小程序之会议OA首页数据交互，会议状态，会议人数转换，会议室交互，WXS的使用

    前言： 本篇博客使用结合了SpringMVC，mybatis，maven，小程序，如果不熟悉使用可以翻看我之前的博客，以便大家可以更好的学习！！！ 这是我们今天完成后的效果： 1.1启动开发工具，导入后台 导入框架： 配置maven 注意数据库的名称： 启动 1.2导入数据表 1.3前台页面的编码（

    2024年02月08日
    浏览(53)
  • 微信小程序之会议OA个人中心后台交互

    微信小程序之会议OA个人中心后台交互

    目录 获取用户昵称头像和昵称 小程序登录 登录-小程序 wx.checkSession wx.login wx.request 后台 准备数据表 反向生成工具生成 准备封装前端传过来的数据 小程序服器配置 导入微信小程序SDK application.yml WxProperties WxConfig WxAuthController 登录-小程序 login.js user.js util.js emoji wx.getUserProfi

    2024年02月22日
    浏览(63)
  • 会议OA小程序项目 与后台数据的交互【首页】

    会议OA小程序项目 与后台数据的交互【首页】

    目录 一. 与后台数据进行交互 pom.xml 配置数据源 MinoaApplication WxHomeController 后台数据展示  二. request的封装 三. 会议展示 application.yml 在utils/util.js中 api.js index/index.js utils/comm.wxs index/index.wxml  效果展示

    2024年02月07日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包