• 小程序(三)


    前言:续上集,寒冷不能停止学习,嘻嘻

    (一) 基础组件

      1.媒体主键(video制作弹幕)

     

    (二) 创建自定义主键

      一个自定义组件由 json wxml wxss js 4个文件组成

    //必要条件:要在 json 文件中进行自定义组件声明

    {
    "component": true
    }

     
    #使用已注册的自定义组件前,首先要在使用方页面的 json 文件中进行引用声明。 

    {
      "usingComponents":{
      "标签名(可自定义)":"组件所在路径(即定义组件的目录所在地)"

      }
    }

    注意事项:

    • 因为WXML节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。

    • 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。

    • 自定义组件和使用自定义组件的页面所在项目根目录名不能以“wx-”为前缀,否则会报错。

    • 旧版本的基础库不支持自定义组件,此时,引用自定义组件的节点会变为默认的空节点。

    (三) slot节点

      在组件模板中可以提供一个 <slot> 节点,用于承载组件引用时提供的子节点。

    //注意:默认情况下,一个组件的wxml中只能有一个slot。需要使用多slot时,可以在自定义组件js中声明启用:

    Component({
      options: {
      multipleSlots: true // 在组件定义时的选项中启用多slot支持
    }
    })

    //此时,可以在这个组件的wxml中使用多个slot,以不同的 name 来区分:

    <view class="wrapper">
    <slot name="before"></slot>
    <view>这里是组件的内部细节</view>
    <slot name="after"></slot>
    </view>

    //使用时,用 slot 属性来将节点插入到不同的slot上:
    <view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 --> <view slot="before">这里是插入到组件slot name="before"中的内容</view> <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 --> <view slot="after">这里是插入到组件slot name="after"中的内容</view> </component-tag-name> </view>

    (三) 外部样式

    //有时,组件希望接受外部传入的样式类。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类:
    Component({
      externalClasses: ['my-class']
    })

    //这样,组件内的效果将会受到外部样式的影响:
    <custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

    (四) 全局样式

    //使用外部样式类可以让组件使用指定的组件外样式类,如果希望组件外样式类能够完全影响组件内部,可以将组件构造器中的options.addGlobalClass字段置为true:
    /* 组件 custom-component.js */
    Component({
      options: {
        addGlobalClass: true,
      }
    })
    //设置后在组件的模板文件中:
    <!-- 组件 custom-component.wxml -->
    <text class="red-text">这段文本的颜色由组件外的 class 决定</text>

    注意:当开放了全局样式类,存在外部样式污染组件样式的风险,请谨慎选择。

    (五) 传递模板数据

    //与普通的 WXML 模板类似,可以使用数据绑定,这样就可以向子组件的属性传递动态数据,但是需要注意,绑定数据前,需要在自定义模板的js文件中进行申明: 
    Component({
    
      properties: {
        属性1: {
          type:数据类型,  //支持的数据类型:String、Array、Object、null、Boolean
          value: 默认值
        },
        属性2: {
          type: 数据类型,
          value: 默认值,
          observer(新值, 老值, 属性名){//回调函数
    
          }
        }
      }
    };
    <!-- 引用组件的页面模板 -->
    <view>
      <component-tag-name 属性1="属性1值" 属性2="属性2值">
          ....
      </component-tag-name>
    </view>
    IT这条路,当你懂得越多的时候,那么你不懂的也就会越多了.
  • 相关阅读:
    CSS对 网页进行布局
    myeclipse配置tomcat服务器
    JDBC链接数据库
    java集合框架
    java日期操作
    二叉树的最近公共祖先
    二叉树的深度
    飞地的数量
    岛屿数量
    岛屿的最大面积
  • 原文地址:https://www.cnblogs.com/learningPHP-students2018/p/10204767.html
Copyright © 2020-2023  润新知