一.定义和使用组件
1.定义组件
- 添加components目录用来存放common component
- 右键components添加like目录用来存放”喜欢“组件
- 右键like选择添加Component命名为index
- 即会在like文件夹下创建对应的index开头的js/json/wxml/wxss文件
2.引用组件
-
在需要使用上述创建的like组件的其他page组件中的json文件定义如下内容
{ "usingComponents": { "c-like":"/components/like/index" } }
-
其中usingComponent表示要使用到的组件,c-like为在当前组件中要引入的其他组件的命名,在当前组件可以通过
<c-like/>
的方式进行引用,对应的值则是like组件的位置
二.样式细节
1.rpx与px
- rpx设置的值会随着设备页面不同而大小响应式变化
- px设置的值不会随着设备页面不同而大小变化
2.全局样式设置
-
设置全局样式文件:根目录添加app.wxss文件
-
在app.wxss文件中添加
page { font-family: "PingFangSC-Thin"; }
- 如上方式即可设置统一的字体样式,因为所有的组件外部会包装一个
<page>
标签 - 注意:只有font、color样式可以被组件继承,定义其他属性其他组件继承
- IOS操作系统默认字体是:苹方
- Android操作系统默认字体是:思源
- 如上方式即可设置统一的字体样式,因为所有的组件外部会包装一个
3.inline-flex
- 设定为flex布局的组件依旧是块级元素,宽度为100%
- 如果想设置该元素变为行级元素的flex布局则给该容器设置
display:inline-flex
css属性
4.组件事件与事件处理
-
小程序触摸事件为
tab
,如果希望监听事件则是bind:tab="处理函数名"
或bindtab="处理函数名"
,并在js文件中的methods: {}
添加处理函数 -
小程序也可以通过
catch:tab="处理函数名"
实现绑定触摸事件 -
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡
-
实例代码
-
index.wxml
<view bind:tap="onLike" class="container"> <image src="images/like.png"></image> <text>9</text> </view>
-
index.js
Component({ /** * 组件的属性列表 */ properties: {}, /** * 组件的初始数据 */ data: {}, /** * 组件的方法列表 */ methods: { onLike: (event) => { console.log(event) } } })
-