微信小程序自定义组件的使用,组件的应用方法

2021-07-07   阅读:1313   分类:后端    标签: 微信小程序

前景:我们在开发小程序的时候,有时头部是通用的,我们每个页面都写一样的代码,一个不好维护外,一个也会代码赘余。这时我们可以封装下组件使用自定义组件。

小程序主要用到的"usingComponents": { },来引入组件。

自定义组件步骤:

例子:我们定一个用来放搜索框的组件

1、 新建组件:我们在项目根目录下新建components目录,用于放我们自定义的组件,然后新建search目录,并在目录下新建component,如下图所示

image.png

2、 组件的引用

定义好组件之后,我们来使用组件,比如在index页面引入

打开index.json文件,添加如下代码:左边是组件名,右边是组件路径

  "usingComponents": {
    "Search": "../../components/search/search"
  },

2、 使用组件

上面引入之后,我们就可以使用组件了,我们打开index.wxml,添加如下代码,引入我们的组件:<Search></Search>

<view>
  <!-- 搜索框开始 -->
  <Search></Search>
  <!-- 搜索框结束 -->
</view>

可以看到已经成功引入该组件了

image.png

【腾讯云】预热专享1888元早鸟券一键领取,云服务器等爆品抢先购低至4.2元/月

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/729.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×