ps:函数是一个可复用的最小单元
1. 新建一个组件文件夹components
- 在components再新建组件 like文件夹
- 右键新建组件 index
2. 在页面里引用组件
- 修改页面json文件
添加usingComponents内容
在页面进行注册组件时需要制定一个规范
v- 或者其他规范都可以
{
"usingComponents": {
"v-like":"/components/like/index"
}
}
3. 相对路径和绝对路径
相对路径:根据页面所在层级../ 一直返回到需要引用的层级下
绝对路径:加 / 表示从根目录开始
// 相对路径
"v-like":"../../components/like/index"
// 绝对路径
"v-like":"/components/like/index"
4. 编写组件
- 组件中写image标签时,如果不设置宽高,那么就会使用默认宽高300px, 225px
5. 小程序尺寸单位与设计原则 (设计稿以iphone6 750像素为例)
- 问题 为什么根据设计图提供的图片设置宽高后,图片尺寸还是过大
- px rpx
px 像素单位
rpx 小程序像素单位(可以自适应)
当系统拿到的图片尺寸是32px,28px
用px设置时:width:32/2px height: 28/2 px;
用rpx设置时:width:32rpx height:28px; - 大多数情况可以用rpx
- 字体可以用px (其他的根据情况选择)
6. 如何给全局进行一些样式设定
- 在app.wxss中给page设置样式
小程序自动会给整个项目页面添加page标签用来包含所有内容。
page {
font-family: "PingFangSC-Thin";
font-size: 32rpx;
}
- 组件会继承全局设置的样式
可以被组件继承的样式不多,有:font-size color - 减少在全局样式文件中添加样式,防止污染组件。
7.组件的宽度固定还是自适应
当用view标签时,默认是块状元素,占一行。
用flex来布局时,效果是占一整行,为了处理这个问题
可以考虑固定宽度,或者用inline-flex来消除块级影响。
8.数据来源的三种途径
- wxml :直接写在wxml上
- js-》wxml:写在js里,然后传给wxml
- 服务器-》js-》wxml:先从服务器请求数据,然后通过js处理传到wxml
9.组件的封装性,开放性及粒度
- 封装性
不需要从组件外传入到组件的数据,一般直接封装。这类属性直接放入properties
properties是个JavaScript对象,可以指定三个属性type,value,observe
type(类型):Number,String,Object
value(初始值): 初始值
observer(函数): function(){
} - 开放性
思考哪些应该封装在内部,哪些是需要开放出来的
// 封装性体现
properties: {
isLike:{
type: Boolean,
value: false,
observer: function () {
}
},
likeImg:{
type: String,
value: 'images/like.png',
observer: function () {
}
},
noLikeImg:{
type: String,
value: 'images/like@dis.png',
observer: function () {
}
}
},
// 开放性体现
data: {
isLike: true,
likeCount: 99,
likeImg: 'images/like.png',
noLikeImg: 'images/like@dis.png'
},
- 粒度
非常简单的功能,非常复杂的功能
网友评论