小程序开发(5)-之封装组件

小程序的组件和页面的代码结构是不一样的，不是像vue、react那些一样，页面是通过Page生成，组件是通过Component，下面介绍下常用到的

#data

很明显和页面上定义的data没有差别

#properties

接收的属性，类似于vue中的props

#options

配置项，像addGlobalClass就是允许添加全局样式，就是全局样式能否在组件中生效，multipleSlots是否使用插槽slot

#ready

组件初始化的方法

#methods

定义方法的地方

使用组件的几个重要步骤

1、定义好.js、.json、.wxml、.wxss文件

2、像下面代码这样定义好组件的代码结构

3、在.json文件中设置，如下：{

"component": true

}

4、页面使用组件时，在usingComponents属性上添加上组件的名称和路径，如下：

{"usingComponents": {"near-event": "/components/nearevent/nearevent"}
}

const config = require('../../config/config.js');
const util = require('../../utils/util.js');
const icons = require('../../utils/icons.js');
const app = getApp();Component({data: {icons: icons},properties: {data: {type: Array,value: []},},options: {addGlobalClass: true,multipleSlots: true},ready: function() {},methods: {}
})

小程序开发(5)-之封装组件相关推荐

微信小程序开发入门教程-文本组件介绍
学习小程序开发要从哪开始呢?我们是开始顺序学习官方文档么?如果一开始就从头开始读官方文档,恐怕用不了多久你就放弃了.计算机是一门实践科学,我们学习的目的是为了解决现实问题.要么你想在互联网创业,开发一 ...
微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
小程序开发(9)-之地图组件map、导航
map用起来真的一言难尽呀,按照官方文档说是可以支持传入一个setting,来配置所以的属性的..,但是我试了没效果,经纬度更新了,调试代码看到的wxml经纬度也变化了,但是map上的经纬度却没变化, ...
微信小程序开发初学：图片组件 - image
image组件用于在小程序中插入图片并对插入的图片进行简单修改.支持 JPG.PNG.SVG.WEBP.GIF 等格式. image具有的属性 src 类型:String 默认值:无图片的网络地址或 ...
微信小程序开发中调用button组件添加微信客服功能
个人比较喜欢这个解决方案,原因一是由腾讯官方运营,比较稳定.二是确实很方便啊,直接用微信回复就好了.核心代码就一行,如下 <button open-type="contact" ...
微信小程序开发的的基本组件
一.视图容器组件 1.常见的视图容器组件 (1).view 普通视图区域类似于 HTML 中的 div ,是一个块级元素常用来实现页面的布局效果 (2).scroll-view 可滚动的视图区域 ...
微信小程序开发4——利用自定义组件实现页面内容切换功能
首先展示一下要显示的功能:` 首先需要在开发者工具中新建一个文件夹(components),分别在文件夹中新建.js .json .wxml .wxcss四个文件(可以右键文件夹,选择新建新建(com ...
小程序开发中使用公共组件icon丢失问题
在父组件中调用子组件icon图标不见开始以为是自己将icon.wxss,单独放在pages,导致调用icon时公共组件无法显示,然后将icon文件夹移到根文件夹下,但是还是显示不成功,于是去子组件页 ...
[9i]小程序开发中，input组件的常用事件
这里列出了input输入框组件的所有事件: # 事件说明备注 1 bindinput 键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode ...

小程序开发(5)-之封装组件

小程序开发(5)-之封装组件相关推荐

最新文章

热门文章