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

简单理解组件即 "页面的一部分". 组件化开发也更多是为了代码复用, 方便管理和提高开发效率. 前端的组件化开发我想大抵也是借鉴后端开发思想吧. 从前端的实现来看, 以 vue 为例即通过扩展自定义 HTML 标签的的形式, 让其局部拥有"单文件"的功能 (包括了模板, 样式, 逻辑). 然后组件之间通过数据通信, 即完成了整个页面的渲染这样的. 从小程序这块的组件化思想, 基本就是抄袭90%的vue + 10% 的 react 罢. 咱也不管, 从工具使用层面能用就行吧.

先来简单创建一个名为 cj 的小组件, 能被其他页面引用就行.

创建自定义组件

• 在项目根目录中, 创建 components -> cj 文件夹
• 在 cj 文件夹上右键, 点击 "新建 Component"
• 回车后则会自动生成 4 个对应的文件, 即 cj.wxml, cj.wxss, cj.js, cj.js

Tips: 多个组件一定要放不同的文件夹哦, 不然就混乱的 (每个组件其实是4个文件)

自定义的 cj 组件的 .wxml中会自动默认生成一段内容如下:

<!--components/cj/cj.wxml-->
<text>components/cj/cj.wxml</text>

局部引用

组件的引用可分为局部引用和全局引用. 类似 vue 中注册全局组件和局部组件一个意思.

在需要的页面, 这里以 index 为例, 在其 .json 文件中添加如下代码就可引入啦. 这里引入的名字是可以随意取的, 满足规则即可.

{
  "usingComponents": {
    "cj": "/components/cj/cj"
  }
}

然后在 index 页面中就可以用 "cj" 这样的标签组件了.

<!--/pages/index/index.wxml-->
<view>
  下面的显示, 是引用的一个自定义组件: 
  <cj></cj>
</view>

则真机页面渲染的页面显示:

下面的显示, 是引用的一个自定义组件: 
components/cj/cj.wxml

个人感觉小程序这个改造的比 vue 还简单呀, 一下就秒懂了.

全局引用

在 app.json 中全局配置上的话, 就可在任何页面使用啦, 类似 vue 的 app.component({xxx})

"usingComponents": {
"cj":"/components/cj/cj"
}

这样任意一个页面都能用啦. 如果大多页面都需要用到这个组件, 设置为全局是合适的, 如果只是少数页面中使用, 那还是建议使用局部组件哦.

自定义组件和普通页面的区别

• 组件的 .json 需要声明 "component": true属性
• 组件的 .js 中调用的是 Component( ) 函数; 普通页面是 Page( ) 函数
• 组件的事件处理函数需要定义到 methods 节点中, 而普通页面直接往 Page( ) 中编写