小程序组件（荣耀手机小程序组件）

本篇文章给大家谈谈小程序组件，以及荣耀手机小程序组件对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享小程序组件的知识，其中也会对荣耀手机小程序组件进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、小程序常用组件－视图容器
• 2、小程序创建和引用组件
• 3、微信小程序_组件
• 4、微信小程序之组件
• 5、小程序自定义组件

小程序常用组件－视图容器

本系列主要对小程序常用的组件做一个总结，方便自己及其它小程序开发者作为字典查阅和检索。

小程序组件有一些公共属性，在每个组件中代表的意义和数据类型都是一样的。

容器组件：内部能嵌套任何标签。常用的视图容器有： view , scroll-view , swiper

<view/ 是一个块级容器组件，任何一种复杂的布局都可以嵌套在 <view/ 组件内，并在 *.wxss 中设置相关样式。

<view/ 除了上述组件共有的属性外，还包含一组关于点击行为的属性。

在布局中，需要容器具有可滑动的功能，且能监听滚动、触顶、触底等事件，就需要 <scroll-view/ 组件， <scroll-view/ 在 <view/ 组件上添加滚动相关的属性，通过这些属性，可以响应滚动相关事件。

注意:
<textarea/ , <video/ , <map/ , <canvas/ 不能嵌套在 <scroll-view/ 中使用

利用 swiper 组件，可以实现轮播图，滑动页面，预览图片等，一个完整的滑块视图软件由 <swiper/ 和 <swiper-item/ 两个标签组成，不能单独使用。一个 <swiper/ 只能嵌套一个或多个 <swiper-item/ 标签，放置其它的标签会被删除，其中， <swiper-item/ 中能放置任何标签，高度默认为 100% ,另外没有任何其它特殊属性。

<swiper/ 的属性如下：

小程序创建和引用组件

创建组件的方法：

步骤一

在小程序项目中添加一个components文件夹，里面存放自定义的组件，然后在components目录下新建一个customComponent文件夹，文件夹可以命名为自定义组件名字相关，用来存放自定义的组件。

在这个文件夹右键，选择新建组件，输入组件名，一个自定义组件由 json, wxml, wxss, js4个文件组成，此时将自动生成这四个文件。

步骤二

接下来进行组件的相关配置：

首先需要在 json 文件中进行自定义组件声明（将component 字段设为 true 可这一组文件设为自定义组件

步骤三

引用组件：

在父级中：“useingComponents”：{

“命名”：“子级路径”，

}

微信小程序_组件

1.基础组件：

什么是组件：
<ul
<li组件是视图层的基本组成单元。</li
<li组件自带一些功能与微信风格的样式。</li
<li一个组件通常包括开始标签
和结束标签
，属性
用来修饰这个组件，内容
在两个标签之内。</li
</ul

2.属性类型
<ul
<liBoolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true
，只有组件上没有写该属性时，属性值才为false
。如果属性值为变量，变量的值会被转换为Boolean类型</li
<liNumber 数字 1
, 2.5</li
<liString 字符串 "string"</li
<liArray 数组 [ 1, "string" ] </li
<liObject 对象 { key: value } </li
<liEventHandler 事件处理函数名 "handlerName"
是 Page中定义的事件处理函数名</li
<liAny 任意属性 </li
</ul

3.共同属性类型

id , class , style , hidden , data-* , bind* / catch*

4.特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5.组件列表

基础组件分为以下八大类：

视图容器(View Container)：
view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：
icon 图标, text 文字, progress 进度条

表单(Form)：
button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签.
操作反馈（Interaction）
action-sheet 上拉菜单
modal 模态弹窗
toast 消息提示框
loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image 图片， video 视频
** 地图 **

map 地图

画布Canvas
canvas 画布

flex: vt.折曲，使收缩； vi.玩去，收缩

微信小程序之组件

一.创建并使用组件的步骤

1.创建一个文件夹存放组件，并在里面创建一个组件文件夹，components，tabs
2.在tabs文件里添加组件模板
3.引用组件，在父组件的json文件中的usingComponents中添加子组件路径，compont

4.使用组件，相当于正常标签进行使用

二.父组件向子组件传参的步骤

父组件给子组件的tabs传入对象

1.父组件的数据

2.子组件做的操作

如果没有传入数据，就会输出默认值value

3.子组件展示对象数据：

三.子组件向父组件传参的步骤

1.先给子组件添加一个点击事件

2.通过this.triggerEvent("自定义事件名称",{传的值})命令保证子组件和父组件同步被修改

3.父组件绑定子组件，定义一个事件名称，用来接收子组件传递的数据

小程序自定义组件

新手在第一次自定义组件小程序组件的时候小程序组件，首先写出来需要定义的组件的内容和布局小程序组件，防止不熟练而出错。

一、新建一个文件夹，自己命名。以后所有的自定义组件都存放于此。

二、在此文件夹下新建一个自行命名的文件夹，命名最好语义化，与里面自定义组件的名字相呼应。

三、在新建的文件夹内新建一个Component文件 命名也是自定义。

四、在xxx里面把事先写好的ml和ss以及js文件复制进去。

1、把提前写好的页面布局复制到这个此文件里面。写法和在普通页面的写法一样  {{}}是插值表达式。这里可以直接使用js里面定义的数据。

eg:
1、组件自定义的属性列表写在 properties里面。需要写成对象的形式 

eg:
2、组件的方法列表写在 methods里面

eg:
五、在需要引用自定义组件页面文件的xxx.json里面引用。

注意小程序组件：引用的时候，不可以以./开头。前面命名可以自命名，不必和后面名字一样。
六、在需要引用的页面里的的xxx.wxml里写已经命名好的组件。

组件的名字为自定义命名。

eg:
因为组件是自己写的，并非微信提供的官方组件，所以如果想要获取触发事件的话 ，需要写一个同步组件回传数据

触发自定义事件用triggerEvent。在需要调用的方法内写this.triggerEvent(“自定义属性名”，‘需要更新的数据’)

eg:

然后将此事件绑定到页面中。绑定事件需要用bind:自定义的方法名=“js中定义的方法”
利用data-active="变量名"属性添加需要变化的变量
eg:

xxx.wxml内写法：
注意：想要在页面中使用自定义的组件属性时，必须要现在定义组件的文件夹内的js文件中，先去定义属性，然后才可以引入使用。 关于小程序组件和荣耀手机小程序组件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 小程序组件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于荣耀手机小程序组件、小程序组件的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。