🏅我是默,一个在CSDN分享笔记的博主。📚📚
🌟在这里,我要推荐给大家我的专栏《微信小程序 》。🎯🎯
🚀无论你是编程小白,还是有一定基础的程序员,这个专栏都能满足你的需求。我会用最简单易懂的语言,带你走进代码的世界,让你从零开始,一步步成为编程大师。🚀🏆
🌈让我们在代码的世界里畅游吧!🌈
🎁如果感觉还不错的话请记得给我点赞哦!🎁🎁
💖期待你的加入,一起学习,一起进步💖💖
从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。(并且自定义组件和Vue有相似之处)
类似于页面,一个自定义组件由 json
wxml
wxss
js
4个文件组成。要编写一个自定义组件,首先需要在 json
文件中进行自定义组件声明(将 component
字段设为 true
可将这一组文件设为自定义组件):
- {
- "component": true
- }
同时,还要在 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(){}
- }
- })
使用已注册的自定义组件前,首先要在页面的 json
文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:
- {
- "usingComponents": {
- "component-tag-name": "path/to/the/custom/component"
- }
- }
这样,在页面的 wxml
中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。
开发者工具 1.02.1810190 及以上版本支持在 app.json 中声明 usingComponents 字段,在此处声明的自定义组件视为全局自定义组件,在小程序内的页面或自定义组件中可以直接使用而无需再声明。
代码示例:
-
- <component-tag-name inner-text="Some text">component-tag-name>
自定义组件的 wxml
节点结构在与数据结合之后,将被插入到引用位置内。
一些需要注意的细节:
usingComponents
字段)。注意,是否在页面文件中使用 usingComponents
会使得页面的 this
对象的原型稍有差异,包括:
usingComponents
页面的原型与不使用时不一致,即 Object.getPrototypeOf(this)
结果不同。usingComponents
时会多一些方法,如 selectComponent
。usingComponents
时, setData
内容不会被直接深复制,即 this.setData({ field: obj })
后 this.data.field === obj
。(深复制会在这个值被组件间传递时发生。)如果页面比较复杂,新增或删除 usingComponents
定义段时建议重新测试一下。
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>
- .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;
- }
- var App = getApp();
- Component({
- /**
- * 组件的属性列表
- */
- properties: {
- tabList:Object
- },
-
- /**
- * 组件的初始数据
- */
- data: {
- tabIndex:0
- },
-
- /**
- * 组件的方法列表
- */
- methods: {
- handleItemTap(e){
- // 获取索引
- const {index} = e.currentTarget.dataset;
- // 触发 父组件的事件
- this.triggerEvent("tabsItemChange",{index})
- this.setData({
- tabIndex:index
- })
- }
- }
- })
- {
- "usingComponents": {
- "tabs": "/components/tabs/tabs"
- }
- }
- data: {
- tabs:['会议中','已完成','已取消','全部会议'],
- },
"{{tabs}}" bindtabsItemChange="tabsItemChange">
- 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){
- 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
- })
- },
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>
- /* pages/meeting/list/list.wxss */
- /**index.wxss**/
- .section{
- color: #aaa;
- display: flex;
- justify-content: center;
- }
-
- .list-info {
- color: #aaa;
- font-size: 10px;
- }
-
- .list-num {
- color: #e40909;
- font-weight: 700;
- }
-
- .join {
- padding: 0px 0px 0px 10px;
- color: #aaa;
- }
-
- .state {
- margin: 0px 6px 4px 0px;
- 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;
- display: flex;
- }
-
- .list {
- display: flex;
- flex-direction: row;
- border-bottom: 4px solid #6b6e74;
- padding: 10px;
- align-items: center;
- }
-
- .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;
- }
- <view class="userInfo">
- <image class="userInfo-head" src="/static/persons/1.jpg">image>
- <view class="userInfo-login">刘兵瞎子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">3view>
- <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">4view>
- <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">10view>
- <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">6view>
- <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">11view>
- <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">4view>
- <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>
- /* pages/ucenter/index/index.wxss */
- .userInfo{
- padding: 5px 0px 20px 10px;
- display: flex;
- align-items: center;
- }
- .userInfo-head{
- height: 80px;
- width: 80px;
- }
- .userInfo-login{
- width: 245px;
- padding-left: 10px;
- font-weight: 700;
- }
- .userInfo-set{
- color: rgb(146, 151, 155);
- }
- .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);
- }