微信小程序开发入门与实战(组件的使用)

简介: 微信小程序开发入门与实战(组件的使用)

组件的创建与引用


1、 创建组件


创建步骤:

1、在项目的根目录中,鼠标右键,创建 components 👉 test 文件夹

2、在新建的 components 👉 test 文件夹上,鼠标右键,点击“新建 Component”

3、键入组件的名称之后回车,会自动生成组件对应的 4 个文件,后缀名分别为 .js,.json, .wxml 和 .wxss


🐖注意:为了保证目录结构的清晰,可以把不同的组件,存放到单独目录中


如 👇

image.png

2、 组件


组件的引用类型:局部引用”和“全局引用

  1. 局部引用:组件只能在当前被引用的页面内使用
  2. 全局引用:组件可以在每个小程序页面中使用

3、局部引用组件


在页面的.json引用的叫局部配置

使用如 👇

image.png

image.png

4、全局引用组件


在全局配置的 app.json 引用的叫全局配置

使用如 👇

image.png

5、全局引用 VS 局部引用


根据组件的使用频率和范围选择引用方式:

  1. 如果某组件在多个页面中经常被用到,建议进行“全局引用”
  2. 如果某组件只在特定的页面中被用到,建议进行“局部引用”

6、组件和页面的区别


从表面来看,组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是,组件和页面的 .js 与.json 文件有明显的不同如 👇:


组件的 .json 文件中需要声明 “component”: true 属性

组件的 .js 文件中调用的是 Component() 函数

组件的事件处理函数需要定义到 methods 节点中(vue类似)

自定义组件 - 样式


1、组件样式隔离


自定义组件的样式只对当前组件生效,不会影响到组件之外的UI 结构

如 👇

  1. 组件 A 的样式不会影响组件 C 的样式
  2. 组件 A 的样式不会影响小程序页面的样式
  3. 小程序页面的样式不会影响组件 A 和 C 的样式

好处如 👇:

  1. 防止外界的样式影响组件内部的样式
  2. 防止组件的样式破坏外界的样式

2、组件样式隔离的注意点


  1. app.wxss 中的全局样式对组件无效
  2. 只有 class 选择器会有样式隔离效果,id 选择器、属性选择器、标签选择器不受样式隔离的影响

🐖注意:在组件和引用组件的页面中建议使用 class 选择器,不要使用 id、属性、标签选择器!

3、修改组件的样式隔离选项


默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时,我们希望在外界能够控制组件内部的样式,此时,可以通过 styleIsolation 修改组件的样式隔离选项

4、styleIsolation 的可选值


;image.png

如 👇

Component({
options:{
styleIsolation:'isolateds'    },
})

最后


image.png

下篇文章再见ヾ( ̄▽ ̄)ByeBye

image.png

相关文章
|
2天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
170 13
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
19天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
25天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
64 0
|
23天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
24 0
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
953 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
916 1
|
4月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
264 7
ly~
|
5月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
110 6
|
4月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
325 1
|
4月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
134 5

热门文章

最新文章