AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

微信小程序4

2023-12-04 76
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序4

一、自定义组件应用

1.介绍

微信小程序自定义组件是指开发者可以自定义组件，将一些常用的 UI 元素封装成一个自定义组件，然后在多个页面中复用该组件，实现代码复用和页面性能优化的效果。

2.自定义组件分为两种类型

  1. 组件模板类型：组件调用方式类似于标签，使用时需要通过属性传参，组件内部通过 slot 来渲染内容。
  2. 组件 Behavior 类型：组件调用方式类似于混入，使用时需要 mixins 引入，组件内部通过 this 来访问引入的属性和方法。

3.自定义组件的开发流程如下：

  1. 在 components 文件夹内创建自定义组件文件夹和文件，组件文件夹下需要包含一个 .js 文件、一个 .wxml 文件，以及一个 .wxss 文件。
  2. 在自定义组件 .js 文件内注册自定义组件，定义属性和事件。
  3. 在需要使用自定义组件的页面 .json 文件内注册自定义组件。
  4. 在需要使用自定义组件的 .wxml 文件内调用自定义组件，并传递所需属性和事件。

注意事项：

  1. 自定义组件命名要求必须是小写字母和 - 的组合，且不能以 - 开头。
  2. 自定义组件的默认样式和命名规则与页面样式不同，具体规则可以参考官方文档。
  3. 自定义组件的事件需要在 .js 文件内通过 this.triggerEvent() 触发，事件名称必须以小写字母和 - 的组合命名。
  4. 自定义组件的使用方式和传参方式与普通组件有所不同，具体详情可以参考官方文档。

4.案例演示

4.1创建自定义组件

类似于页面，一个自定义组件由 jsonwxmlwxssjs 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(){}
  }
})

4.2使用自定义组件

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

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

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

在wxml里面使用自定义标签

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

4.3 案例---头部导航

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

效果

2、个人中心

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

效果


文章标签：
JavaScript
小程序
数据格式
JSON
开发者
现在是571
目录
相关文章
CamilleKing
|
1月前
|
存储 缓存 开发框架
提高微信小程序的应用速度
【10月更文挑战第21天】提高微信小程序的应用速度需要从多个方面入手，综合运用各种优化手段。通过不断地优化和改进，能够显著提升小程序的性能，为用户带来更流畅、更高效的使用体验。
CamilleKing
53 3
。思索
|
4月前
|
小程序
微信小程序——
微信小程序——
。思索
33 1
源码星辰
|
7月前
|
存储 小程序 API
一文认识微信小程序
微信小程序云开发是一种基于云平台的服务，可以为小程序提供数据库、存储、计算等服务。开发者可以在云开发环境中进行项目的开发、调试和部署，无需关心后端服务的搭建和运维。
源码星辰
57 4
小吴吴吴呀
|
7月前
|
存储 小程序 开发者
如何提升微信小程序的应用速度
如何提升微信小程序的应用速度
小吴吴吴呀
68 1
BNTang
|
存储 小程序
微信小程序-touches和changedTouches
在经过上一篇文章的介绍，已经清楚的了解了data与mark的区别，本章将要介绍的也是事件对象当中的两个属性，分别是，touches与changedTouches。
BNTang
154 0
现在是571
|
7月前
|
小程序 JavaScript 前端开发
微信小程序5
微信小程序5
现在是571
102 0
吉士先生
|
小程序 JavaScript
118.【微信小程序 - 02】（三）
118.【微信小程序 - 02】
吉士先生
74 0
吉士先生
|
小程序
118.【微信小程序 - 02】（九）
118.【微信小程序 - 02】
吉士先生
75 0
吉士先生
|
JSON 小程序 JavaScript
118.【微信小程序 - 02】（一）
118.【微信小程序 - 02】
吉士先生
79 0
吉士先生
|
小程序 前端开发 JavaScript
118.【微信小程序 - 02】（六）
118.【微信小程序 - 02】
吉士先生
72 0

热门文章

最新文章

  • 1
    天猫精灵开放平台-之小百科测评
  • 2
    语义检索系统：基于Milvus 搭建召回系统抽取向量进行检索，加速索引
  • 3
    3D立方体图片切换动画
  • 4
    模态对话框和非模态对话框
  • 5
    java03
  • 6
    冒泡排序
  • 7
    Windows XP客户端加域操作手册上
  • 8
    微信 6.5.1 for iOS发布 可以在朋友圈分享相册中的视频
  • 9
    Chapter 1: Creating the GUI Form and Adding Widgets
  • 10
    【Mockplus教程】帐号和购买
  • 1
    「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
    34
  • 2
    赋能加速AI应用交付，F5 BIG-IP Next for Kubernetes方案解读
    30
  • 3
    RAG分块策略：主流方法（递归、jina-seg）+前沿推荐（Meta-chunking、Late chunking、SLM-SFT）
    25
  • 4
    Python学习的自我理解和想法（2）
    29
  • 5
    Transformer图解
    35
  • 6
    API安全专题：如何有效应对新型Bot攻击？
    18
  • 7
    Selenium IDE：Web自动化测试的得力助手
    34
  • 8
    《docker高级篇（大厂进阶）：5.Docker-compose容器编排》包括是什么能干嘛去哪下、Compose核心概念、Compose使用三个步骤、Compose常用命令、Compose编排微服务
    49
  • 9
    24/7全时守护：AI视频监控技术的深度实现与应用分享
    42
  • 10
    《docker高级篇（大厂进阶）：6.Docker轻量级可视化工具Portainer》
    27

    • 相关课程

    更多
  • C++ 入门教程开发文档
  • 零基础学前端HTML+CSS
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 支付宝小程序教程
  • APICloud服务CAF开发者
  • 如何做微信小程序性能优化

    • 相关实验场景

    更多
  • 搭建微信小程序（AMD 8代）
  • 搭建微信小程序
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月