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

微信小程序之自定义组件（OA项目个人主页及投票）

1年前作者：ChatYU.分类：Toy博客阅读(15)违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序之自定义组件（OA项目个人主页及投票）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

本期为大家带来微信小程序自定义组件及OA项目的个人主页布局和投票

微信小程序之自定义组件（OA项目个人主页及投票）,微信小程序,微信小程序,小程序

一.自定义组件

1.学习官网

自定义组件 / 介绍 (qq.com)

2.如何自定义组件

 2.1 创建目录

在根目录下依次创建components/tabs，然后在tabs中新建Component

微信小程序之自定义组件（OA项目个人主页及投票）,微信小程序,微信小程序,小程序

创建好后会自动为我们生成对应的文件

微信小程序之自定义组件（OA项目个人主页及投票）,微信小程序,微信小程序,小程序

2.2添加配置文件(关闭检查)

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

在根目录下的project.config.json中的setting中添加上面的代码 

微信小程序之自定义组件（OA项目个人主页及投票）,微信小程序,微信小程序,小程序

2.3 添加组件内容

在 wxml 文件中编写组件模板

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

2.4 设置组件样式

在wxss中设置样式

.inner {
  color: red;
}

2.5 在component中注册组件

在js文件中的component中的组件属性列表中注册组件

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

3.使用自定义组件

3.1使用组件tabs

将组件配置添加到要使用的模块的json中

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

 3.2 在wxml中进行使用

这里默认在meeting/list.wxml中使用

<!--pages/meeting/list/list.wxml-->
<text>pages/meeting/list/list.wxml</text>
<tabs inner-text="YU"></tabs>

微信小程序之自定义组件（OA项目个人主页及投票）,微信小程序,微信小程序,小程序 

注：

  • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
  • 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
  • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：

  • 使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
  • 使用 usingComponents 时会多一些方法，如 selectComponent 。
  • 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）

如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。

4.自定义组件实战（OA项目）

4.1 分别定义好模板和样式

<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 {
    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;
}

4.2 在组件属性中定义属性和属性方法

properties: {
    tabList:Object 
  },
methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }

4.3在list.wxml中进行使用

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

4.4 页面切换所需数据 

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': '北京市·朝阳区'
      }
    ]

4.5 页面切换

通过tabsItemChange的方法进行一个页面的顶部导航栏切换

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

 4.5 页面布局

<view style="height: 60px;"></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>
<view class="section">
  <text>到底啦</text>
</view>

页面样式

/* pages/meeting/list/list.wxss */
/* pages/meeting/list/list.wxss */
.section{
  color: #aaa;
  display: flex;
  justify-content: center;
}
 
.list-info {
  color: #aaa;
}
 
.list-num {
  color: #e40909;
  font-weight: 700;
}
 
.join {
  padding: 0px 0px 0px 10px;
  color: #aaa;
}
 
.state {
  margin: 0px 6px 0px 6px;
  border: 1px solid #93b9ff;
  color: #93b9ff;
}
 
.list-tag {
  padding: 3px 0px 10px 0px;
  display: flex;
  align-items: center;
}
 
.list-title {
  display: flex;
  justify-content: space-between;
  font-size: 11pt;
  color: #333;
  font-weight: bold;
 
 
}
 
.list-detail {
  display: flex;
  flex-direction: column;
  margin: 0px 0px 0px 15px;
}
 
.video-img {
  width: 80px;
  height: 80px;
}
 
.list {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #6b6e74;
  padding: 10px;
}
 
.mobi-text {
  font-weight: 700;
  padding: 15px;
}
 
.mobi-icon {
  border-left: 5px solid #e40909;
}
 
.mobi-title {
  background-color: rgba(158, 158, 142, 0.678);
  margin: 10px 0px 10px 0px;
}
 
.swiper-item {
  height: 300rpx;
  width: 100%;
  border-radius: 10rpx;
}
 
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}
 
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.usermotto {
  margin-top: 200px;
}

 效果展示

微信小程序之自定义组件（OA项目个人主页及投票）,微信小程序,微信小程序,小程序

二.OA项目布局

1.个人主页

1.1 页面布局

<!--pages/ucenter/index/index.wxml-->
<view class="userInfo">
  <image class="userInfo-head" src="/static/persons/1.png"></image>
  <view class="userInfo-login">ChatYU</view>
  <text class="userInfo-set">修改></text>
</view>
 
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我发布的会议</text>
    <view class="cell-items-num">1</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我主持的会议</text>
    <view class="cell-items-num">1</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">投票的会议</text>
    <view class="cell-items-num">2</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">未投票的会议</text>
    <view class="cell-items-num">2</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我参与的会议</text>
    <view class="cell-items-num">5</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我审核的会议</text>
    <view class="cell-items-num">4</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
 
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">消息</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/component.png" class="cell-items-icon"></image>
    <text class="cell-items-title">设置</text>
 
  </view>
</view>

1.2 页面样式

/* pages/ucenter/index/index.wxss */
.userInfo{
  padding: 5px 0px 20px 10px;
  display: flex;
  align-items: center;
}
.userInfo-head{
  height: 80px;
  width: 80px;
  border: 5px solid rgb(194, 141, 26);
}
.userInfo-login{
  width: 245px;
  padding-left: 10px;
  font-weight: 700;
}
.userInfo-set{
  margin-right:20rpx ;
  color: rgb(196, 170, 56);
}
.cells{
  border-top: 8px solid rgb(238, 238, 238);
}
.cell-items{
  
  display: flex;
  align-items: center;
  border-top: 1px solid rgb(238, 238, 238);
  padding-top: 20px;
  padding-bottom: 20px;
}
.cell-items-icon{
  height: 25px;
  width: 25px;
  padding: 0px 10px 0px 5px;
}
.cell-items-title{
  width: 340px;
}
.cell-items-num{
  width: 30px;
  font-weight: 700;
  color: rgb(218, 31, 31);
}
.cell-items-detail{
  color: rgb(146, 151, 155);
}

1.3 效果展示

 微信小程序之自定义组件（OA项目个人主页及投票）,微信小程序,微信小程序,小程序

2.投票

2.1 页面布局

<!--pages/vote/list/list.wxml-->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view class="head">会议投票</view>
<view>
  <swiper indicator-dots="true" autoplay="true">
          <swiper-item>
            <image src="/static/meeting/2.png"></image>
          </swiper-item>
          <swiper-item>
            <image src="/static/meeting/会议.jpg"></image>
          </swiper-item>
      </swiper>
</view>
<view class="container">
  <!-- 左边部分，会议投票 -->
  <view class="left-section">
    <view class="weui-view1">会议投票</view>
    <!-- 这里放置会议投票的内容 -->
  </view>

  <!-- 右边部分，包括会议标题、投票事件、会议内容 -->
  <view class="right-section">
    <!-- 会议标题 -->
    <view class="item">
      <input class="weui-input1" auto-focus placeholder="会议标题"/>
      <!-- 这里放置会议标题的内容 -->
    </view>

    <!-- 投票事件 -->
    <view class="item">
      <input class="weui-input2" auto-focus placeholder="投票事件"/>
      <!-- 这里放置投票事件的内容 -->
    </view>

    <!-- 会议内容 -->
    <view class="item">
      <input class="weui-input3" auto-focus placeholder="会议内容"/>
      <!-- 这里放置会议内容的内容 -->
    </view>
  </view>
</view>
<view class="container">
  <!-- 左边部分，会议投票 -->
  <view class="left-section1">
    <view class="weui-view2">会议投票</view>
    <!-- 这里放置会议投票的内容 -->
  </view>

  <!-- 右边部分，包括会议标题、投票事件、会议内容 -->
  <view class="right-section">
    <!-- 会议标题 -->
    <view class="item">
      <input class="weui-input1" auto-focus placeholder="投票选项1"/>
      <!-- 这里放置会议标题的内容 -->
    </view>

    <!-- 投票事件 -->
    <view class="item">
      <input class="weui-input2" auto-focus placeholder="投票选项2"/>
      <!-- 这里放置投票事件的内容 -->
    </view>

  </view>
</view>
<view class="to_metting">发起投票</view>

2.2 页面样式

/* pages/vote/list/list.wxss */
.head{
  text-align: center;
  width: 313px;
  border:3px solid rgb(46, 133, 155);
  background-color: aqua

}
.container {
  padding: 0;
  display: flex;
  flex-direction: row;
}

.left-section {
  border: 2px solid rgb(10, 216, 231);
  width: 100px;
  height: 155px;
  text-align: center;
  background-color: #13bb91; /* 左边部分的背景颜色 */
}
.left-section1 {
  border: 2px solid rgb(22, 221, 128);
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #10d9f3; /* 左边部分的背景颜色 */
}

.right-section {
  flex: 1; /* 长占一份 */
  padding: 20rpx; /* 右边部分的内边距 */
}

.item {
  
  margin-bottom: 10rpx; /* 项目之间的下边距 */
}

.weui-view1{
  margin-top: 60px;
}

.weui-view2{
  margin-top: 35px;
}

.weui-input1{
  height: 45px;
  border: 2px solid rgb(38, 196, 207);
}
.weui-input2{
  height: 45px;
  border: 2px solid rgb(218, 170, 14);
}
.weui-input3{
  height: 45px;
  border: 2px solid rgb(21, 167, 40);
}
.to_metting{
  border: 2px solid rgb(10, 216, 231);
  display: flex;
  justify-content: center; /* 水平居中 */
  background-color: rgb(21, 167, 40);
}

2.3 效果演示

微信小程序之自定义组件（OA项目个人主页及投票）,微信小程序,微信小程序,小程序

今天的分享到这里就结束了，感谢各位大大的观看，各位大大的三连是博主更新的动力，感谢谢谢谢谢谢谢谢谢各位的支持！！！！！ 

微信小程序之自定义组件（OA项目个人主页及投票）,微信小程序,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-743312.html

到了这里，关于微信小程序之自定义组件（OA项目个人主页及投票）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

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

相关文章

  • 【微信小程序】自定义组件布局会议OA其他页面（附源码）

    【微信小程序】自定义组件布局会议OA其他页面（附源码）

    🎉🎉欢迎来到我的CSDN主页！🎉🎉 🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯 👉点击这里，就可以查看我的主页啦！👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧！🎁🎁 💖期待你的

    2024年02月08日
    浏览(11)
  • 小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）

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

                                            ⭐⭐ 小程序专栏：小程序开发专栏                                         ⭐⭐ 个人主页：个人主页 目录 一.前言 二.小程序自定义组件及其使用 2.1 自定义组件的使用 三.使用自定义组件完成会议功能界面的实

    2024年02月05日
    浏览(12)
  • 微信小程序之自定义模态弹窗（带动画）实例 —— 微信小程序实战系列（8）(2)

    微信小程序之自定义模态弹窗（带动画）实例 —— 微信小程序实战系列（8）(2)

    api如下： 示例： 这样的模态弹窗，充其量只能做个alert，提示一下信息。 但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法 wxml： button 弹窗标题 标题 标题 标题 标题 备注 确定 wxss： / button / .btn { width: 80%; padding: 20rpx

    2024年04月11日
    浏览(9)
  • uni-app 微信小程序之自定义中间圆形tabbar

    uni-app 微信小程序之自定义中间圆形tabbar

    首先在 pages.json 文件中，新建一个 tabbar 页面 此页面主要是写 tabbar的html样式和布局，引用主页面代码，通过 v-if 控制进行展示 index ， search ， maim ， news ， me 一级页面 css 样式文件太多了就不贴出来了

    2024年02月03日
    浏览(47)
  • 原生微信小程序基础-分包加载&&自定义组件&&&项目全流程

    原生微信小程序基础-分包加载&&自定义组件&&&项目全流程

    小程序分包加载 小程序分包加载-为什么要分包加载 微信平台对小程序单个包的代码 体积限制为 2M ，超过 2M 的情况下可以采用分包来解决 即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现 按需加载 配置文件能忽略的只有静态资源， 代码无法被忽略 配置忽略文

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

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

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

    2024年02月19日
    浏览(10)
  • 微信小程序 —— 会议OA项目首页布局与Mock数据交互

    微信小程序 —— 会议OA项目首页布局与Mock数据交互

    14天阅读挑战赛 如果世界上有奇迹，那一定是努力的另一个名字。 目录 一、小程序布局 1.1 Flex布局 1.2 Flex属性   二、OA会议首页搭建 2.1 首页底部菜单 2.2 创建后端结口 2.3 Mock模拟数据 2.4 首页轮播图搭建 2.5 首页内容搭建  布局的传统解决方案，基于盒状模型，依赖 dis

    2024年02月08日
    浏览(11)

  • 微信小程序TS项目使用mobx(页面直接使用store和自定义组件中使用store)

     注意：下载完成后，需要删除 miniprogram_npm 目录后，重新构建 npm。 注意：ts编写的话，方法中使用this，需要在参数中定义this: any，否则会提示错误 引入onLoad()方法中引入createStoreBindings将store上的方法和属性绑定到页面中 在unOnLoad()方法中销毁destroyStoreBindings() 页面中使用：

    2024年02月16日
    浏览(12)
  • 微信小程序进阶——Flex弹性布局&轮播图&会议OA项目（首页）

    微信小程序进阶——Flex弹性布局&轮播图&会议OA项目（首页）

    目录 一、Flex弹性布局 1.1 什么是Flex弹性布局 1.1.1 详解 1.1.2 图解  1.1.3 代码演示效果 1.2 Flex弹性布局的核心概念 1.3 Flex 弹性布局的常见属性 1.4 Flex弹性布局部分属性详解 1.4.1 flex-direction属性 1.4.2 flex-wrap属性 1.4.3 flex-flow属性 1.4.4 justify-content属性 1.4.5 align-items属性 1.4.6 

    2024年02月05日
    浏览(11)
  • 微信小程序--个人主页的制作

    微信小程序--个人主页的制作

    1. 效果图： 2.页面wxml的布局逻辑 （1）代码： 3.页面wxss的设置 （1）代码： 1. 获取登录信息 （1）Userinfo：获取用户信息 （2）avatarUrl：用户头像 （3）nickName：用户昵称 （4）zh_CN：简体中文 （5）注意：这里是获取两次用户头像，因为背景也用的到头像 （6）样式的设置： 2

    2024年02月09日
    浏览(14)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包