微信小程序的自定义组件的实现方法
更新时间：2024年05月16日 10:18:58 投稿：mrr
这篇文章主要介绍了微信小程序的自定义组件的实现方法,把页面重复的代码部分封装成为一个自定义组件,以便在不同的页面中重复使用,有助于代码的维护,感兴趣的朋友跟随小编一起看看吧
一、创建自定义组件
（1）定义：
把页面重复的代码部分封装成为一个自定义组件，以便在不同的页面中重复使用，有助于代码的维护。
（2）组成：
自定义组件的组成：json文件，js文件，wxml文件，wxss文件
（也就是配置，逻辑，结构，样式）
（3）使用：
在components文件夹下新建一个文件夹，命名为test。test文件夹下新建component。然后自定义命名为test敲回车
（4）此时，test.js里面会出现如下属性。
data属性，可读可写，更倾向于储存组件的私有数据
properties属性，可读可写，更倾向于存储外界传递的公有数据
（5）在test.wxml里面写好自定义组件封装的内容：
<view>我是自定义组件test</view>
二、使用自定义组件
（1）使用前提：
在页面的json文件或app.json里修改全局配置
自定义组件的引用方式：
局部引用：在页面的json文件中引用自定义组件
全局引用：在app.json全局配置文件中引用自定义组件
（2）使用：
在app.json里面：
然后直接在pages下的index.wxml引用自定义组件test
（3）效果如图所示：
到此这篇关于微信小程序的自定义组件的文章就介绍到这了,更多相关微信小程序自定义组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
使用JavaScript中的ActiveXObject填充并设置Excel格式2009-04-04
这篇文章主要介绍了JS多物体实现缓冲运动效果的方法,涉及javascript基于时间函数进行动态运算实现页面元素动态操作的相关技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了javascript中数组的定义及使用方法,实例分析了数组的定义及使用技巧,非常具有实用价值,需要的朋友可以参考下2015-01-01
JS实现单例模式的多种方案 ，本文稍加总结，列出了6种方式与大家分享，大体上将内容分为了ES5（Function）与ES6（Class）实现两种部分，对js单例模式相关知识感兴趣的朋友跟随小编一起看看吧2022-09-09
下面小编就为大家带来一篇利用JS提交表单的几种方法和验证(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
JS代码混淆初步...2006-09-09
本系列博文主要谈一些在 javascript 使用中经常会混淆的高级应用，包括: prototype, closure, scope, this关键字. 对于一个需要提高自己javascript水平的程序员,这些都是必须要掌握的，本节主要介绍prototype.2015-12-12
JavaScript 在开发过程中可能会出现很多奇怪的问题。这篇文章主要为大家整理了一些JavaScript中奇怪的问题及解决方法，感兴趣的可以了解一下2023-03-03
最近在学微信小程序开发的时候,碰上了一个问题,所以想着总结下,这篇文章主要给大家介绍了关于微信小程序如何实现商品列表跳转商品详情页功能的相关资料,需要的朋友可以参考下2022-04-04
javascript 循环语句 while、do-while、for-in、for用法区别
本文章介绍了在学习javascript中的循环语句的用法，包while、do-while、for-in、for它们之间的区别，也是常用的循环语句了，有需要的朋友可以了解一下2012-03-03
最新评论