小程序里简单封装、引入组件

最新推荐文章于 2022-12-07 17:31:23 发布
最新推荐文章于 2022-12-07 17:31:23 发布
阅读量272 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43584133/article/details/116767401
版权
本文档详细介绍了微信小程序中如何进行组件的封装和引入。关键步骤包括：在JS文件中使用Component构造器定义组件；在JSON文件中设置'component': true标记；WXML和WXSS分别负责组件结构和样式。引入组件时，需在目标页面的JSON文件中配置usingComponents，并在WXML中直接使用组件标签。此外，还分享了添加组件功能的方法。
摘要由CSDN通过智能技术生成

小程序简单封装、引入组件

初学小程序，写项目练手时在封装组件上难住了，上网查了很多资料，很详细，但都不是自己想要的,好在问了问同学，已经解决了。
现在把小程序封装引入组件的要点写下来，防止以后用时又忘了。

创建组件

在这里插入图片描述

js文件里，必须有Component构造器，即Component({}); 组件的属性、数据、方法等都要在Component 构造器里设置，因此他是很重要的，即使不准备设置数据属性、数据，也必须有Component({});

json文件里加上"component": true，表示这组文件是一个组件，一般默认是true，写不写都一样，但预防意外，还是写上比较好

wxml和wxss没什么好说的，跟页面里的HTML和CSS一样，一个写结构的，一个写样式的。

引入组件

想要引入组件，要将引入组件的文件里的 json文件进行设置
在这里插入图片描述
usingComponents 意思是使用组件
冒号前面是组件名，后面是组件的路径，可以多写几个组件，用逗号（英语）隔开就行

之后直接在wxml文件里把 组件名 当做标签用就好了

至于添加组件功能，在Component构造器设置就好了

贪睡的龙胖子
关注
微信小程序 引入 全局 + 局部组件 及组件传参 + 修改值
Shimeng_1989的博客
04-12 3334
注意：全局/局部组件 -- 引入的文件路径不要加后缀！！！（因为打包的时候，文件夹的.js，.json，.wxml ， .wxss 文件 会打包成一个文件） 局部组件 的定义 // 注意事项： 全局/局部组件 -- 引入的文件 不要加后缀。！！！（因为打包的时候，文件夹的.js，.json，.wxml ， .wxss 文件 会打包成一个文件） // 组件的 .json 文件 { "component": true, } //引用组件的页面的 .json 文件 { "usingComp.
uniapp 微信小程序 时间段选择组件
07-24
总之，`uniapp`微信小程序的时间段选择组件涉及到了`uni-app`的基础知识，如组件化开发、数据绑定、事件处理等，同时也涵盖了微信小程序的特定API和自定义样式设计。通过学习和实践，开发者可以构建出符合业务需求、...
微信小程序组件封装引用
qq_42802778的博客
02-05 509
废话不多说了，上代码 json文件代码 { "navigationBarTitleText": "", "usingComponents": { "calendar": "/pages/components/calendar/calendar" //组件文件路径 } } //wxml文件 <calendar /> //wxml文件引用组件 以上就是全部代码...
百度小程序自定义组件component
dfe3318的博客
07-04 915
1.新建component组件 list 2.index页面引入list组件 在json页加入 正确示例 "navigationBarTitleText": "智能小程序示例", "usingComponents": { "searchs": "/components/searchInput/searchInput", "search-list": "/componen...
百度小程序组件引用问题
weixin_30509393的博客
06-27 471
{ 　　"navigationBarTitleText": "111", 　　"usingComponents":{ 　　　　"w-dad":"/components/home/home" 　　} } 组件命名不支持大写字母 转载于:https://www.cnblogs.com/tlfe/p/11096801.html...
微信小程序实现封装处理
m0_61482677的博客
12-29 1894
1、在小程序根目录utils下新建 request.js 文件，里面放置如下内容 const URL = 'http://www.member.com' module.exports = { //封装request方法，第一个参数请求地址，第二个参数传递参数，第三个参数请求方式 request:function(url,data={},method){ //返回promise对象 resolve 成功的回调方法 reject失败的回调方法 一旦发生就不会改变
小程序request请求接口封装（常用）以及使用方法
qq_38847914的博客
08-19 2751
小程序request请求接口封装（常用）以及使用方法 第一步：在小程序目录中新建一个utils文件，里面在新建一个js文件用来编写封装的请求方法 第二步：封装接口 //封装接口post from表单类型 function way1(url, data, cb) { wx.showLoading({}) //加载动画 wx.request({ url: '公用域名' + url, //域名 （据情况而定） url为地址 data: data, //所需要传的
详解钉钉小程序组件之自定义模态框（弹窗封装实现）
10-15
在钉钉小程序的官方文档中可能并未直接提供现成的模态框组件，因此我们需要自行封装一个。封装模态框涉及到的主要组件包括样式定义、事件处理以及组件的使用方法。 在提供的代码片段中，可以看到以下几个关键部分：...
支付宝小程序封装好的轮播图列表跳转 模板 组件
08-19
综上所述，这个“支付宝小程序封装好的轮播图列表跳转模板组件”是一个高度集成的解决方案，它涵盖了轮播图展示、列表滚动、页面跳转以及模板复用的关键功能。开发者可以轻松地将其引入到自己的小程序项目中，减少...
微信小程序省市县自行封装组件，带编码code
09-24
3. **使用组件**：在小程序页面的`wxml`和`wxss`中引入并使用这个组件，设置相应的数据和事件绑定。在`js`文件中，处理用户的选择，可能需要更新数据源或者执行其他业务逻辑。 4. **动态数据更新**：组件还应该支持...
微信小程序wxs封装使用以及公共js组件封装
分享互联网的有趣知识~
12-07 2372
wxs可以直接卸载wxml页面中，并且在对应的位置调用，比如在{{ xxx.xxx() }}调用wxs的函数 注意 var getMax 这个位置只能使用var
小程序封装组件步骤
m0_58959716的博客
04-13 2668
1.根目录下创建component文件夹，放要封装的子组件 2.compnent文件夹下，创建组件文件夹，文件夹下右键新建component 坑：因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。 3.父组件的.json文件中的usingComponents属性引入子组件 4.父组件操作 js文件中声明要传给子组件的变量 wxml文件中添加引入的子组件名字的标签名，标签上传递变量 5.子组件操作 坑：addGl.
小程序接口请求封装方法
weixin_43285861的博客
08-29 2055
小程序接口请求封装方法
微信小程序简单封装接口
David_house的博客
12-30 1752
微信小程序接口封装 比如说，现在我要访问后台数据，我面临两个问题： 我可能在多个模块中向后台发送数据请求，每次都需要再写一遍url 地址 当获取数据的地址发生变化时，我需要修改项目中所有的url地址 显然，上面两项工作费时费力，这个时候怎么办呢？ 如果我们能将上面的接口封装起来，在项目中直接调用会不会方便很多？ 答案是肯定的，因为所有的接口我们只需要在封装模块里面写一遍即可，如果要修改的话，也只需要修改封装模块里面的内容。 下面就给举个栗子： 我现在要封装我的后台请求数据的地址，在项目中先创建一个req
微信小程序:自定义组件（Component）
Jane's Blog
04-03 4803
微信小程序文档中提供的组件有限，一定程度上限制了开发需求，这里就需要我们自定义一些控件，实现开发需求。自定义控件有两种方式，一种是选择模板的方式，另一种是选择组件的方式来创建。这里我选择了组件方式来创建，这样只需引入组件和外部添加数据，内部展示数据，即可实现重用。 1、文件目录结构 这里一定要注意我们目录结构，个人喜好把项目中的业务文件放在pages中，图片放在与pages同级的images文件...
微信小程序如何封装自己的组件？
CreatorRay的博客
06-30 4503
在现在前端领域，最常见的话语就是组件化、工程化的内容。所有的框架都在朝着这方面发展。作为前端生态中的新兴热人物小程序的出现，同样支持组件化开发。 在我们的日常开发中，可以封装一些常用的组件达到复用效果，可以大大提高我们的工作效率。今天我们学习一下如何在微信小程序中封装自己的组件。 首先我们在app.json中新建一个页面，组件自己的结构和普通页面的机构是一样的，同样由.js、.json、.wxml、wxss组成，所以我们像注册一个普通页面一样注册它。 我们来试着封装一个一键返回顶部的按钮。 首先进去页面.
微信小程序 -- 自定义组件component并引入。
Emily
08-30 6310
目前做的小程序项目，根据不同的登录角色，页面显示也有所不同，在wxml页面用了一堆的wx:if来控制显示，最终代码看起来很繁杂。所以就打算组件化，把相同部分封装起来。 先简单写一下吧。 配置 1. 在app.json进行配置 在usingComponents里进行配置，自定义组件名：路径 "usingComponents": { "lawheader": "./pages/ta...
小程序如何封装自定义组件（Toast）
weixin_33842304的博客
04-26 383
1、创建和pages 同级的component目录新建一个myToast目录 例如: 2、myToast.wxml文件内容: <!-- 自定义toast组件 --> <!-- name 模块名称 --> <template name="toast" > <!-- catchtouchmove=‘xxx’ 遮罩层的滚动穿透 --> <...
微信小程序安装Vant Weapp
anne0000的博客
07-07 660
1-通过npm 安装 npm i @vant/weapp -S --production 2-修改app.json 将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。 3-修改 project.config.json 开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。 需要手动在 project.config.json
微信小程序开发封装组件
最新发布
09-05
微信小程序开发中，封装组件是一种常见的技术手段，可以提高代码的复用性和开发效率。下面是一个简单的步骤介绍： 1. 创建组件文件：在小程序项目的目录结构中，创建一个新的文件夹用于存放组件相关文件。通常，组件的文件由两部分组成：一个是.wxml文件用于定义组件的结构，另一个是.js文件用于处理组件的逻辑。 2. 编写组件的模板代码：在.wxml文件中，编写组件的结构和布局，可以使用小程序提供的基础组件或自定义样式。 3. 编写组件的样式：在.wxss文件中，为组件编写相应的样式，可以使用样式类或直接写内联样式。 4. 编写组件的逻辑代码：在.js文件中，编写组件的逻辑处理，可以包括数据处理、事件处理等。 5. 导出组件：在.js文件中，使用Component()函数将组件导出，以便在其他页面中引用和使用。 6. 在页面中使用组件：在需要使用组件的页面中，引入组件，并在.wxml文件中使用<component-name>标签调用组件。 以上是一个基本的封装组件的步骤，你可以根据具体需求进一步扩展和优化组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值