微信小程序自定义组件Component的简单使用

首先为什么要使用component 这里列举2个例子,

1 如果项目中多个地方使用同一个弹框, 2 两个同事合作写一个界面,

这2中情况使用组件是比较好的选择

开始吧

第一步首先创建一个包用于存放组件

要把设置成组件需要在json中声明

"component": true,

如下直接复制也行

{

"component": true,

"usingComponents": {}

}

组件里的wxml中就是自己要填写的内容了,要注意的就是js里面不在是Page而是

Component({}) 开头, 里面可以填写data 用于初始化数据, 方法写在methods中,

这个记住就行了,给出demo里面的

Component({

properties: {

// 这里定义了innerText属性，属性值可以在组件使用时指定

innerText: {

type: String,

value: 'default value',

}

data: {

// 这里是一些组件内部数据

someData: {}

methods: {

// 这里是一个自定义方法

customMethod: function () {

}

})

写好之后就是组合了在json中填写

"component": "../component/component"

开头是是自己的包名,后面跟着的是自己填写的包名以及wxml名字

然后就是在wxml中引入即可

如果想在布局上就把引用放到上面,如果想放到下面就吧引用放到下面

效果图

demo地址需要的可以参考下

demo地址,如果帮助了希望给一个免费的star

微信小程序自定义组件Component的简单使用相关推荐

微信小程序 -- 自定义组件component并引入。
目前做的小程序项目,根据不同的登录角色,页面显示也有所不同,在wxml页面用了一堆的wx:if来控制显示,最终代码看起来很繁杂.所以就打算组件化,把相同部分封装起来. 先简单写一下吧. 配置 1. 在 ...
【小程序】微信小程序自定义组件Component详细总结
1- 前言在本文中你将收获小程序如何使用自定义组件自定义组件之间的传值自定义组件中插槽的使用 2- 组件文件新建 2.1 定义组件在根目录新建components文件夹,建立cell 文件夹 ...
微信小程序自定义组件Component is not found in path components weimo tabbar index using by pages index inde
报错原因:components 本质上还是pages,所以需要在aap.json添加上即可附上解决过程·: 大家看到这个报错是不是先想到的是componets下面的tabbar或者pages下面的i ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
微信小程序自定义组件-树形数据表格（进阶版）
前言一.下载引用二.使用treegrid组件三.使用文档属性事件四.组件源码利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...
小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下微信小程序自定义组件微信小程序支持自定义组件下方的目录其中,components为组件目录,nodemodule ...
一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...

微信小程序自定义组件Component的简单使用

微信小程序自定义组件Component的简单使用相关推荐

最新文章

热门文章