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

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

2023-10-23 67
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序进阶——会议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
目录
相关文章
真的很搞笑
|
7月前
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS（移动平台即服务，Mobile Platform as a Service）是阿里巴巴集团提供的一套移动开发解决方案，它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总，旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
真的很搞笑
107 0
后除
|
7月前
|
前端开发 JavaScript Go
Go 实战｜使用 Wails 构建轻量级的桌面应用：仿微信登录界面 Demo
Wails 框架提供了一种简洁而强大的方式，让开发者能够利用 Go 的性能优势和 Web 前端的灵活性，从而能够使用更高效、更轻量级的方法来构建跨平台的桌面应用。本文探讨 Wails 框架的使用，从搭建环境到开发，再到最终的构建打包。
后除
264 1
Go 实战｜使用 Wails 构建轻量级的桌面应用：仿微信登录界面 Demo
小蜗牛耶
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的会议发布与预约系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的会议发布与预约系统的详细设计和实现
小蜗牛耶
54 0
姿势不太差
|
BI 数据安全/隐私保护 UED
以产品经理的角度去讲解原型图---会议OA项目
以产品经理的角度去讲解原型图---会议OA项目
姿势不太差
113 1
现在是571
|
7月前
|
SQL 存储 JavaScript
Layui之OA会议增删改查
Layui之OA会议增删改查
现在是571
71 0
朱琳均
|
开发框架 JavaScript 前端开发
J2EE项目部署与发布（Windows版本）-＞会议OA单体项目Windows部署,spa前后端分离项目Windows部署
J2EE项目部署与发布（Windows版本）-＞会议OA单体项目Windows部署,spa前后端分离项目Windows部署
朱琳均
70 0
朱琳均
会议OA项目-其它页面-＞自定义组件应用,其它界面的布局
会议OA项目-其它页面-＞自定义组件应用,其它界面的布局
朱琳均
46 0
朱琳均
|
容器
会议OA项目-首页-＞flex弹性布局，轮播图后台数据获取及组件使用（后台数据交互mockjs），首页布局
会议OA项目-首页-＞flex弹性布局，轮播图后台数据获取及组件使用（后台数据交互mockjs），首页布局
朱琳均
86 0
姿势不太差
|
JSON 小程序 前端开发
小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）
小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）
姿势不太差
67 0
姿势不太差
|
JSON 小程序 前端开发
小程序之实例会议OA的首页 （3）
小程序之实例会议OA的首页 （3）
姿势不太差
80 0

热门文章

最新文章

  • 1
    微信小程序使用export和import
  • 2
    微信小程序把玩（三十五）Video API
  • 3
    微信小程序 - rpx和px互转，以及系统给的 pixelRatio 值比例不对
  • 4
    Java微信小程序开发_00_资源帖
  • 5
    微信小程序实用工具——渐变色按钮（一）
  • 6
    微信小程序 修改键盘的回车键及监听事件
  • 7
    微信小程序把玩（六）模块化
  • 8
    微信小程序常见的UI框架/组件库总结
  • 9
    PHP+Swoole实现微信小程序客服即时通信聊天功能
  • 10
    【微信小程序4】云数据库：如何把数组一次性写入数据库中
  • 1
    微信小程序用户登陆和获取用户信息功能实现
    139
  • 2
    uniapp-微信小程序-上拉和下拉触底刷新
    155
  • 3
    微信小程序和springboot实现微信支付
    260
  • 4
    微信小程序-微信支付
    81
  • 5
    微信小程序调试、断点调试
    205
  • 6
    微信小程序-分包
    75
  • 7
    开发uniapp过程中对app、微信小程序与h5的webview调试
    1227
  • 8
    微信小程序echart图片不显示 问题解决
    75
  • 9
    【DevOps】（五）Jenkins构建给企业微信推送消息
    295
  • 10
    UniApp与微信小程序介绍及区别
    619

    • 相关课程

    更多
  • IoT小程序框架课程
  • C++ 入门教程开发文档
  • 软件供应商进阶管理实操
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 软件用户使用服务及供应商进阶管理
  • mPaaS开发工程师认证课程

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 微信高效运维之路

    • 相关实验场景

    更多
  • 搭建微信小程序（AMD 8代）
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    DataWorks售前咨询