【一步步学小程序】3. 使用自定义组件(component)
上一节创建了一个包含多个课程数据的列表。这一节我们用自定义组件（component），来优化列表页面，即如图，我们把每个课程单元格封装为组件。
使用组件的好处：
- 自定义组件可以在不同的页面中重复使用
- 将复杂的页面拆分成多个低耦合的模块，有助于代码维护
一、创建组件
1、首先我们在项目根目录中创建component目录，用以存放项目开发过程中创建的所有自定义组件。
2、接着创建课程组件course，只需要在component目录中创建course目录，并像页面一样，分别创建以下四个文件：
- course.js
- course.json
- course.wxml
- course.wxss
3.此时项目会报错，因为course.json的内容为空，导致json解析失败。我们打开course.json，添加以下代码：
{"component": true
}
以上代码标识了course为组件（component）
4.现在我们打开course.wxml文件，进行布局（布局代码与上一节的课程单元格一致）
<view class="course_main_view"><view class="course_main_item_view"><image class="course_cover_image" src="/images/course.png"></image><text class="title">如何成为压力管理的高手</text><text class="course_teacher">指导老师：克里斯朵夫 英国牛津大学客座教授</text><view class="course_address_view"><image class="course_address_image" src="/images/home/location.png"></image><view class="course_address">广州｜2020.05.05-05.15</view></view></view>
</view>
5.打开course.wxss，将上一节的约束代码复制进去
.course_main_view{width: 500rpx;height: 366rpx;margin-left: 14rpx;margin-right: 14rpx;margin-top: 30rpx;align-content: center;justify-content: center;display: inline-block;border-radius: 16rpx;background-color: #F9FAFB;
}.course_main_item_view{display: flex;flex-direction: column;
}.course_cover_image{width: 500rpx;height: 230rpx;background-color: #cccccc;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;
}.title{margin-left: 16rpx;margin-top: 10rpx;line-height: 40rpx;text-align: left;font-size: 28rpx;color: #333333;
}.course_teacher{margin-left: 16rpx;line-height: 40rpx;width: 500rpx;text-align: left;font-size: 20rpx;color: #666666;
}.course_address_view{margin-left: 16rpx;height: 40rpx;width: 500rpx;display: flex;flex-direction: row;justify-content: start;
}.course_address_image{margin-top: 10rpx;width: 20rpx;height: 20rpx;
}.course_address{margin-left: 10rpx;line-height: 40rpx;text-align: left;font-size: 20rpx;color: #999999;
}
5.至此，我们已经把组件的界面做完了，现在可以直接将课程当作组件在其它页面中使用。我们打开上一节创建的homeMain.json，改为：
{"usingComponents": {"course": "/component/course/course"}
}
即在homeMain中声明了自定义组件的名称，以及对应的路径。
6.此时，我们可以在wxml中使用course组件了，将homeMain.wxml的代码改为：
<view class="container">
<course wx:for="{{7}}" isBig></course>
</view>
即可实现和上一节中的效果，课程列表显示了7个课程。
2、给组件赋值动态数据
1.一般从服务器拿到的都是json数据，我们假设从服务器拿到了课程的json数据如下：
[{"title": "如何成为压力管理的高手","teacher": "克里斯朵夫 英国牛津大学客座教授","date": "2020.05.05-05.15","city": "广州"
},
{"title": "训练注意力升级大脑CEO","teacher": "时华 SIY正念情商领导力认证导师","date": "2020.05.05-05.15","city": "广州"
}]
2.我们给course控件添加属性data属性，即打开course.js，将代码改为如下：
var app = getApp()
Component({/*** 组件的属性列表*/properties: {data: {type: Object,value: {}}}
})
3.将course.wxml中原来静态的数据改为动态：
<view class="course_main_view"><view class="course_main_item_view"><image class="course_cover_image" src="/images/course.png"></image><text class="title">{{data['title']}}</text><text class="course_teacher">指导老师：{{data['teacher']}}</text><view class="course_address_view"><image class="course_address_image" src="/images/home/location.png"></image><view class="course_address">{{data['city']}}|{{data['date']}}</view></view></view>
</view>
4.在homeMain.js中，声明json数据：
Page({/*** 页面的初始数据*/data: {course: [{ "title": "如何成为压力管理的高手", "teacher": "克里斯朵夫 英国牛津大学客座教授", "date": "2020.05.05-05.15", "city": "广州" },{ "title": "训练注意力升级大脑CEO", "teacher": "时华 SIY正念情商领导力认证导师", "date": "2020.05.05-05.15", "city": "广州" }]},})
5.在homeMain.wxml中的course组件中以属性的方式传入数据即可：
<view class="container">
<course wx:for="{{course}}" data="{{item}}" isBig></course>
</view>
运行效果如图：
相关文章：
《lua程序设计（第二版）》学习笔记（五）-- 函数基础
-- 第 5 章 函数-- 一种对语句和表达式进行抽象的主要机制 print(os.date()); -- 打印日期 Sun Apr 20 12:44:46 2014 -- 一看到sun，感慨广州没有晴天 -- 函数没有参数也要括号 -- 特殊情况:只有一个参数的时候, 并且参数一个string／table构造…
HTTP协议中的chunked编码解析
“ HTTP协议中的chunked传输编码全接触。”在HTTP协议中，服务器发往客户端的数据中，通常都包括HTTP头和HTTP体，当存在HTTP体的时候，HTTP体的长度通常是由HTTP头内的“Content-Length”字段确定。就像下图：不过…
html-css实例
<!DOCTYPE html> <html><head><meta charset"utf-8" /><title>求签</title><style type"text/css">*{margin: 0px;padding: 0px;font-family: "微软雅黑",arial,sans-serif;}body{background: url(im…
【Swift】变量/常量/类型总结
1、变量（Variable） 变量，可以理解为存放某一类型的值的容器，如： var count:Int var shouldRemind:BOOL var text:String var list:[ChecklistItem]一个变量的数据类型，决定了它能存放什么类型的数据。有些…
ODBC更新记录集提示”记录集为只读“
创建的ODBC应用程序默认的记录集不具有只读属性，但是再更新记录表时会提示”记录集为只读“，这是为什么呢？ 今天看书找到了答案： 因为MFC中的数据库类不支持需要连接两个或者多个表的记录集更新，如果选择数据源的时候选…
gzip格式分析与识别
“ 介绍gzip格式，识别gzip压缩的数据流量。”在协议分析过程中，经常会发现gzip压缩的数据，例如在HTTP协议中，在HTTP头中会标示，内容编码为gzip、DEFLATE。但是，还有很多情况，例如一些非HTTP协议…
CSS 和 JS 动画哪个更快
基于Javascript的动画暗中同CSS过渡效果一样，甚至更加快，这怎么可能呢？而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用，这又怎么可能呢？ 本文逐一遍览了基于Javascript的DOM动画库，如Veloci…
C语言之分支结构 if(一)
一 程序的三种基本结构 顺序结构：程序从上往下依次执行，这个叫顺序结构 分支结构：有选择的执行或者不执行某段代码 循环结构：重复的执行某段代码 二 分支结构之if 最简单的俩种用法 (tips: if语句后面的大括号可以省略：…
react-native安装Ant Design
1.集成Ant Design到项目 项目根目录中执行命令： npm install ant-design/react-native --save2.集成按需加载babel-plugin-import到项目 项目根目录中执行命令： npm install --save-dev babel-plugin-import3.创建.babelrc文件 根目录中创建新文件…
车联网APP，安全设施薄弱的山寨品
“ 目前的车联网APP，几乎没有安全性可言。”在网络上闲逛，一不小心，逛进了车联网的领地。物联网、车联网、IoT如火如荼，各个大佬、院士加持，看着相当的高大上。但是，在伟岸的外表下，到底真实的情…
CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns"http://www.w3.org/1999/xhtml"> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8"/><title>无标题文档</title><style type"text/css"&…
【星榜单】盘点那些坑爹的国产手机们
【星榜单】盘点那些坑爹的国产手机们 国产手机的那些坑爹事儿很多，中庸到基本大众脸的设计还算是有点良心的，那些奇葩的名字、所谓的高配低价低却又山寨级的做工、饥饿营销让你看得到买不到、伪小清新却又华而不实放眼过去的国产智能手机比比皆是&#x…
App Tracking Transparency被拒解决
App Tracking Transparency 如果使用了App Tracking Transparency，苹果要求在iOS 14.5及以上的版本中必须在弹框取得用户同意后，才可以跟踪用户。否则会被拒： 解决方案 参照官方文档说明（https://developer.apple.com/documen…
ProtoBuf格式详解
“介绍protobuf编码格式。”protobuf是一种数据交换格式，又称PB编码，由Google开源，类似于Json、XML，但其内部是纯二进制格式，比Json，XML等格式要更精炼，主要用于数据的序列化和反序列化…
Android studio 第二次作业
作业要求： 作一个显示框里面分成三行 一二行占这个框的1/2 第三行独占1/2 第三行里面分成两列第一列占25%，第二列占75%。 屏幕显示效果 实现步骤： <LinearLayout android:orientation"vertical"注意这里是横向布局 …
Cable master (POJ No.1064)
二分搜索思想：bool C(double x)可以得到长度为x的绳子//#define LOCAL #include<stdio.h> #include<math.h> int const MAX_N10005; int const MAX_M100; double const INF100000000; int N,K; double d[MAX_N],lb,ub; //判断是否满足条件 bool C(doubl…
iOS 11 导致tableview 刷新之后漂移问题
在10 系好好的，在11系统刷新只有就会多一个白块。查询才返现，添加一下代码 完美解决此bugself.mainTableView.estimatedRowHeight 0; self.mainTableView.estimatedSectionHeaderHeight 0; self.mainTableView.estimatedSectionFooterHeight 0;
HTTP协议解析之Cookie
“ Cookie与身份认证。”提到HTTP协议，不可避免地都会牵涉到Cookie，可以说，Cookie作为HTTP的重要组成部分，促进了HTTP协议的发展壮大。HTTP协议如果没有了Cookie，将会是一个无状态，无法便捷地进行用户识别的…
libevent源码深度剖析十一
libevent源码深度剖析十一 ——时间管理 张亮 为了支持定时器，Libevent必须和系统时间打交道，这一部分的内容也比较简单，主要涉及到时间的加减辅助函数、时间缓存、时间校正和定时器堆的时间值调整等。下面就结合源代码来分析一下。 1 初始化…
CentOS 安装Apache
# centOS 安装A M P 环境[参考简书作者,非常感谢！！！](https://www.jianshu.com/p/bc14ff0ab1c7) ## 一 Apache 环境安装 1 安装Apache > yum install httpd2 操作指令一览 > systemctl start httpd //启动apache > systemct…
使用admin lte 碰到访问Google字体的问题
下载了admin lte 的模板，运行的时候，发现很慢，看了一下console,发现adminlte.css里有import google的字体文件，众所周知的原因，无法访问，所以网页很慢，没办法，只能下载到本地了,cnbl…
如何突破DNS报文的512字节限制
“DNS协议大家都应该很熟悉，最近有同学问到如何获得UDP承载的超过512字节的DNS报文，借此机会，我们一起了解下DNS协议与报文长度有关的一些细节。”本文将讨论的是DNS协议在UDP承载时超过512字节的这一细节。在之前的文章里，对DNS协…
Fragment为什么须要无参构造方法
日前在项目代码里遇到偷懒使用重写Fragment带参构造方法来传参的做法，顿生好奇，继承android.support.v4.app.Fragment而又不写无参构造方法不是会出现lint错误编译不通过的咩？仔细追究，原来是这货被加了SuppressLint("ValidF…
CentOS 安装FTP
# 安装FTP * 1 安装命令> yum -y install vsftpd * 2 使用如下命令增加账户，其中 /var/www/html 是我们的 ftp 目录，ftpadmin 为 ftp 用户名。 > useradd -d /var/www/html -s /sbin/nologin ftpadmin * 3 给 ftpadmin 这个用户设置密码 > pa…
HTTP协议中的Range和Content-Range
“ 琢磨HTTP协议的每一个细节。”HTTP协议博大精深，每一个细节都应细细体会。否则，在协议还原的过程中，你会遇到各种问题。今天，本文中将对HTTP协议的Range和Content-Range进行分析。Range和Content-Range是 HTTP/1.1中新增的HTTP…
【HTML5游戏开发】简单的《找不同汉字版》，来考考你的眼力吧
一，准备工作 本次游戏开发需要用到lufylegend.js开源游戏引擎，版本我用的是1.5.2（现在最新的版本是1.6.0）。 引擎下载的位置：http://lufylegend.googlecode.com/files/lufylegend-1.5.2.rar 引擎API文档：ht…
FTP 命令的使用详解
# 使用Terminal 连接FTP ####Tips: 1 通过!进入本地主机的shell，然后通过exit退出本地主机进入远程服务器shell 2 要把文件下载到哪一个目录 就要先cd 到 哪个目录，再去进行ftp 连接，这样 执行 get 文件 自动下载到目录3 下载的文件的时候…
html 11 内联（行内）
行内元素 <span> 块级元素 <div> <p> <section> <header> <footer> 行内元素，这是高 margin-top margin-bottom 无意义 ，无效果，因为它仅仅在行内 ，它跳不出行，行多少它就多少。…
宅男抖音某猫协议分析及应用破解
“ 分析传说中的快x，顺便提供破VIP线路及去启动广告方法。”在当今这个由应用市场主导的网络上，流传着一批应用，它们低调又神秘，依赖口碑与独立网站在地下渠道传播，应用市场中从来都找不到它们的身影。这类应用&#x…
AdminLTE的使用
官方文档link1.AdminLTE的必要配置文件<!-- Tell the browser to be responsive to screen width --> <meta content"widthdevice-width, initial-scale1, maximum-scale1, user-scalableno" name"viewport"> <!-- Bootstrap 3.3.5 --> …