组件化设计——定义一个歌单组件

最新推荐文章于 2023-08-11 13:00:21 发布
VIP文章 最新推荐文章于 2023-08-11 13:00:21 发布
阅读量355 收藏 1
点赞数 1
分类专栏： 小程序 文章标签： 小程序 组件化 组件设计 云开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenyou_fu/article/details/104129433
版权

在小程序中提供了它组件化思路，将重构性多的模块进行组件化，可以节约我们的很多时间，也可以使用时更加方便快捷。

在目录上，右击选择新建component即新建了一个组件的部分。

1、引用

组件的引用是在.json中出现。
1、usingComponents的意思就是我们正在使用的组件。
名字是随意自己自定义的+路径即可。
在这里插入图片描述
2、在wxml中引用的话，就是直接引用定义的名字即可。
在这里插入图片描述

2、使用

在我们使用自定义组件的时候，在定义组件中.js，是可以自定义属性的，接受时需要制定指定对应类型，所以为type:object
在这里插入图片描述
并且通过自定义属性获取传过来的值，在这里插入图片描述
在组件中设计中通过属性引用
在这里插入图片描述

3

最低0.47元/天 解锁文章
Mr.F阿
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS组件化——路由设计思路分析
02-24
随着用户的需求越来越多，对App的用户体验也变的要求越来越高。为了更好的应对各种需求，开发人员从软件工程的角度，将App架构由原来简单的MVC变成MVVM，VIPER等复杂架构。更换适合业务的架构，是为了后期能更好的维护项目。但是用户依旧不满意，继续对开发人员提出了更多更高的要求，不仅需要高质量的用户体验，还要求快速迭代，最好一天出一个新功能，而且用户还要求不更新就能体验到新功能。为了满足用户需求，于是开发人员就用H5，ReactNative，Weex等技术对已有的项目进行改造。项目架构也变得更加的复杂，纵向的会进行分层，网络层，UI层，数据持久层。每一层横向的也会根据业务进行组件化。尽管这样
JSON简介
weixin_44844866的博客
01-19 795
JSON（Javascript Object Notation）的作用：用于在不同的编程语言中进行数据交互 由于JS中的对象在其他语言（如服务器语言Java、php等）中无法被读取，因此要使用JSON将其转化为可以被其他语言读取的形式，以达到在网页和服务器之间传递数据的作用。 JSON只有两种书写格式： 1.以对象的形式转化、传递数据：{ } // 以对象的形式传递数据时，属性名一定要加双引号 2.以数组的形式转化、传递数据：[ ] JSON只能转化、传递以下6种类型的数据： 1.字符串 2.数值
小程序--page.json
m0_47230916的博客
08-25 278
首先page.json指的是pages文件夹下各个子文件夹中json文件，可以分别设置每个文件中对应的头部的标题，背景颜色等。 属性usingComponents在页面中引入自定义组件。 书写方式和pages中window相同 但是要想看到效果需要调整一下pages中页面顺序 ...
微信小程序中的/代表什么意思
月落星河
03-29 1611
{ "usingComponents": { "my-component": "/Component/my-component" } } 这个/代表的意思是根目录
微信小程序五 组件
qq8344310的博客
08-17 151
插槽slot（原理同vue） 多插槽用name 禁止使用插槽，在组件的js中，使用 options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }
小程序通过页面json文件中的usingComponents引入组件的方式实现自定义tabbar，会闪烁，影响小.zip
07-27
自定义tabbar，通过页面json文件中的usingComponents引入组件的方式实现，tab页面第一次加载时会出现闪烁现象，但相对于全局json中设置custom为true方式有所改善。
小程序页面配置usingComponents
热门推荐
qq_40930175的博客
05-17 5万+
这个可以引入自定义组件，官方有教程。 现在遇到的问题是：我合并他人写的小程序页面的时候出现了一点问题 1、我在我的页面中放置另一个页面的链接， 2、我放置链接之后点击了锚点，可以实现跳转。此时我没有在app.json中添加注册页面的路径。 3、跳转后发现该页面的标题没有正常显示。如下图 4、我删除了"usingComponents": {} 此时出现了错误。提示这个注册页...
微信小程序 自定义组件并引入
白瑕 的博客
06-05 2527
在微信小程序里使用组件化
微信小程序- component 自定义组件及引用
最新发布
耶斯莫鱼拉的博客
08-11 2591
Component自定义组件创建及引用
最新版的vant-weapp如何在微信小程序的app.json中配置usingComponents使用
m0_61625235的博客
12-03 2442
vant-weapp在微信小程序的配置
iOS架构学习篇——组件化架构漫谈
02-25
前段时间公司项目打算重构，准确来说应该是按之前的产品逻辑重写一个项目??。在重构项目之前涉及到架构选型的问题，我和组里小伙伴一起研究了一下组件化架构，打算将项目重构为组件化架构。当然不是直接拿来照搬，...
移动端组件化架构方案设计
02-23
组件化作为移动端应用架构的主流方式之一，近年来一直是业界积极探索和实践的方向。我们自2018年起也在不断尝试各种组件化方案，在智慧政务的多个应用中也进行了实践。我们踩过一些坑，也收获了很多宝贵的经验，并...
#微信小程序# 使用Component来创建自定义组件
wsmazh的博客
01-19 490
微信小程序学习笔记 使用Component来创建自定义组件 微信小程序中通过Component(Object object)来创建自定义组件，官方文档如下Component | 微信开放文档 ​ 前言：为什么要使用自定义组件 当我们开发一个大型应用时，模块的复用可以大大提高代码编写的效率，降低代码的复杂度和后期维护的难度，在微信小程序中，往往不同页面中会用到相似的页面布局模块，为此可以使用Component(Object object)来创建自定义组件，下面让我们一起来看一下。 第一步：使用Compon
第二天（Using Components in Sencha Touch）
yax405的专栏
08-01 1485
原文地址：http://docs.sencha.com/touch/2.2.0/#!/guide/components Using Components in Sencha Touch 使用st中的组件 Contents What is a Component?What is a Container?Instantiating ComponentsConfigu
微信小程序开发报错及解决记录
weixin_53582738的博客
10-11 4607
微信小程序各种踩坑记录，报错记录。
小程序 自定义组件报错[“usingComponents“][“my-list“] 未找到
Start2019
07-01 6948
根据官网案例写了一个自定义组件，引入时总是报这个错误。 后面在社区里面找到了解决办法，把上面配置中改成："my-list": "/components/my-list/my-list"就可以了。 具体原因：官方文档上的自定义组件是 4 个文件全部都在 components 文件夹下，所以他们只需要 /components/my-list 就可以了。而我们实际开发需要多个组件，在 components 下会多新建一个文件夹，如果依旧 /components/my-list 这么写，此时找到的只是...
微信小程序自定义组件Component的简单使用
小牧在一直在学习,在前进的道路上大家一起学习，进步。
04-16 3393
首先为什么要使用component 这里列举2个例子, 1 如果项目中多个地方使用同一个弹框, 2 两个同事合作写一个界面, 这2中情况使用组件是比较好的选择 开始吧 第一步首先创建一个包用于存放组件 要把设置成组件需要在json中声明 "component": true, 如下直接复制也行 { "component": true, "usingComponents": {...
微信小程序 -- 自定义组件component并引入。
Emily
08-30 6085
目前做的小程序项目，根据不同的登录角色，页面显示也有所不同，在wxml页面用了一堆的wx:if来控制显示，最终代码看起来很繁杂。所以就打算组件化，把相同部分封装起来。 先简单写一下吧。 配置 1. 在app.json进行配置 在usingComponents里进行配置，自定义组件名：路径 "usingComponents": { "lawheader": "./pages/ta...
使用云函数，将数据插入云数据库的各种设置与功能的实现
GrantF的博客
02-05 4074
一、云函数 在小程序云开发中，编译器的cloudfunctions代表云函数部分。 1、创建云函数 右键——新建Node.js云函数 2、发送数据 云函数上传递数据是需要借助第三方库进行传递。本次使用request库的内容进行传递数据。 （1）、安装request（前置已安装node.js） 查询node和npm是否安装 node -v npm -v 打开github，搜索request/req...
给我写一个Java组件化的程序
06-09
好的，这里是一个简单的Java组件化程序示例： 首先，我们需要定义一个组件接口，这个接口将是所有组件的基础： ```java public interface Component { void start(); void stop(); void run(); } ``` 接着，我们需要实现一些组件，这里我们定义了两个组件：`LogComponent`和`DatabaseComponent`： ```java public class LogComponent implements Component { @Override public void start() { System.out.println("LogComponent started"); } @Override public void stop() { System.out.println("LogComponent stopped"); } @Override public void run() { System.out.println("LogComponent running"); } } public class DatabaseComponent implements Component { @Override public void start() { System.out.println("DatabaseComponent started"); } @Override public void stop() { System.out.println("DatabaseComponent stopped"); } @Override public void run() { System.out.println("DatabaseComponent running"); } } ``` 现在，我们需要一个组件容器，用于管理所有的组件： ```java public class ComponentContainer { private List<Component> components = new ArrayList<>(); public void addComponent(Component component) { components.add(component); } public void start() { for (Component component : components) { component.start(); } } public void stop() { for (Component component : components) { component.stop(); } } public void run() { for (Component component : components) { component.run(); } } } ``` 最后，我们可以将所有组件添加到组件容器中，并调用容器的`start()`、`stop()`和`run()`方法来管理组件的生命周期： ```java public class Main { public static void main(String[] args) { LogComponent logComponent = new LogComponent(); DatabaseComponent databaseComponent = new DatabaseComponent(); ComponentContainer container = new ComponentContainer(); container.addComponent(logComponent); container.addComponent(databaseComponent); container.start(); container.run(); container.stop(); } } ``` 这个程序演示了一个简单的Java组件化实现，可以用于管理多个模块或组件的生命周期和依赖关系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值