微信小程序之開(kāi)發(fā)會(huì)議OA項(xiàng)目

這篇具有很好參考價(jià)值的文章主要介紹了微信小程序之開(kāi)發(fā)會(huì)議OA項(xiàng)目。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

前言

本篇目標(biāo)?

首頁(yè)

會(huì)議

投票?

個(gè)人中心?

會(huì)議OA項(xiàng)目-首頁(yè)

配置

tabbar

mock工具

page

swiper

會(huì)議信息

會(huì)議OA項(xiàng)目-會(huì)議?

自定義tabs組件

會(huì)議管理

會(huì)議OA項(xiàng)目-投票

會(huì)議OA項(xiàng)目-個(gè)人中心

前言

文章含源碼資源，投票及個(gè)人中心詳細(xì)自行查看源碼即可

小程序沒(méi)有DOM對(duì)象，一切基于組件化
儲(chǔ)備知識(shí)
1. 理解事件機(jī)制
2. 理解組件化
3. 理解數(shù)據(jù)綁定
4. Flex布局
5. 移動(dòng)端適配方案
建議：學(xué)習(xí)vue后開(kāi)發(fā)小程序更簡(jiǎn)單

本篇目標(biāo)?

首頁(yè)

微信小程序之開(kāi)發(fā)會(huì)議OA項(xiàng)目,微信小程序,微信小程序,小程序,會(huì)議OA

會(huì)議

微信小程序之開(kāi)發(fā)會(huì)議OA項(xiàng)目,微信小程序,微信小程序,小程序,會(huì)議OA ?

投票?

微信小程序之開(kāi)發(fā)會(huì)議OA項(xiàng)目,微信小程序,微信小程序,小程序,會(huì)議OA

個(gè)人中心?

微信小程序之開(kāi)發(fā)會(huì)議OA項(xiàng)目,微信小程序,微信小程序,小程序,會(huì)議OA

會(huì)議OA項(xiàng)目-首頁(yè)

配置

config/api.js

// 以下是業(yè)務(wù)服務(wù)器API地址
 // 本機(jī)開(kāi)發(fā)API地址
var WxApiRoot = 'http://localhost:8080/demo/wx/';
// 測(cè)試環(huán)境部署api地址
// var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
// 線上平臺(tái)api地址
//var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';

module.exports = {
  IndexUrl: WxApiRoot + 'home/index', //首頁(yè)數(shù)據(jù)接口
  SwiperImgs: WxApiRoot+'swiperImgs', //輪播圖
  MettingInfos: WxApiRoot+'meeting/list', //會(huì)議信息
};

tabbar

app.json

"list": [{
      "pagePath": "pages/index/index",
      "text": "首頁(yè)",
      "iconPath": "/static/tabBar/coding.png",
      "selectedIconPath": "/static/tabBar/coding-active.png"
    },
      {
        "pagePath": "pages/meeting/list/list",
        "iconPath": "/static/tabBar/sdk.png",
        "selectedIconPath": "/static/tabBar/sdk-active.png",
        "text": "會(huì)議"
      },
      {
        "pagePath": "pages/vote/list/list",
        "iconPath": "/static/tabBar/template.png",
        "selectedIconPath": "/static/tabBar/template-active.png",
        "text": "投票"
      },
      {
        "pagePath": "pages/ucenter/index/index",
        "iconPath": "/static/tabBar/component.png",
        "selectedIconPath": "/static/tabBar/component-active.png",
        "text": "個(gè)人中心"
      }]

mock工具

imageSrcs

{
  "data": {
    "images":[
        {
          "img": "https://tse2-mm.cn.bing.net/th/id/OIP-C.ja-L_FC01Xbzhqo4Rm3B8gHaEo?rs=1&pid=ImgDetMain",
          "text": "1"
        },
        {
          "img": "https://tse2-mm.cn.bing.net/th/id/OIP-C.A3UXYP_OyP3S5UfO6HXuAgHaEK?rs=1&pid=ImgDetMain",
          "text": "2"
        },
        {
          "img": "https://pic3.zhimg.com/v2-9873f715d01819718cdc59dc004052b5_1440w.jpg?source=172ae18b",
          "text": "3"
        },
        {
          "img": "https://ts1.cn.mm.bing.net/th/id/R-C.8bb9ed00b8b77b8de03ca88c2c5b9c70?rik=KsLZ%2fjYfY5ELCg&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f10539408%2f14.jpg&ehk=HMGT1e0hcjxVw1XAbC7yJpq3qSDWlnwsj%2fRN%2f0Etimk%3d&risl=&pid=ImgRaw&r=0",
          "text": "4"
        },
        {
          "img": "https://img1.pconline.com.cn/piclib/200906/09/batch/1/34797/1244512002916phjm5dpgjl.jpg",
          "text": "5"
        },
        {
          "img": "https://ts1.cn.mm.bing.net/th/id/R-C.d951726778523659c8f2d7fd6ad838fd?rik=kR8VYs9ELLWFKQ&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f85280274%2f2017032108.jpg&ehk=%2fJInO%2fEPMaYF1q%2fu6vzk2j6hPSkAEyCyc3%2fH1Ib1tM0%3d&risl=&pid=ImgRaw&r=0",
          "text": "6"
        }
    ]
  },
  "statusCode": "200",
  "header": {
    "content-type":"applicaiton/json;charset=utf-8"
  }
}

page

index.css

page{
	height: 100%;
	background-color: #efeff4;
}

swiper

index.wxml

<swiper indicator-dots="true" autoplay="true" circular="true" indicator-color="#fff" indicator-active-color="blue">
   <block wx:for="{{images}}" wx:key="text">
       <swiper-item>
           <view class="swiper-item">
              <image src="{{item.img}}" mode="scaleToFill"></image>
           </view>
       </swiper-item>
   </block>
</swiper>

index.css

swiper {
  width: 100%;
  height: calc(100vw*9/16);
}
.swiper-item>image {
   width:100%;
}

index.js

loadSwiperImgs(){
     //請(qǐng)注意this的指向問(wèn)題
     let that=this;
     wx.request({
       url: api.SwiperImgs,
       success(rs){
         console.log(rs);
         that.setData({
            images:rs.data.images
         });
       }
    })
}

會(huì)議信息

mock數(shù)據(jù)

{
  "data": {
    "lists": [
        {
           "id": "1",
          "image": "/static/persons/Snipaste_2024-02-18_20-39-17.png",
          "title": "微信小程序會(huì)議OA_空空",
          "num":"1314",
          "state":"進(jìn)行中",
          "starttime": "2024-02-18 21:00:00",
          "location": "湖南省——長(zhǎng)沙市"
        },
        {
          "id": "1",
          "image": "/static/persons/Snipaste_2024-02-18_20-40-00.png",
          "title": "微信小程序會(huì)議OA_空空",
          "num":"520",
          "state":"已結(jié)束",
          "starttime": "2024-02-18 12:00:00",
          "location": "湖南省——長(zhǎng)沙市"
        },
        {
          "id": "1",
          "image": "/static/persons/Snipaste_2024-02-18_20-40-45.png",
          "title": "微信小程序會(huì)議OA_空空",
          "num":"888",
          "state":"進(jìn)行中",
          "starttime": "2024-02-18 08:00:00",
          "location": "湖南省——長(zhǎng)沙市"
        },
        {
          "id": "1",
          "image": "/static/persons/Snipaste_2024-02-18_20-40-45.png",
          "title": "微信小程序會(huì)議OA_空空",
          "num":"666",
          "state":"已結(jié)束",
          "starttime": "2024-02-18 08:00:00",
          "location": "湖南省——長(zhǎng)沙市"
        },
        {
          "id": "1",
          "image": "/static/persons/Snipaste_2024-02-18_20-40-00.png",
          "title": "微信小程序會(huì)議OA_空空",
          "num":"999",
          "state":"進(jìn)行中",
          "starttime": "2024-02-18 08:00:00",
          "location": "湖南省——長(zhǎng)沙市"
        }
      ]
  },
  "statusCode": "200",
  "header": {
    "content-type":"applicaiton/json;charset=utf-8"
  }
}

index.wxml

<view class="mobi-title">
    <text class="mobi-icon"></text>
    <text>會(huì)議信息</text>
</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>人報(bào)名</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block>
<view class="section bottom-line">
		<text>到底啦</text>
</view>

index.js

loadMeetingInfos(){
    let that=this;
    wx.request({
        url: api.MettingInfos,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              lists:res.data.lists
          })
        }
      })
  }

index.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;
}

會(huì)議OA項(xiàng)目-會(huì)議?

自定義tabs組件

?文檔參考地址：自定義組件 | 微信開(kāi)放文檔

tabs.json

{
  "component": true,
  "usingComponents": {}
}

?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

var App = getApp();
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    tabList:Object
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    tabIndex:0
  },

  /**
   * 組件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 獲取索引
      const {index} = e.currentTarget.dataset;
      // 觸發(fā) 父組件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

會(huì)議管理

list.json

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

list.wxml

<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></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 al-center">
            <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 al-center">{{item.state}}</view>
                <view class="join al-center"><text class="list-num">{{item.num}}</text>人報(bào)名</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

// pages/meeting/list/list.js
Page({

    /**
     * 頁(yè)面的初始數(shù)據(jù)
     */
    data: {
      tabs:['會(huì)議中','已完成','已取消','全部會(huì)議'],
      lists: [
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'1314',
          'state':'進(jìn)行中',
          'time': '02月18日 21:00',
          'address': '湖南省——長(zhǎng)沙市'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-40-00.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'520',
          'state':'已結(jié)束',
          'time': '02月18日 21:00',
          'address': '湖南省——長(zhǎng)沙市'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-40-45.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'666',
          'state':'進(jìn)行中',
          'time': '02月18日 21:00',
          'address': '湖南省——長(zhǎng)沙市'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-40-45.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'888',
          'state':'已結(jié)束',
          'time': '02月18日 21:00',
          'address': '湖南省——長(zhǎng)沙市'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'217',
          'state':'進(jìn)行中',
          'time': '10月09日 16:59',
          'address': '北京市·朝陽(yáng)區(qū)'
        }
      ],
      lists1: [
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'304',
          'state':'進(jìn)行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山區(qū)'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'380',
          'state':'已結(jié)束',
          'time': '10月09日 17:39',
          'address': '北京市·朝陽(yáng)區(qū)'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'500',
          'state':'進(jìn)行中',
          'time': '10月09日 17:31',
          'address': '大連市'
        }
      ],
      lists2: [
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'304',
          'state':'進(jìn)行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山區(qū)'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'380',
          'state':'已結(jié)束',
          'time': '10月09日 17:39',
          'address': '北京市·朝陽(yáng)區(qū)'
        }
      ],
      lists3: [
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'304',
          'state':'進(jìn)行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山區(qū)'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'380',
          'state':'已結(jié)束',
          'time': '10月09日 17:39',
          'address': '北京市·朝陽(yáng)區(qū)'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'500',
          'state':'進(jìn)行中',
          'time': '10月09日 17:31',
          'address': '大連市'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'150',
          'state':'已結(jié)束',
          'time': '10月09日 17:21',
          'address': '北京市·朝陽(yáng)區(qū)'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序會(huì)議OA_空空',
          'num':'217',
          'state':'進(jìn)行中',
          'time': '10月09日 16:59',
          'address': '北京市·朝陽(yáng)區(qū)'
        }
      ]
    },
    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
     */
    onLoad(options) {

    },


    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
     */
    onShow() {

    },

    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
        })
    }
})

會(huì)議OA項(xiàng)目-投票

list.js

// pages/vote/list/list.js
var app = getApp();
Page({

    /**
     * 頁(yè)面的初始數(shù)據(jù)
     */
    data: {
        tabs:['全部','發(fā)起的','參與的'],
        voteList:[
            {
                id:1,
                title:'微信小程序會(huì)議OA_空空',
                votes:[
                    {
                        id:1,
                        img:'/static/persons/Snipaste_2024-02-18_20-40-00.png',
                        title:'A',
                        mem:'A'
                    },
                    {
                        id:2,
                        img:'/static/persons/Snipaste_2024-02-18_20-40-45.png',
                        title:'B',
                        mem:'B'
                    }
                ]
            },
            {
                id:1,
                title:'微信小程序會(huì)議OA_空空',
                votes:[
                    {
                        id:1,
                        img:'/static/persons/Snipaste_2024-02-18_20-40-00.png',
                        title:'B',
                        mem:'B'
                    },
                    {
                        id:2,
                        img:'/static/persons/Snipaste_2024-02-18_20-40-45.png',
                        title:'C',
                        mem:'C'
                    },
                    {
                        id:3,
                        img:'/static/persons/Snipaste_2024-02-18_20-40-45.png',
                        title:'D',
                        mem:'X'
                    },
                    {
                        id:4,
                        img:'/static/persons/Snipaste_2024-02-18_20-39-17.png',
                        title:'F',
                        mem:'T'
                    }
                ]
            }
        ]
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
     */
    onLoad(options) {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
     */
    onShow() {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
     */
    onHide() {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
     */
    onUnload() {

    },

    /**
     * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
     */
    onPullDownRefresh() {

    },

    /**
     * 頁(yè)面上拉觸底事件的處理函數(shù)
     */
    onReachBottom() {

    },

    /**
     * 用戶點(diǎn)擊右上角分享
     */
    onShareAppMessage() {

    },
    tabsItemChange(e){
        let index = e.detail.index;
        console.log('vote.index='+index)
        if(index==1 || index==2){
            if (app.globalData.hasLogin) {
                
            }else{
                wx.navigateTo({
                  url: '/pages/auth/login/login',
                })
            }
        }
    }
})

會(huì)議OA項(xiàng)目-個(gè)人中心

index.wxml

<view class="page-container">
    <view class="user-info-container">
        <view class="user-info"  bindtap="goLogin">
            <image class="user-img" mode="scaleToFill" src="{{userInfo.avatarUrl}}" />
            <text class="user-info-name">{{userInfo.nickName}}</text>
        </view>
        <image class="user-update" src="/static/tabBar/component.png" bindtap='goPages' data-url='/pages/ucenter/user/user'/>
    </view>

    <view class="boundary" />
    <view class="cells-container">
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class="cell-text">我主持的會(huì)議</text>
            <view class="cell-right">
                <view class="cell-list-num">{{metting_pubs}}</view>
                <view class="cell-arrow"></view>
            </view>
        </view>
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class="cell-text">我參與的會(huì)議</text>
            <view class="cell-right">
                <view class="cell-list-num">{{metting_joins}}</view>
                <view class="cell-arrow"></view>
            </view>
        </view>
    </view>
    <view class="boundary" />
    <view class="cells-container">
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class="cell-text">我發(fā)布的投票</text>
            <view class="cell-right">
                <view class="cell-list-num">1</view>
                <view class="cell-arrow"></view>
            </view>
        </view>
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class="cell-text">我參與的投票</text>
            <view class="cell-right">
                <view class="cell-list-num">10</view>
                <view class="cell-arrow"></view>
            </view>
        </view>
    </view>
    <view class="boundary" />
    <view class="cells-container">
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/template.png" />
            <text class="cell-text">消息</text>
            <view class="cell-right">
                <view class="cell-list-num"></view>
                <view class="cell-arrow"></view>
            </view>
        </view>
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/component.png" />
            <text class="cell-text">設(shè)置</text>
            <view class="cell-right">
                <view class="cell-list-num"></view>
                <view class="cell-arrow"></view>
            </view>
        </view>
    </view>
</view>

箭頭樣式：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-826892.html

.cell-arrow {
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-color: rgb(136, 136, 136);
  border-style: none solid solid none;
  transform: rotate(315deg);
}

到了這里，關(guān)于微信小程序之開(kāi)發(fā)會(huì)議OA項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！