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

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

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

小程序主要用到的"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

腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

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

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

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

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

置顶推荐

打赏本站

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