AI 助理
备案控制台
开发者社区 大数据 文章 正文

微信小程序进阶——会议OA其他界面

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

一、自定义tabs组件应用

文档参考如下：

1.1 创建自定义组件

1.1.1 新建自定义组件存放目录components

首先新建一个components文件夹，然后在components文件夹下面新建一个tabs文件夹，再在tabs文件夹下新建名为tabs的Component，目录如下：

1.1.2 工具检查报错解决

新建完成之后我们发现Consle控制台中有报错，如下：

这是新版本微信开发者工具特带的检查效果（window7所使用的旧版本开发工具不会报此错误），我们只需在project.config.json文件下的setting配置代码代码块下加入以下配置信息即可，配置信息如下：

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

然后点击Ctrl+S保存即可消除报错，效果如下：

1.1.3 编写组件模板

紧接着同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。即把以下代码加入tabs.wxml中，代码如下：

<view class="inner">
  {{innerText}}
</view>
<slot></slot>

1.1.3 定义组件模板属性

加入了之后我们需要到tabs.js文件中定义innerText属性值，在tabs.js中组件的属性列表代码块下properties加入以下代码，如下：

// 这里定义了innerText属性，属性值可以在组件使用时指定
      innerText: {
        type: String,
        value: 'default value',
      }

1.1.4 加入组件样式

最后在tabs.wxss中加入样式代码即可，wxss文件内代码如下：

.inner {
  color: red;
}

到这里我们的的自定义组件旧创建完毕了。

1.2 使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。如下：

1.2.1 引用声明

list.wxml投票界面代码如下：

<!--pages/vote/list/list.wxml-->
<!-- <text>pages/vote/list/list.wxml</text> -->
<view class="box">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
<view>9</view>
<view>10</view>
<view>11</view>
<view>12</view>
</view>
<tabs></tabs>

此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径，在需要使用自定义组件的界面json文件下加入以下代码：

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

然后保存代码我们就可以看到我们的界面已经成功使用了自定义组件，效果如下：

1.2.2 组件传参

将list.wxml中的tabs自定义组件代码改为以下代码：

<tabs inner-text="三金"></tabs>

接着启动模拟器查看传参效果，如下：

二、其他界面的布局

2.1 会议管理主页布局

2.1.1 编写组件模板

在meeting文件夹下list.wxml中加入以下代码：

<!--pages/meeting/list/list.wxml-->
<!-- <text>pages/meeting/list/list.wxml</text> -->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<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.location}}</text>|<text>{{item.starttime}}</text></view>
        </view>
    </view>
</block>

2.1.2 完成样式设计

在meeting文件夹下list.wxss中加入以下代码，如下：

/* pages/meeting/list/list.wxss */
.list{
  display: flex;
  align-items: center;
  border-bottom: 3px solid lightgray;
}
.list-img{
  padding: 0 10px;
}
.video-img{
  height: 80px;
  width: 80px;
}
.list-title{
  font-weight: 700;
  margin: 3px 0;
}
.list-tag{
  display: flex;
  align-items: center;
}
.state{
  border: 2px solid lightblue;
  padding: 1px 1px;
  color: lightblue;
  margin: 0 15px 2px 0;
  border-radius: 10px;
}
.join{
  color: lightgray;
}
.list-num{
  color: red;
  font-weight: 700;
}
.list-info{
  color: lightgray;
  font-size: 12px;
}
.section bottom-line{
  display: flex;
  justify-content:center;
}

2.1.3 定义组件属性

用于接收数据

meeting文件夹下list.js中代码如下（含页面数据代码）：

// pages/meeting/list/list.js
Page({
  /**
   * 页面的初始数据
   */
  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': '北京市·朝阳区'
      }
    ]
  },
  tabsItemChange(){
    debugger;
    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
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

2.1.4 引用声明

list.json中代码如下：

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

2.1.5 展示页面效果

模拟器展示效果如下：

2.2 个人中心布局

2.2.1 页面源码

index.wxml：

<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="user">
  <image class="user-img" src="/static/persons/v头像.jpg"></image>
  <text class="user-name">三金</text>
  <text class="user-oper">修改</text>
</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>
<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>
<view class="info">
  <view class="item1">
    <image class="item-icon" src="/static/tabBar/template.png"></image>
    <view class="item-title">消息</view>
  </view>
  <view class="item2">
    <image class="item-icon" src="/static/tabBar/component.png"></image>
    <view class="item-title">设置</view>
  </view>
</view>

index.wxss：

/* pages/ucenter/index/index.wxss */
.user{
  display: flex;
  align-items: center;
  border-bottom: 6px solid rgb(238, 235, 235);
}
.user-img{
  width: 65px;
  height: 65px;
  margin: 10px;
}
.user-name{
  font-weight: 700;
  margin: 0 250rpx 0 50rpx;
}
.user-oper{
  color: lightgray;
}
.info{
}
.item1,.item2{
  padding: 5px;
  display: flex;
  align-items: center;
}
.item1{
  border-bottom: 2px solid rgb(238, 235, 235);
}
.item2{
  border-bottom: 6px solid rgb(238, 235, 235);
}
.item-icon{
  width: 40px;
  height: 40px;
}
.item-title{
  width:500rpx;
}
.item-num{
  width:60rpx;
}
.item-oper{
  color: rgb(221, 216, 216);
}

2.2.2 展示效果

模拟器展示效果如下：

最后微信小程序进阶——会议OA其他界面就到这里，祝大家在敲代码的路上一路通畅!

感谢大家的观看 !


文章标签：
小程序
数据格式
JSON
开发工具
开发者
关键词：
微信小程序进阶
微信小程序会议
OA界面
微信界面
微信小程序界面
Kissship
目录
相关文章
67vpym2vvkfhs
|
5月前
|
移动开发 小程序 前端开发
程序员必知：微信小程序进阶
程序员必知：微信小程序进阶
67vpym2vvkfhs
30 1
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的企业oa管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的企业oa管理系统附带文章源码部署视频讲解等
wishCoding
43 1
67vpym2vvkfhs
|
5月前
|
移动开发 小程序 前端开发
程序员必知：微信小程序进阶
程序员必知：微信小程序进阶
67vpym2vvkfhs
26 0
小蜗牛耶
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的会议发布与预约系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的会议发布与预约系统的详细设计和实现
小蜗牛耶
34 0
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的会议管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的会议管理系统附带文章和源代码部署视频讲解等
wishCoding
30 0
wishCoding
|
6月前
|
JavaScript Java 测试技术
基于小程序的会议发布与预约系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的会议发布与预约系统+springboot+vue.js附带文章和源代码设计说明文档ppt
wishCoding
67 0
现在是571
|
6月前
|
SQL 存储 JavaScript
Layui之OA会议增删改查
Layui之OA会议增删改查
现在是571
60 0
朱琳均
|
11月前
|
开发框架 JavaScript 前端开发
J2EE项目部署与发布（Windows版本）-＞会议OA单体项目Windows部署,spa前后端分离项目Windows部署
J2EE项目部署与发布（Windows版本）-＞会议OA单体项目Windows部署,spa前后端分离项目Windows部署
朱琳均
64 0
朱琳均
|
11月前
会议OA项目-其它页面-＞自定义组件应用,其它界面的布局
会议OA项目-其它页面-＞自定义组件应用,其它界面的布局
朱琳均
41 0
朱琳均
|
11月前
|
容器
会议OA项目-首页-＞flex弹性布局，轮播图后台数据获取及组件使用（后台数据交互mockjs），首页布局
会议OA项目-首页-＞flex弹性布局，轮播图后台数据获取及组件使用（后台数据交互mockjs），首页布局
朱琳均
79 0

热门文章

最新文章

  • 1
    【视频教程】微信小程序开发-初探篇
  • 2
    微信小程序：引入阿里巴巴矢量图标库iconfont
  • 3
    微信小程序使用export和import
  • 4
    微信小程序（十七）小程序监听返回键跳转事件（安卓返回也适用）
  • 5
    【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
  • 6
    Java微信小程序开发_00_资源帖
  • 7
    微信小程序scroll-view组件设置 scroll-top无效问题解决
  • 8
    【微信小程序】页面tabBar切换、下拉刷新
  • 9
    滇医通微信小程序分析笔记
  • 10
    微信小程序如何分包管理
  • 1
    微信小程序【视频、音频】
    62
  • 2
    微信小程序如何在切换页面后原页面状态不变
    335
  • 3
    微信小程序如何刷新当前页面
    646
  • 4
    微信小程序——解决异步问题
    310
  • 5
    微信小程序——属性配置大全
    111
  • 6
    设计 QQ、微信等第三方账号登陆
    62
  • 7
    【微信公众平台对接】有关【创建发票卡券模板】调用示例
    95
  • 8
    【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
    155
  • 9
    微信网页授权之使用完整服务解决方案
    1151
  • 10
    mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
    96

    • 相关课程

    更多
  • IoT小程序框架课程
  • 软件供应商进阶管理实操
  • C++ 入门教程开发文档
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 软件供应商发布服务实操
  • 数据管理 DMS产品介绍及Data Copilot演示教程智能助手 DMS Data Copilot简介

    • 相关电子书

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

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 基于Assistant Api的旅游助手
  • 快速搭建移动端可视化看板
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月