小程序中自定义组件的创建与引用

NewBoy
657 阅读2分钟

「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」

组件的创建

  • 在项目的根目录中，鼠标右键，创建 components -> test 文件夹

  • 在新建的 components -> test文件夹上，鼠标右键，新建 components

  • 键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为 .js,.json,.wxml,.wxss

    Snip20220126_2.png

组件的引用

组件的引用方式为 局部引用 和全局引用

  • 局部引用：组件只能在当前被引用的页面使用
  • 全局引用：组件可以在小程序的每个页面中使用

局部引用组件

  • 自定义组件的局部引用

    • 在当前页面的 .json 配置文件中引用组件

    • 在 usingComponents 节点中声明要使用的自定义组件，值为键值对，key 为组件名字， value 为组件的存放路径

      {
    "usingComponents": {
        "my-test":"/components/test/test"
    }
}

  • 自定义组件的局部使用

    在当前页面的 .wxml 文件中使用组件

    <text>pages/home/home.wxml</text>

<my-test> </my-test>>

全局引用组件

  • 自定义组件的全局引用

    • 在 app.json 文件中，引用组件

    • 在 usingComponents 节点中声明要使用的自定义组件，值为键值对，key 为组件名字， value 为组件的存放路径

      {
    "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle":"black"
    },
    "usingComponents": {
        "my-test":"/components/test/test"
    },
}

  • 自定义组件的全局使用

    在当前页面的 .wxml 文件中使用组件

    <text>pages/home/home.wxml</text>

<my-test> </my-test>>

全局引用 VS 局部引用

根据组件的使用频率 和范围，来选择合适的引用方式

  • 如果某个组件在多个页面中经常被用到，建议使用全局引用
  • 如果某个组件只在特定页面中被都用到，建议使用局部引用

组件和页面的区别

从表面看，组件和页面都是由 .js 、.json 、.wxml 和 .wxss 这四个文件组成。但是，组件和页面的 .js 与 .json 文件有明显不同

  • 组件的 .json 文件中需要声明 "component": true 属性

  • 组件的 .js 文件中调用 component() 函数，页面的 .js 文件中调用 Page() 函数

  • 组件的事件处理函数需要定义到 methods 节点中，页面的事件处理函数需要定义到 data 函数同级即可

avatar
文章
阅读
粉丝