03 小程序基础知识与小程序组件初识

一.定义和使用组件

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-flexcss属性

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)
        }
      }
    })