微信小程序-自定义组件

简介: 微信小程序-自定义组件

自定义组件


文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

开发者可以将页面内的功能模块抽象成自定义组件(思想与vue和react一样),以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。

步骤:

  • 创建组件(页面)A,其实现的操作是可以被复用的,例如前面的scrollView页面
  • 声明上一步创建好的页面为一个组件(在其json文件中声明)
  • 此时就可以将组件A在其他组件中导入进行使用

例如前面的scrollView页面,将其当作一个组·件,在自定义页面组件customComponent中去使用:

  • 创建组件(页面)A,其实现的操作是可以被复用的,例如前面的scrollView页面
  • 该步骤前面已经实现,跳过

声明上一步创建好的页面为一个组件(在其json文件中声明)

  • 只需要在json文件中增加component,将其值设置为true即可
{
  "usingComponents": {},
  "component": true
}


此时就可以将组件A在其他组件中导入进行使用

  • 在需要使用组件A的组件中的json文件里导入scrollView组件,需要在json中的usingComponents配置项里声明需要使用的自定义组件的内容(导入,充当之前的框架中的import写法)
{
  "usingComponents": {
    "scroll": "/pages/scrollView/scrollView"
  }
}


随后就可以在当前页面中使用scroll组件

<!--pages/customComponent/customComponent.wxml-->
<text>pages/customComponent/customComponent.wxml</text>
<!-- 使用scroll组件,来复用scrollView页面 -->
<!-- 使用组件的时候方法与vue及react一致,当作标签使用即可 -->
<scroll></scroll>


提示:小程序也可以在使用自定义组件的时候给其复用的组件进行传值,传递方式通过属性传值,与template那里的形式一样,但是与template不一样的是,其属性的名不固定是data。接收的方式一样,不使用props。直接用即可。

目录
相关文章
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
62 0
在线课堂+工具组件小程序uniapp移动端源码
|
3月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
101 1
微信小程序:轻松实现时间轴组件
|
3月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
785 1
|
3月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
108 0
微信小程序:自定义关注公众号组件样式
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
879 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
874 1
|
3月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
220 7
ly~
|
4月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
101 6

热门文章

最新文章