【微信小程序】6天精准入门（第4天:自定义组件及案例界面）附源码

已于 2023-10-19 21:59:28 修改
阅读量611 收藏 22
点赞数 26
分类专栏： # 微信小程序 文章标签： 微信小程序 小程序
于 2023-10-18 13:32:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74383330/article/details/133897853
版权

一、自定义组件

1、介绍

        从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

        开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似

2、创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

{
  "component": true
}

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。

在项目中创建一个components/tabs文件夹，新建Component文件

【注意】

在新的版本里面我们会出现报错，但是在win7的一些旧版本里面是不会出现这些问题的，我们需要在project.config.json文件里面添加以下代码：

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

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。

代码示例：

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

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。更多细节参见 Component构造器 。

代码示例：

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

3、使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

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

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

在wxml里面使用<tabs>自定义标签

<tabs inner-text='6666'></tabs>

4、案例---头部导航

使用自定义组件，实现头部导航的一个效果

首先我们要在组件里面定义好

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.js

// components/tabs/tabs.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {//定义了组件所需要的属性值
        tabList:Object
    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {
    }
})

wxss

/* components/tabs/tabs.wxss */
.inner {
    color: red;
  }

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

我们在指定的页面调用自定义好的组件

在json文件里面设置调用组件

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

wxml文件里面添加自定义的组件

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

在js文件里面设置值

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

    /**
     * 页面的初始数据
     */
    data: {
        tabs: ['会议中', '已完成', '已取消', '全部会议']
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

二、案例界面设置

完成会议、投票、个人中心页面的设计

1、会议

在上面已经拥有的基础上进行一个点击数据的展示

在自定义组件的js文件里面进行方法的编写

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

在会议的页面的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>人报名</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block>
<view class="section">
    <text>到底啦</text>
</view>

在js文件的里面模拟假的数据

/**
     * 页面的初始数据
     */
    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(e) {
        console.log(e)
        let tolists;
        if (e.detail.index == 0) {
            tolists = this.data.lists;
        } else 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
        })
    }

完整代码

// 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(e) {
        console.log(e)
        let tolists;
        if (e.detail.index == 0) {
            tolists = this.data.lists;
        } else 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、投票

绑定自定义组件

json

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

wxml

<!--pages/vote/list/list.wxml-->
<!-- <text>投票</text> -->
<!-- <tabs inner-text='6666'></tabs> -->

<tabs tabList="{{tabs}}" bindtabsItemChange="tabsItemChange">
    <view class="search-container">
        <input class="search-input" bindinput="searchInputOne" placeholder="投票标题                    🔍" />
        <input class="search-input" bindinput="searchInputTwo" placeholder="投票选项                 🔍" />
    </view>
</tabs>
<!-- height: 120rpx;  -->
<view style="background-color: #aaa;"></view>

<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><text style="margin-right: 13rpx;"> 发 起 人</text> ： {{item.name}}</text></view>
                <view class="list-title"><text>会议名称 ： {{item.title}}</text></view>
                <view class="list-title"><text>投票标题 ： [ {{item.vote}} ]</text></view>
                <view class="list-tag">
                    <view class="state al-center">{{item.state}}</view>
                    <view class="join al-center"><text class="list-count">{{item.count}}</text>人参与投票</view>
                </view>
                <view class="list-info"><text style="font-weight: bold;">地址：</text><text>{{item.address}}</text> <text style="float: right;">{{item.time}}</text> </view>
                <view> <button class="btn">参与</button></view>
            </view>
        </view>
    </block>
    <view class="section bottom-line">
        <text>到底啦</text>
    </view>
</view>

js

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

    /**
     * 页面的初始数据
     */
    data: {
        tabs: ['全部', '已投票', '未投票'],
        lists: [
            {
                'id': '1',
                'image': '/static/persons/3.jpg',
                'name': '张三',
                'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
                'vote': '是否认同与京东进行产品合作',
                'count': '304',
                'state': '未投票',
                'time': '10月09日 17:59',
                'address': '深圳市·南山区'
            },
            {
                'id': '2',
                'image': '/static/persons/6.jpg',
                'name': '刘兵',
                'title': 'AIWORLD人工智能大会',
                'vote': '是否投资AI发展',
                'count': '480',
                'state': '已投票',
                'time': '10月09日 17:39',
                'address': '北京市·朝阳区'
            },
            {
                'id': '3',
                'image': '/static/persons/3.jpg',
                'name': '李四',
                'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
                'vote': '是否太空商业进行合作',
                'count': '500',
                'state': '未投票',
                'time': '10月09日 17:31',
                'address': '大连市'
            },
            {
                'id': '4',
                'image': '/static/persons/7.jpg',
                'name': ' 王五 ',
                'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
                'vote': '是否对本次创新持续升级',
                'count': '217',
                'state': '已投票',
                'time': '11月20日 16:59',
                'address': '北京市·朝阳区'
            }
        ],
        lists1: [
            {
                'id': '1',
                'image': '/static/persons/4.jpg',
                'name': '赵六',
                'title': '新质生活 · 品质时代 2016消费升级创新大会',
                'vote': '是否认同与京东进行产品合作',
                'count': '304',
                'state': '已投票',
                'time': '10月09日 17:59',
                'address': '深圳市·南山区'
            },
            {
                'id': '2',
                'image': '/static/persons/2.jpg',
                'name': '管理员',
                'title': '新质生活 · 品质时代 2016消费升级创新大会',
                'vote': '是否投资AI发展',
                'count': '480',
                'state': '已投票',
                'time': '10月09日 17:39',
                'address': '北京市·朝阳区'
            },
            {
                'id': '3',
                'image': '/static/persons/3.jpg',
                'name': '张三',
                'title': 'H100太空商业大会',
                'vote': '是否太空商业进行合作',
                'count': '500',
                'state': '已投票',
                'time': '10月09日 17:31',
                'address': '大连市'
            },
            {
                'id': '4',
                'image': '/static/persons/5.jpg',
                'name': ' 李四 ',
                'title': 'CSDN消费升级创新大会',
                'vote': '是否对本次创新持续升级',
                'count': '217',
                'state': '已投票',
                'time': '11月20日 16:59',
                'address': '北京市·朝阳区'
            }
        ],
        lists2: [
            {
                'id': '1',
                'image': '/static/persons/4.jpg',
                'name': '张三',
                'title': '深圳·北京PM大会',
                'vote': '是否认同与京东进行产品合作',
                'count': '422',
                'state': '未投票',
                'time': '10月09日 17:59',
                'address': '深圳市·南山区'
            },
            {
                'id': '2',
                'image': '/static/persons/6.jpg',
                'name': '李四',
                'title': 'AIWORLD人工智能大会',
                'vote': '是否投资AI发展',
                'count': '377',
                'state': '未投票',
                'time': '10月09日 17:39',
                'address': '北京市·朝阳区'
            },
            {
                'id': '3',
                'image': '/static/persons/3.jpg',
                'name': '王五',
                'title': 'H100太空商业大会',
                'vote': '是否太空商业进行合作',
                'count': '463',
                'state': '未投票',
                'time': '10月09日 17:31',
                'address': '大连市'
            },
            {
                'id': '4',
                'image': '/static/persons/5.jpg',
                'name': ' K&赵六 ',
                'title': '2023消费升级创新大会',
                'vote': '是否对本次创新持续升级',
                'count': '543',
                'state': '未投票',
                'time': '11月20日 16:59',
                'address': '北京市·朝阳区'
            }
        ]

    },

    tabsItemChange(e) {
        console.log(e.detail);
        let tolists;
        if (e.detail.index == 0) {
            tolists = this.data.lists;
        } else if (e.detail.index == 1) {
            tolists = this.data.lists1;
        } else if (e.detail.index == 2) {
            tolists = this.data.lists2;
        } else {
            tolists = this.data.lists;
        }
        this.setData({
            lists: tolists
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

wxss样式

/* pages/vote/list/list.wxss */

  .search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    border: cornsilk;
  }

  .search-input {
    width: 45%;
    padding: 8px;
    border-radius: 20px;
    border: 1px solid rgb(255, 255, 255);
    font-size: 14px;
    transition: border-color 0.3s;
    border: cornsilk;
  }

  .search-input:focus {
    outline: none;
    border-color: #51a7f9;
  }

  .search-input::placeholder {
    color: #999;
  }

  .search-input::-webkit-input-placeholder {
    color: #999;
  }

  .search-input::-moz-placeholder {
    color: #999;
  }

  .search-input:-ms-input-placeholder {
    color: #999;
  }
  /* .search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f0f0f0;
  }

  .search-input {
    width: 45%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
  } */
.list {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 20rpx 0 0;
    background-color: seashell;
    border-bottom: 1px solid #cecece;
    margin-bottom: 5rpx;
    height: 350rpx;
}

.list-img {
    display: flex;
    margin: 10rpx 10rpx;
    width: 160rpx;
    height: 250rpx;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.list-img .video-img {
    width: 140rpx;
    height: 160rpx;
    border-radius: 6px;
}

.list-detail {
    margin: 10rpx 10rpx;
    display: flex;
    flex-direction: column;
    width: 600rpx;
    height: 300rpx;
}

.list-title text {
    font-size: 9pt;
    color: #333;
    font-weight: bold;
}

.list-detail {
    display: flex;
    height: 100rpx;
}

.list-tag {
    display: flex;
}

.state {
    font-size: 9pt;
    color: blue;
    width: 120rpx;
    height: 40rpx;
    border: 1px solid blue;
    border-radius: 2px;
    margin: 10rpx 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.join {
    font-size: 11pt;
    color: #bbb;
    margin-left: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-count {
    margin-right: 10rpx;
    font-size: 11pt;
    color: red;
}

.list-info {
    font-size: 9pt;
    color: #bbb;
}

.btn {
    /* width: 10rpx;
    height: 40rpx;
    background-color: #3388ff;
    color: #fff;
    text-align: center;
    font-size: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center; */

    background-color: #3388ff;
      color: #fff;
      border-radius: 4rpx;
      font-size: 16rpx;
      padding: 10rpx 20rpx;

      /* background-color: #3388ff;
      color: #fff;
      border-color: #3388ff; */


      /* width: 100rpx;
      height: 40rpx;
      border: 1rpx solid #3388ff;
      border-radius: 4rpx;
      font-size: 16rpx;
      background-color: #3388ff;
      color: #fff;
      outline: none;
      box-shadow: 0 0 5rpx #3388ff; */

      /* width: 60rpx;
      height: 30rpx;
      border-radius: 4rpx;
      font-size: 16rpx; */

      /* width: 40rpx;
      height: 40rpx;
      background-color: transparent;
      border: none;
      font-size: 24rpx;
      color: #666; */


}

.bottom-line {
    display: flex;
    height: 60rpx;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
}

.bottom-line text {
    font-size: 9pt;
    color: #666;
}

3、个人中心

wxml

<!--pages/ucenter/index/index.wxml-->
<!-- <text>个人中心</text> -->
<view class="user">
    <image class="user-img"  src="/static/persons/1.jpg"></image>
    <view class="user-name">无法自律的人</view>
    <text class="user-state">状态：😊</text>
    <text class="user-up">修改＞</text>
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/coding-active.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我主持的会议</text>
        <text class="cell-items-num">99+</text>
        <text class="cell-items-detail">🆗</text>
    </view>
    <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的会议</text>
        <text class="cell-items-num">99+</text>
        <text class="cell-items-detail">❤</text>
    </view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></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>
        <text class="cell-items-num">89</text>
        <text class="cell-items-detail">👍</text>
    </view>
    <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/coding-active.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的投票</text>
        <text class="cell-items-num">8</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></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>
        <text class="cell-items-ion">＞</text>
    </view>
    <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/component.png" class="cell-items-icon"></image>
        <text class="cell-items-title">设置</text>
        <text class="cell-items-ion">＞</text>
    </view>
</view>

wxss

/* pages/ucenter/index/index.wxss */
Page {
    background-color: rgba(135, 206, 250, 0.075);
}

.user {
    display: flex;
    width: 100%;
    align-items: center;
    background-color: white;
    margin-bottom: 28rpx;
}

.user-img {
    height: 170rpx;
    width: 170rpx;
    margin: 30rpx;
    border: 1px solid #cdd7ee;
    border-radius: 6px;
}

.user-name {
    width: 380rpx;
    margin-left: 20rpx;
    font-weight: 550;
}

.user-state {
    color: rgb(136, 133, 133);
}

.user-up {
    color: rgb(136, 133, 133);
}

.cells {
    background-color: white;
}

.cell-items {
    display: flex;
    align-items: center;
    height: 110rpx;
}

.cell-items-title {
    width: 290rpx;
}

.cell-items-icon {
    width: 50rpx;
    height: 50rpx;
    margin: 20rpx;
}

.cell-items-num {
    padding-left: 30rpx;
    margin-left: 200rpx;
    width: 70rpx;
}

.cell-items-ion {
    margin-left: 295rpx;
}

无法自律的人
关注
专栏目录
微信小程序 B站首页界面设计：附详细教程 (源码)
05-30
微信小程序 B站首页界面设计：附详细教程 (源码)微信小程序 B站首页界面设计：附详细教程 (源码)微信小程序 B站首页界面设计：附详细教程 (源码)微信小程序 B站首页界面设计：附详细教程 (源码)微信小程序 B站首页...
微信小程序 自定义tabbar (源码)
05-31
微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义...
微信小程序 麻将骰子：附详细教程 (源码)
05-31
微信小程序是一种轻量级的应用开发平台，主要针对移动端，尤其是微信用户。它的出现使得开发者能够构建无需下载安装即可使用的应用，极大地提升了用户的使用体验。在这个“麻将骰子：附详细教程”的项目中，我们将...
微信小程序源码（含截图）B站首页界面设计：附详细教程
05-19
微信小程序源码（含截图）B站首页界面设计：附详细教程微信小程序源码（含截图）B站首页界面设计：附详细教程微信小程序源码（含截图）B站首页界面设计：附详细教程微信小程序源码（含截图）B站首页界面设计：附详细...
微信小程序静态页面案例（附源码）
03-29
微信小程序出来有段时间了，最近抽空写了个静态案例练练手。由于没有公测名额，无法测试，没有接口，所以先这样吧。 首先上图，整个app的演示是这样的： 图一     一、微信小程序和html5标签的区别： (此图片来源...
uniapp ，微信小程序，滚动（下滑，上拉）到底部加载下一页内容
qq_43557848的博客
10-29 485
先定义总页码和当前页码,data() {return {data: [],currentPage: 1,//页码totle_page: 0,//总页码},reload() {// 重置页码// 清空数据// 加载数据},
基于uniapp微信小程序的校园二手书交易系统
计算机学姐的博客
10-29 936
基于微信小程序+Java+SpringBoot+Vue+MySQL+Uniapp的校园二手书交易系统。该系统通过微信小程序平台，为大学生提供了一个便捷、高效的二手书籍交易平台，旨在解决传统信息发布方式信息不流通、真实性难以保证等问题。系统实现了用户注册登录、二手书籍发布与搜索、在线交流交易、商品管理等功能，有效促进了校园内二手书籍的循环利用，降低了学生的购书成本，并增强了校园社交互动。基于uni-app的校园二手书交易系统成功实现了前后端分离的开发模式，为大学生提供了一个便捷、高效的二手书籍交易平台。
微信小程序，打开新的项目，调试遇见[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json
demodashi666的博客
10-31 361
app.json 文件内容错误，解决方案
快速创建一个微信小程序，详细步骤以及示范程序代码
elirlove1的博客
10-25 3401
创建一个微信小程序涉及前端和后端的搭建与联调。以下是一个快速创建微信小程序的详细步骤以及示范程序代码。
基于uniapp微信小程序的宠物救助宠物领养系统
计算机学姐的博客
10-29 1376
基于微信小程序+Java+SpringBoot+Vue+MySQL+Uniapp的宠物救助宠物领养系统。该系统利用uniapp框架开发，支持跨平台运行，集成了宠物信息管理、用户注册登录、领养申请提交、交流论坛等功能。系统采用Springboot和MySQL作为后端支持，确保了数据的稳定与安全。通过该系统，用户可以方便地查看待领养的宠物信息，提交领养申请，并参与宠物相关的讨论，从而提升了宠物救助和领养的效率。基于uniapp微信小程序的宠物救助与领养系统是一个高效、便捷的信息共享和服务平台。
微信小程序生成二维码
等,一起的博客
10-30 732
h5/微信小程序生成二维码
【解决方案】微信小程序如何使用 ProtoBuf 进行 WebSocket 通信
Kuroko's Development Notes
10-30 962
本文详细介绍了在微信小程序开发中如何使用 ProtoBuf 协议进行前后端的 WebSocket 通信，从而实现微信小程序录音、WebSocket 发送语音、语音识别、接收语音等功能。
基于SSM+微信小程序的汽车维修管理系统（汽车5）
YMZN91的博客
10-29 607
基于SSM+微信小程序的汽车维修管理系统实现了三个角色：管理员、员工、用户。 1、管理员实现了首页、管理员管理员、员工管理、用户管理、车辆信息管理、配件管理等 2、员工实现了首页、个人中心、公告信息管理、配件管理、出入库管理、维修项目管理等。 3、用户实现了 注册、登录、首页、维修项目、论坛信息、我的等。
微信小程序 - 数组 push / unshift 追加后数组返回内容为数字（数组添加后打印结果为 Number 数值类型）
王佳斌
11-02 2341
微信小程序 - 数组 push / unshift 追加后数组返回内容为数字（数组添加后打印结果为 Number 数值类型），微信小程序 setData 数组。push 时出现的问题,push结果是1。微信小程序数组push后，数组返回内容为数字，小程序数组push后打印拿到的值非数组而是 Number 数值型
微信小程序 uniapp 腾讯地图的调用
weixin_46256404的博客
10-29 337
console.log(res) // 此处返回的就是城市名称。"desc": "你的位置信息将用于地图中定位"提前在您的app.json上加上这些代码。
微信小程序时间弹窗——年月日时分
xiaoququ的博客
10-29 794
【代码】微信小程序时间弹窗——年月日时分。
Java项目实战II基于微信小程序的马拉松报名系统（开发文档+数据库+源码）
2401_86524610的博客
10-27 940
马拉松运动，作为国际性的长跑赛事，近年来在全球范围内迅速风靡，成为许多人挑战自我、追求健康生活的热门选择。然而，传统的马拉松报名方式往往繁琐且效率低下，参与者需要经历漫长的排队、填写纸质表格等流程，极大地影响了报名体验。为了简化报名流程，提升用户体验，我们设计并开发了基于微信小程序的马拉松报名系统。该系统充分利用了微信小程序的便捷性，使得参赛者能够随时随地通过手机完成报名操作。从选择赛事、填写个人信息、上传相关证件，到支付报名费用，所有步骤均可在小程序内一站式完成，极大地节省了参赛者的时间和精力。
写一个 EventBus 实现微信小程序的发布订阅，支持全局消息通知、跨页面通信，高效好用！
最新发布
Kuroko's Development Notes
11-02 274
在微信小程序中实现发布/订阅模式可以通过创建一个简单的事件管理器来实现。这个事件管理器将负责注册事件监听器、触发事件以及移除监听器。
基于微信小程序的公务员考试信息查询系统+LW示例参考
10-29 1206
功能模块：小程序（考试信息推送、公务员职务信息查询、每日刷题、互动评论、模拟考试等）、后端管理（用户管理、题库管理等）技术栈：SpringBoot、shiro、druid、fastjson测试环境：idea2024，MySQL5.7，Maven3项目经过本地测试，确保可以运行，如有问题，请先自行检查！
微信小程序源码：自定义滚动弹幕生成工具
资源摘要信息:"这是一款能够在微信小程序平台使用的炫酷手持滚动弹幕生成工具的源码。该工具允许用户创建动态的弹幕效果，让文字在手机屏幕上像LED屏一样滚动显示，适用于各种场景，比如告白、活动宣传等。开发者为...
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无法自律的人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值