内置组件

image

图片标签

  • 与web中<img>的区别
    • 存在默认宽度和高度：320*240
    • 通过mode属性控制渲染效果
      • 裁剪模式 = 渲染模式
      • 默认值 scaleToFill
        • 设置图片内容，不管原图宽高比例，直接拉伸
      • widthFix
        • 宽度不变，高度等比例变化，保持原图的宽高比例
        • 设置的高度是无效的
      • aspectFit
        • 等比例缩放图片，直到图片的一段碰到边界就会停止
        • 停止之后会居中显示 没有填充满会出现剩余两边的空白
        • 类似于 web 中的 contain
      • aspectFill
        • 等比例缩放图片，直到图片完全填充满整个区域后才会停止
        • 停止之后显示图片的中间段，会裁剪出来这部分
        • 类似于 web 中的 cover
    • 支持懒加载
      • lazy-load
      • 在图片中添加该属性就会直接懒加载

        swiper

        轮播图标签，<swiper-item></swiper-item>轮播项标签

特性

  • 默认高度是150px

属性

  • indicator-dots
    • 指示器 小圆点
  • autoplay
    • 自动轮播
  • circular
    • 衔接轮播，不加就会从最后一个打倒序回去；

navigator

导航标签，块级元素 类似web中的a标签

  • 通过 url 来指定要跳转的页面

    • 跳转的页面是当前小程序的页面时，需要open-type
    • open-type = ""
      • 默认值navigate
        • 保留当前页面，但是不能跳转到tabBar页面
      • redirect
        • 关闭当前页面跳转某个页面，但不能条转到tabBar页面
      • switchTab
        • 跳转到tabBar页面，并关闭其他所有非tabBar页面
    • image.png
      1. <navigator 
      2. url="../../pages/index2/index2" 
      3. open-type="switchTab"
      4. >tabbar页面</navigator>
      5. <navigator 
      6. url="../../pages/index3/index3"
      7. >非tabbar页面</navigator>

  • 跳转到其他小程序

    • target="miniProgram" 跳转小程序需要添加该属性
    • 方式
      • app-id="" 设置跳转小程序的AppID
      • short-link="" 设置短链接
        • 比较新 可能存在兼容性问题
          1. <navigator 
          2. target="miniProgram" 
          3. app-id="wx011f13676f6a5380" 
          4. >跳转小程序</navigator>
          5. <navigator 
          6. target="miniProgram" 
          7. short-link="#小程序://羽毛球高高手/MJbrgwddFBsTLmh" 
          8. >羽毛球</navigator>

  • 联系客服 button

    • 需要通过button
    • 添加open-type="contact"

      rich-text

      富文本标签

nodes="{{html}}"属性
可以识别字符串中的标签

  1. <rich-text nodes="{{title}}"></rich-text>
  3. data: {
  4.         title: '<h1>大标题</h1><h2>标题2</h2>'
  5.     },

自定义组件

自定义组件还具有简化页面结构、封装复用代码的功能 组件化开发时目前前端开的的主流方式

注册自定义组件流程

  • 创建组件
    • 创建下文件夹右键选择
    • image.png

  • 注册组件

    • 在需要使用的页面文件中的json文件注册
    • "组件名"："组件文件路径"
      1. {
      2. "usingComponents": {
      3.    "border-image":"../../components/border-image/border-image"
      4. }
      5. }

  • 使用组件

    • 在注册过后的页面中当作标签使用

      组件通信

      父向子传值

      与vue类似 需要在component方法中properties内接收 value设置默认值

  1. <border-image src="../../images/1.png"/>
  1. Component({
  2.     properties:{
  3.         src:{
  4.             // 数据类型
  5.             type:String,
  6.             // 默认值
  7.             value:''
  8.         }
  9.     }
  10. })
  1. <text>自定义组件</text>
  2. <image src="{{src}}"></image>

子向父传参

  • 子组件
    • 小程序中组件的事件处理函数，必须放在methods对象中
    • 通过this.properties.属性名访问到该属性的值
    • this.triggerEvent('自定义事件',传递的参数)
  • 父组件
    • 自定义事件名前面需要添加bind
    • 自定义事件的处理函数内 通过e.detail获取到传递的值
      1. <text>自定义组件</text>
      2. <image bindtap="handleTap" src="{{src}}"></image>
      1. Component({
      2. properties:{
      3.    src:{
      4.        // 数据类型
      5.        type:String,
      6.        // 默认值
      7.        value:''
      8.    }
      9. },
      10. // 组件的事件处理函数必须放在methods中
      11. methods: {
      12.    handleTap() {
      13.        // 获取到 src的值this.properties.src
      14.        // console.log(this.properties.src);
      15.        // 子传父
      16.        this.triggerEvent('SrcChange',this.properties.src)
      17.    }
      18. },
      19. })
      ```jsx组件 - 图3 

  1. ```jsx
  2. Page({
  4.     /**
  5.      * 页面的初始数据
  6.      */
  7.     data: {
  8.         title: '<h1>大标题</h1><h2>标题2</h2>',
  9.         src:''
  10.     },
  13.     handleSrc(e) {
  14.         // console.log(e);
  15.         this.setData({src:e.detail})
  16.     }
  17. })