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
目录
相关文章
真的很搞笑
|
6月前
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS（移动平台即服务，Mobile Platform as a Service）是阿里巴巴集团提供的一套移动开发解决方案，它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总，旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
真的很搞笑
97 0
67vpym2vvkfhs
|
5月前
|
移动开发 小程序 前端开发
程序员必知：微信小程序进阶
程序员必知：微信小程序进阶
67vpym2vvkfhs
31 1
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的企业oa管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的企业oa管理系统附带文章源码部署视频讲解等
wishCoding
45 1
67vpym2vvkfhs
|
5月前
|
移动开发 小程序 前端开发
程序员必知：微信小程序进阶
程序员必知：微信小程序进阶
67vpym2vvkfhs
27 0
小蜗牛耶
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的会议发布与预约系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的会议发布与预约系统的详细设计和实现
小蜗牛耶
35 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
68 0
朱琳均
|
11月前
会议OA项目-其它页面-＞自定义组件应用,其它界面的布局
会议OA项目-其它页面-＞自定义组件应用,其它界面的布局
朱琳均
41 0
姿势不太差
|
11月前
|
JSON 小程序 前端开发
小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）
小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）
姿势不太差
63 0
姿势不太差
|
11月前
|
JSON 小程序 前端开发
小程序之实例会议OA的首页 （3）
小程序之实例会议OA的首页 （3）
姿势不太差
71 0

热门文章

最新文章

  • 1
    微信小程序使用export和import
  • 2
    微信小程序（十七）小程序监听返回键跳转事件（安卓返回也适用）
  • 3
    java springboot集成微信小程序【详细教程】
  • 4
    解决微信小程序MQTT真机连接问题与合法域名配置SSL问题
  • 5
    【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
  • 6
    微信小程序 安装依赖 vant
  • 7
    微信小程序scroll-view组件设置 scroll-top无效问题解决
  • 8
    Java微信小程序开发_00_资源帖
  • 9
    【微信小程序】页面tabBar切换、下拉刷新
  • 10
    微信小程序把玩（三十五）Video API
  • 1
    OA办公系统选购注意的事项
    103
  • 2
    免费OA赋能企业管理建设专业化
    46
  • 3
    深挖免费OA办公系统的用户应用场景
    68
  • 4
    点晴OA办公系统如何实现业务表单的自定义设计
    92
  • 5
    企业都是用谁家的OA办公系统？
    80
  • 6
    免费OA办公系统的选购指南
    73
  • 7
    OA办公自动化系统设计与实现(论文+源码)_kaic
    241
  • 8
    四款OA办公系统快速提高企业效率
    84
  • 9
    免费OA办公系统，提升工作效率与协作的智能选择
    80
  • 10
    点晴免费OA系统助理企业高效管理
    69

    • 相关课程

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

    • 相关电子书

    更多
  • 《使用Serverless服务快速开发小程序》
  • 《云市场-心选OA解决方案》
  • 《云市场-小程序》

    • 相关实验场景

    更多
  • 搭建微信小程序（AMD 8代）
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • 1分钟SAE部署PHP商城小程序
  • 前端开发基础2：VS Code和Edge的联动开发
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    DataWorks智能数据建模全面公测开始啦！