手把手带你学习微信小程序 —— 十二 (自定义组件)

一、自定义组件的介绍

========================================================================

自定义组件,类似于前面说到过的模板 template,但是比模板更加灵活,自定义组件可以定义自己的属性,使用起来也更加方便,但是用起来还是会有些限制,比如在自定义组件中我们只能在自定义组件中修改样式(wxss),不能在渲染界面进行更改样式等等。但是自定义组件有一个很大的好处,我们可以自己添加其他的组件,添加方法等等。总的来说,这也是一个很好用的组件。

二、创建并使用自定义组件

==========================================================================

2.1 创建组件

  1. 单独创建一个名为 component 的文件夹,然后创建一个子文件,并命名为 mybox,然后再 mybox 文件装创建名为Component 的文件,并命名为 mybox

在这里插入图片描述

tips:这样做,和新建一个 page 是没有区别的,但是不同的点是在 json 文件和js文件,不同点是多了如下一部分的代码

js文件

Component({

/**

  • 组件的属性列表

*/

properties: {

},

/**

  • 组件的初始数据

*/

data: {

},

/**

  • 组件的方法列表

*/

methods: {

}

})

json文件

{

“component”: true,

“usingComponents”: {}

}

这里的json 文件必须设置为 true

2.2 使用组件

在 mybox.wxml 文件与 mybox.wxss 设置两个盒子

2.2.1 自定义组件初始化
  1. wxml文件
  1. wxss样式

.outter{

width: 200px;

height: 200px;

background: yellow;

}

.inner{

width: 100px;

height: 100px;

background: red

}

  1. 确保 json 文件找那个的 component 为 true
2.2.2 渲染自定义组件
  1. 回到index.json 文件

把 component 的信息添加进去

{

“usingComponents”: {

// “创建的组件的名称”:“路径”

“mybox”:“/component/mybox/mybox”

}

}

tips:

  • 路径不能错

  • 名称必须与创建的子组件的名称一致

  1. 在index.wxml 文件中可以直接通过标签 <mybox></mybox> 实现我们自定义的模板

在这里插入图片描述

三、给我们创建的标签创建属性

============================================================================

3.1 创建属性

1.语法示范—— 回到自定义组件中,在mybox.js文件下的 properties中,创建对象,语法如下:

properties:{

属性名称: {

type: 数据类型,String Number Boolean Object Array

value: 一个初始化的默认值

}

}

  1. 我们给mybox.js 文件,分别给外边框和内边框设置两个属性

Component({

/**

  • 组件的属性列表

*/

properties: {

innerText:{

type:String,

value:“112233”

},

outterSize:{

type:Number,

value:200

}

},

/**

  • 组件的初始数据

*/

data: {

},

/**

  • 组件的方法列表

*/

methods: {

}

})

3.2 使用属性

  1. 然后就可以在 mybox.wxml 文件中通过 style 设置属性

{{innerText}}

  1. 由于前面设置过 json 路径,所以我们就可以直接通过属性名,正常的修改样式

效果图:

在这里插入图片描述

四、给属性添加组件

=======================================================================

通过 slot 标签才可以添加组件

  • 新建一个名为 mypage 的组件,在mypage.js 中添加 options 代码

Component({

options:{

multipleSlots:true

},

/**

  • 组件的属性列表

*/

properties: {

},

最后

小编在这里分享些我自己平时的学习资料,由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!

开源分享:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】

程序员代码面试指南 IT名企算法与数据结构题目最优解

这是” 本程序员面试宝典!书中对IT名企代码面试各类题目的最优解进行了总结,并提供了相关代码实现。针对当前程序员面试缺乏权威题目汇总这一-痛点, 本书选取将近200道真实出现过的经典代码面试题,帮助广“大程序员的面试准备做到万无一失。 “刷”完本书后,你就是“题王”!

image.png

《TCP-IP协议组(第4版)》

本书是介绍TCP/IP协议族的经典图书的最新版本。本书自第1版出版以来,就广受读者欢迎。

本书最新版进行」护元,以体境计算机网络技不的最新发展,全书古有七大部分共30草和7个附录:第一部分介绍一些基本概念和基础底层技术:第二部分介绍网络层协议:第三部分介绍运输层协议;第四部分介绍应用层协议:第五部分介绍下一代协议,即IPv6协议:第六部分介绍网络安全问题:第七部分给出了7个附录。

image.png

Java开发手册(嵩山版)

这个不用多说了,阿里的开发手册,每次更新我都会看,这是8月初最新更新的**(嵩山版)**

image.png

MySQL 8从入门到精通

本书主要内容包括MySQL的安装与配置、数据库的创建、数据表的创建、数据类型和运算符、MySQL 函数、查询数据、数据表的操作(插入、更新与删除数据)、索引、存储过程和函数、视图、触发器、用户管理、数据备份与还原、MySQL 日志、性能优化、MySQL Repl ication、MySQL Workbench、 MySQL Utilities、 MySQL Proxy、PHP操作MySQL数据库和PDO数据库抽象类库等。最后通过3个综合案例的数据库设计,进步讲述 MySQL在实际工作中的应用。

image.png

Spring5高级编程(第5版)

本书涵盖Spring 5的所有内容,如果想要充分利用这一领先的企业级 Java应用程序开发框架的强大功能,本书是最全面的Spring参考和实用指南。

本书第5版涵盖核心的Spring及其与其他领先的Java技术(比如Hibemate JPA 2.Tls、Thymeleaf和WebSocket)的集成。本书的重点是介绍如何使用Java配置类、lambda 表达式、Spring Boot以及反应式编程。同时,将与企业级应用程序开发人员分享一些见解和实际经验,包括远程处理、事务、Web 和表示层,等等。

image.png

JAVA核心知识点+1000道 互联网Java工程师面试题

image.png

image.png

企业IT架构转型之道 阿里巴巴中台战略思想与架构实战

本书讲述了阿里巴巴的技术发展史,同时也是-部互联网技 术架构的实践与发展史。

image.png

本书第5版涵盖核心的Spring及其与其他领先的Java技术(比如Hibemate JPA 2.Tls、Thymeleaf和WebSocket)的集成。本书的重点是介绍如何使用Java配置类、lambda 表达式、Spring Boot以及反应式编程。同时,将与企业级应用程序开发人员分享一些见解和实际经验,包括远程处理、事务、Web 和表示层,等等。

[外链图片转存中…(img-VggPQQuG-1714710763141)]

JAVA核心知识点+1000道 互联网Java工程师面试题

[外链图片转存中…(img-rSTS9IgS-1714710763141)]

[外链图片转存中…(img-ChhJ0NEA-1714710763142)]

企业IT架构转型之道 阿里巴巴中台战略思想与架构实战

本书讲述了阿里巴巴的技术发展史,同时也是-部互联网技 术架构的实践与发展史。

[外链图片转存中…(img-6UQgxsNO-1714710763142)]

本文已被CODING开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

  • 11
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,让我们开始吧!创建微信小程序需要以下步骤: 1. 注册微信小程序账号 在微信公众平台注册一个小程序账号。如果您没有微信公众号账号,需要先注册一个公众号账号。在注册小程序账号时,需要提供您的身份证信息进行实名认证。 2. 创建新的小程序 进入小程序后台,点击“开发”-“开发设置”-“新增小程序”-“小程序名称”填写您的小程序名字,点击“提交”即可。 3. 配置小程序信息 在小程序后台,点击“开发”-“开发设置”-“基本设置”可以设置小程序的基本信息,如小程序的头像、简介、关联公众号等。 4. 开发小程序小程序后台,点击“开发”-“开发设置”-“开发者工具”下载并安装开发者工具。打开开发者工具后,可以创建小程序项目,编写代码并进行调试。 5. 发布小程序小程序后台,点击“提交审核”进行小程序审核,并在审核通过后进行发布。 下面是一个简单的微信小程序开发示例: 1. 创建项目 打开微信开发者工具,点击“新建小程序项目”按钮,填写项目信息,包括小程序名称、AppID、项目目录、代码类型等。 2. 编写代码 使用开发者工具中提供的代码编辑器,在项目目录中编写小程序代码。这里我们以一个简单的“Hello World”小程序为例,代码如下: ``` //index.js Page({ data: { text: "Hello World" } }) ``` ``` <!-- index.wxml --> <view>{{text}}</view> ``` 3. 预览小程序 在开发者工具中,点击“预览”按钮,可以预览小程序的效果。可以通过手机扫描预览二维码,在手机端进行预览。 4. 发布小程序小程序开发完成后,可以在小程序后台进行提交审核。审核通过后,可以在小程序后台进行发布。 希望这个简单的示例能够帮助您了解微信小程序的开发流程。如果您需要更详细的指导,可以参考微信小程序开发文档或者找专业的小程序开发公司寻求帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值