微信小程序新手入门之自定义组件的使用

前言

从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。

一、小程序的好处和特点

1、好处

开发者:小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换;也能节约开发和推广成本。

用户:能够节约使用时间成本和手机内存空间。对于开发者来说

2、特点

便捷性:小程序是不需要下载安装的,即用即走,非常方便用户的使用。并且不占用手机的内存,很便捷。

唯一性:小程序的名称是具有唯一性的,谁先注册就是谁的,当别人已经注册成功了,你是没有办法在注册的。

二、为什么要使用自定义组件

在写小程序的时候,可能存在很多个页面要使用同一个组件的情况,比如说,设计了4个页面,每个页面的顶部都需要显示一个搜索框,如果在每个页面都复制同一份搜索框的代码,会比较繁杂,代码可读性比较差,也不易于后期代码维护,此时可以单独封装为一个组件,大概意思就是,也就是通常说的自定义组件,此后哪个页面需要用到时就直接在对应页面的json文件中引入即可。

三、怎么使用自定义组件

1、打开项目文件目录,新建一个compoments目录

2、在compoments目录里,新建一个组件名

3、右键单击选择新建compoment

4、在自定义组件(prolist)里完成逻辑代码 5、在要引用组件的页面中的json文件中,注册组件

6、在页面的wxml中就可以使用prolist组件

7、在组件(prolist)中接收传过来的值

8、接收的值可以在组件的wxml文件中直接使用

总结

  • 新建一个目录存放自定义组件
  • 再新建一个组件的文件夹
  • 创建compoment
  • 完成组件的逻辑代码
  • 在其他页面注册组件
  • 使用组件

到此这篇关于微信小程序新手入门之自定义组件使用的文章就介绍到这了,更多相关微信小程序自定义组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序使用自定义组件导航实现当前页面高亮

    最近开发小程序,需要做一个导航,导航可以通过template写出来,但是这个项目需要在导航中处理一些逻辑,做成组件更方便些. 首先新建header文件夹,里面新建对应的js.json.wxml.wxss文件. <!-- 公共头部组件 --> <view class='headers'> <navigator open-type="redirectTo" class='logo' url="../index/index" hover-cl

  • 微信小程序中多个页面传参通信的学习与实践

    前言 微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码.在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户在详情页改变了状态,返回后无论是否刷新页面,体验都不是很好.在android中,我们一般采用setresult方法来返回参数,或者直接使用rxjava框架或者eventbus框架来解决此类问题. 业务分析 此类需求大概意思是:A页面进入B页面,B页面返回并传值给A. 探索之路 刚开始我想采用一个比较偷懒的

  • 微信小程序 页面传参实例详解

    微信小程序 页面传参 微信小程序的传参,页面跳转,页面之间传递参数在开发APP应用的时候会经常用到这样的功能,这里就用微信小程序来实现,大家可以看下如何实现,如有错误,请指正. 先上demo图: 为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,但是代码很简单.直接上代码. <span style="font-size:24px;"><!--index.wxml--> <view class

  • 微信小程序自定义组件与页面的相互传参

    目录 1. 自定义组件 官方文档 1.1 创建自定义组件 1.1.1 声明组件 1.1.2 编辑组件 1.2 使用自定义组件 1.3 页面向自定义组件传递数据(父传子) 1.4 组件将事件传给页面(子传父) 1. 自定义组件 小程序允许我们使用自定义组件的方式来构建页面. 官方文档 自定义组件 是不是用的微信的组件感觉很爽啊,如果不够用怎么办? 1.1 创建自定义组件 类似于页面,一个自定义组件由jsonwxmlwxssjs4个文件组成 1.1.1 声明组件 首先需要在json文件中进行自定义组

  • 微信小程序实现页面监听自定义组件的触发事件

    微信小程序实现页面监听自定义组件的触发事件,供大家参考,具体内容如下 需求:在微信小程序开发过程中,页面通常会用到提示弹框.这时为了减少代码量及代码可拓展性,我们自定义一个提示组件是必不可少的了.那么问题来了,页面如何监听到组件的触发事件呢? 下面给大家详细讲解页面如何监听自定义组件的触发事件. prompt组件: 1.首先搭建提示组件ui.由于后面各个页面都有可能用到该组件,所以我选择从页面传值过来显示提示语: 2.然后在prompt.js的点击事件里指定方法名称,该方法名称在后面的页面调用监

  • 微信小程序新手入门之自定义组件的使用

    前言 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护. 一.小程序的好处和特点 1.好处 开发者:小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换:也能节约开发和推广成本. 用户:能够节约使用时间成本和手机内存空间.对于开发者

  • 微信小程序开发入门基础教程

    微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

  • 微信小程序实现滑动切换自定义页码的方法分析

    本文实例讲述了微信小程序实现滑动切换自定义页码的方法.分享给大家供大家参考,具体如下: 效果如下: 这里三个图片使用了swiper组件进行轮播,下方的页码数字1.2.3会随着图片的切换变动位置 在微信小程序中我们是无法操作dom的,那么 var div = document.getElementById('id'); div.setAttribute("class", "className"); 这种方式实现. 然后我们可以考虑使用hidden或者wx:if的方式,

  • 微信小程序swiper轮播图组件使用方法详解

    本文实例为大家分享了微信小程序swiper轮播图组件的使用,供大家参考,具体内容如下 在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swiper.wxml--> <view class="container">     <swiper class="swiper-box" bind:change="swiperChange

  • 微信小程序获取用户头像昵称组件封装实例(最新版)

    目录 一.前言 二.组件使用 下载组件 组件导入 引用组件 使用组件 三.浅谈业务逻辑设置 注意事项 兼容性 四.结语 一.前言 微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大. 更多详情查看公告:公告直达链接 我的项目比较多,而且大部分都是只需要获取用户的头像以及昵称,并不需要像官方的“最佳实践案例”那样,还需要用户设置其他信息.因此自己进行了一个组件封装,以弹窗形式让用户授权或设置头像以及昵称. 博客中也会浅谈一下该如何对新旧接口进行业务逻

  • 微信小程序实现YDUI的ScrollNav组件

    本文实例为大家分享了微信小程序实现滚动导航效果的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 实现原理 采用双 scroll-view 组件实现双滚动! WXML <!--导航滚动 --> <scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation="t

  • 微信小程序 select 下拉框组件功能

    一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name

  • 微信小程序可滑动周日历组件使用详解

    微信小程序可滑动周日历组件,供大家参考,具体内容如下 看网上周日历组件比较少,自己弄了一个,和大家分享一下. 如果样式变形,请检查是否有共用样式起冲突 展示一下效果图 在components组件文件夹下新建calendarWeek文件夹 直接上代码吧: index.wxml <!--components/calendarWeek/index.wxml--> <!-- 日历 --> <view class="date-choose shrink border-bott

  • 微信小程序可滑动月日历组件使用详解

    微信小程序可滑动月日历组件 此日历可进行左右滑动,展示签到打卡信息,和大家分享一下. 如果样式变形,请检查是否有共用样式起冲突 展示一下效果图 在components组件文件夹下新建calendarMonth文件夹 直接上代码吧: index.wxml <!--components/calendar/index.wxml--> <view class='month'> <!-- <view class='arrow' bindtap='prevMonth'><

  • 在webstorm开发微信小程序之使用阿里自定义字体图标的方法

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. 3.在需要使用到图标的页面导入该wxss文件.例如: 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

随机推荐