小程序项目

代码涉及的主要文件有：

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. pages/index/index.js

app.json

{"pages": ["pages/index/index"],"window": {"navigationBarBackgroundColor": "#971a22","navigationBarTitleText": "首页","navigationBarTextStyle": "white"},"style": "v2","sitemapLocation": "sitemap.json"
}

pages/index/index.wxml

<view class="indexContainer"><view class="recommendSongContainer"><view class="header"><view class="title">推荐歌单</view><view><text class="desc">邂逅你的真爱歌单</text><text class="btn">></text></view></view><scroll-view class="recommendSongList" enable-flex scroll-x><view class="recommendItem" wx:for="{{list}}" wx:key="id"><image src="{{item.picUrl}}"></image><view class="name">{{item.title}}</view></view></scroll-view></view><view class="newSongContainer"><view class="header"><view class="title">新歌速递</view><view><text class="desc">更多鲜乐更多快落</text><text class="btn">></text></view></view></view><view class="newDiscContainer"><view class="header"><view class="title">新碟上架</view><view><text class="desc">魔力新碟好听到爆</text><text class="btn">></text></view></view></view><view class="screamSongContainer"><view class="header"><view class="title">尖叫新歌榜</view><view><text class="desc">潮人必听热门新单</text><text class="btn">></text></view></view></view>
</view>

pages/index/index.wxss

.indexContainer{padding: 0 20rpx;
}
.header{display: flex;justify-content: space-between;align-items: center;margin: 20rpx 0;
}
.header .title{font-weight: bold;
}
.header .desc{font-size: 24rpx;color: #333;padding: 0 20rpx;
}
.header .btn{font-size: 24rpx;padding: 0 10rpx;background: #eee;color: #888;border-radius: 6rpx;
}
.recommendSongList{display: flex;height: 280rpx;
}
.recommendSongList image{width: 200rpx;height: 200rpx;border-radius: 10rpx;margin-right: 10rpx;
}
.recommendSongList .name{font-size: 26rpx;display: -webkit-box;overflow: hidden;text-overflow:ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}

pages/index/index.js

Page({data:{list:[]},onLoad(){this.getDataFromServer();},getDataFromServer(){const result = [{id: 494479726, picUrl: "https://p2.music.126.net/58ox3zVEmosSrdLaKj6x5w==/109951162827155600.jpg", title: "后摇MV | 原来后摇也能视觉化"},{id: 135595185, picUrl: "https://p2.music.126.net/11ZHf0G9FQzWNi-8sFzCmw==/109951164541050373.jpg", title: "Acid Jazz酸爵士—爵士乐中的“酸性”融合"},{id: 114846926, picUrl: "https://p2.music.126.net/GTf1b1G2dAs1SleurIfcJg==/3399689953594431.jpg", title: "歌名后缀大科普"},{id: 113780871, picUrl: "https://p2.music.126.net/qxUWSKhrd1UWME8oAYTMFQ==/109951164497486331.jpg", title: "「Cool Jazz」冷爵士让你全身心放松"},{id: 2962407224, picUrl: "https://p2.music.126.net/NW1GEN3sruiLpT4AZrdDFw==/109951165669533032.jpg", title: "『英伦女声』遗世而独立的不列颠玫瑰"},{id: 2107922801, picUrl: "https://p2.music.126.net/b--QkIcFfdxz_DryW55ZfA==/109951163165101034.jpg", title: "声光美学 I 经典电影中的古典配乐集"},{id: 78669437, picUrl: "https://p2.music.126.net/AfN_yyi-fQe8POTMKJFjAA==/7957165650297535.jpg", title: "美剧中的神级插曲"},{id: 3116763088, picUrl: "https://p2.music.126.net/MSom1XSXqt5K9ArZlJ29CQ==/109951164608648583.jpg", title: "音乐的力量 I 文艺复兴时期的世俗情歌"},{id: 101354498, picUrl: "https://p2.music.126.net/dmj9iqz8MsD_sCd1xBF0WA==/7918682744429845.jpg", title: "时尚运动•必备节奏"}]this.setData({list:result})}
})

自定义组件

项目根目录下新建文件夹：components，components下新建文件夹：Header，Header下新建Component，自动生成文件： Header.wxml、Header.wxss、Header.js和Header.json。

代码变更涉及的文件有：

1. components/Header/Header.wxml
2. components/Header/Header.wxss
3. components/Header/Header.js
4. pages/index/index.json
5. pages/index/index.wxml
6. pages/index/index.wxss

components/Header/Header.wxml

<view class="header"><view class="title">{{title}}</view><view><text class="desc">{{desc}}</text><text class="btn">></text></view>
</view>

components/Header/Header.wxss

.header{display: flex;justify-content: space-between;align-items: center;margin: 20rpx 0;
}
.header .title{font-weight: bold;
}
.header .desc{font-size: 24rpx;color: #333;padding: 0 20rpx;
}
.header .btn{font-size: 24rpx;padding: 0 10rpx;background: #eee;color: #888;border-radius: 6rpx;
}

components/Header/Header.js

Component({properties: {title:{type:String,value:"默认标题"},desc:{type:String,value:"默认描述"}},data: {},methods: {}
})

pages/index/index.json

{"usingComponents": {"Header":"/components/Header/Header"}
}

pages/index/index.wxml

<view class="indexContainer"><view class="recommendSongContainer"><Header title="推荐歌单" desc="邂逅你的真爱歌单"/><scroll-view class="recommendSongList" enable-flex scroll-x><view class="recommendItem" wx:for="{{list}}" wx:key="id"><image src="{{item.picUrl}}"></image><view class="name">{{item.title}}</view></view></scroll-view></view><view class="newSongContainer"><Header title="新歌速递" desc="更多鲜乐更多快落"/></view><view class="newDiscContainer"><Header title="新碟上架" desc="魔力新碟好听到爆"/></view><view class="screamSongContainer"><Header title="尖叫新歌榜" desc="潮人必听热门新单"/></view>
</view>

pages/index/index.wxss

.indexContainer{padding: 0 20rpx;
}
.recommendSongList{display: flex;height: 280rpx;
}
.recommendSongList image{width: 200rpx;height: 200rpx;border-radius: 10rpx;margin-right: 10rpx;
}
.recommendSongList .name{font-size: 26rpx;display: -webkit-box;overflow: hidden;text-overflow:ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}

小结

创建自定义组件

微信小程序中使用 Component() 实现自定义组件，它接收一个对象作为参数，该对象包含多个属性，其中，常用的有：

• properties，组件的对外属性，相当于vue或react中的props。类型是Object Map，非必填。如

properties: {title:{type:String, //属性的类型，必填value:"默认标题" //属性的初始值，非必填}
}

• data，组件自己内部的数据。类型是Object，非必填。
• methods，组件的方法。

使用自定义组件

使用自定义组件前，首先要在页面json文件中进行引用声明，如下所示，这样，页面的wxml中就可以像使用基础组件一样使用自定义组件。

{"usingComponents": {"Header":"/components/Header/Header"}
}

相关链接

使用scroll-view实现滑块视图可能遇到的问题及其解决方法
自定义组件介绍
Component构造器

微信小程序中自定义组件相关推荐

1. 《十》微信小程序中自定义组件的组件模板和样式

   组件 WXML 模板: 组件模板的写法与页面模板相同. 模板数据绑定: 与普通的 WXML 模板类似,可以使用数据绑定. <!-- custom-component.wxml --> &l ...

2. 微信小程序 配置自定义组件代码按需注入 lazyCodeLoading

   微信小程序 配置自定义组件代码按需注入 lazyCodeLoading 官方网址 在app.json最后一行加上,就可以了. "lazyCodeLoading": "re ...

3. 微信小程序可以加服务器上的字体,微信小程序中自定义字体

   微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...

4. 微信小程序的自定义组件（2）

   文章目录 6. 组件的生命周期 7. 组件所在页面的生命周期 8. 组件插槽 9. 组件父子组件间的通信 10. 组件-behaviors 6. 组件的生命周期 created attached re ...

5. 微信小程序_自定义组件_初体验

   自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段 个人认为,自定义组件是区分菜鸟与高手的分水岭 第一篇先介绍小程序自定义组件的基本使用 自定义组件的使用可以分为如下几个步骤 创建组件 ...

6. 微信小程序（自定义组件）

   文章目录 自定义组件 创建自定义组件 引用组件 组件和页面的区别 自定义组件的样式 样式隔离 修改样式隔离选项 组件的data和methods 组件的properties 数据监听 使用纯数据字段提升 ...

7. 微信小程序中自定义导航和地图定位

   在健康码中,主要的难点技术就是在小程序中定位.自定顶部导航. 自定义导航 在微信小程序中,默认的顶部导航不能设置图片背景或者是透明背景,只能自定义导航. 在每一个页面中引入,就是得到自己定义[个性化的 ...

8. 微信小程序中自定义背景导航栏透明背景设置

   首先确定好自己要在哪个页面中使用自定义头部导航栏样式 在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom" 这样在页面中头部 ...

9. 微信小程序之自定义组件的使用、介绍、案例分享

   微信小程序自定义组件介绍 自定义组件发开文档 类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 自定义组件的使用 1. 创建组件(js,json,wxml,wx ...

最新文章

1. 路由器配置实践 教你如何在Linux中三台主机两个网段互相通信
2. Mysterious Bacteria LightOJ - 1220[唯一分解定理+思维题]
3. 配置VMware ESXi 5事件发送到SYSLOG服务器
4. 关于Android学习
5. 设计模式六:适配器模式
6. php要掌握的内容,入门PHPer需要掌握的哪些内容？
7. AlexNet网络构建与训练
8. linux标准I/O——标准I/O介绍
9. usb大容量存储设备驱动程序_20年历史了！为什么USB接口还存在？网友：原来如此...
10. tomcat4 请求的处理——初步分析
11. Windows平台下tomcat+java的web程序持续占cpu问题调试
12. python画猪头_使用Python画小猪佩奇 社会人标配
13. librdkafka------C kafka Client
14. 计算机程序设计的史诗TAOCP
15. 【每日更新】万维钢精英日课3课程分享笔记：模糊逻辑：灰度认知，灰度决策，黑白执行
16. Unicode（全世界每个国家字符的唯一编码0x000000 到 0x10FFFF）与UTF-8的区别
17. 关于公布部分非法刊物的通知及冀职改办字[2006]48号
18. 三菱系统m70计算机连接错误,这可能是最齐全的三菱M70错误代码大全了
19. python爬虫——爬取搜狗影视热门电视剧
20. 每个人都值得学的一项技能

热门文章

1. 活死细胞染色——Cell Meter 细胞活性检测试剂盒
2. centos 中止 nodejs_今日热点游戏新闻！守望先锋2有望2月推出；心跳回忆新作将登陆NS；莱莎炼金工房2实体版中止发售；2K21加载画面广告...
3. [RK3288][Android6.0] 调试笔记 --- ECHI上的USB Camera无法打开
4. WCF 绑定（Binding）
5. vscode开发wdk
6. BZOJ.4695.最假女选手(线段树 Segment tree Beats!)
7. mysql（四/2）表的操作
8. 爆款小游戏用的都是什么游戏开发引擎？
9. DOS第二天 dir
10. PYTHON通过psutil模块实时监测cpu、内存、网速运行情况