一、微信小程序组件

组件就是小程序页面的组成结构，与html在web网页开发中的作用一样，铺设页面.可以参考其他UI库，像elementUI，vantUI组件
组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。<tagname property="value">Content goes here ...</tagname>组件具有公共属性和特殊属性，我们学习小程序组件其实就是小程序组件特殊属性

组件公共属性:

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

组件的特殊属性详见组件的官方文档

1.1基础组件

icon

图标
<icon type="search" size="50" color="red"></icon>

text

文本
<text user-select>hello world</text> -->
<text space="nbsp">hello   world</text>
<text decode>hello&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;world</text>

rich-text

富文本
<h1>我是标题</h1>
<text>{{str}}</text>
<rich-text>{{str}}</rich-text>
<rich-text nodes="{{str}}"></rich-text>

1.2视图组件

view

视图容器类似于div
<view class="but"hover-class="opacity"hover-start-time="1000"hover-stay-time="2000"
>提交</view>

.but{width: 300rpx;line-height: 120rpx;background-color: green;border-radius: 30rpx;text-align: center;color: white;
}

.opacity{opacity: 0.3;
}

swiper

轮播图
<view class="banner"><!-- 轮播图区域 --><swiperindicator-dots="{{false}}"autoplayinterval="2000"circularindicator-active-color="red"vertical="{{false}}"bindchange="changeswiper"><swiper-item wx:for="{{imgs}}" wx:key="*this"><image src="{{item}}"></image></swiper-item></swiper><!-- m面板指点 --><view class="dots"><view wx:for="{{imgs}}" wx:key="*this"class="{{activeIndex == index ? 'active' : ''}}"></view></view></view>swiper{width: 100%;height: 350rpx;
}swiper image{width: 100%;height: 350rpx;
}.banner{position: relative;
}.dots{position: absolute;width: 150rpx;height: 50rpx;/* border: 2rpx solid black; */margin: auto;left: 0;right:0;top: 240rpx;bottom: 0;display: flex;justify-content: space-around;
}.dots view{width: 10rpx;height: 50rpx;background-color: black;transform: rotate(40deg);border-radius: 10rpx;
}.dots .active{background-color: green;
}

scroll-view

滚动视图<!-- 3.1竖向滚动  height 应用场景：商品分类 数据列表-->
<!-- <scroll-view scroll-y class="shu"><view>1</view><view>2</view><view>3</view>
</scroll-view> --><!-- 3.2横向滚动  应用场景：左滑删除 -->
<!-- <scroll-view scroll-x class="heng"  父亲： white-space: nowrap; 第一次孩子： display: inline-block;  ><view>1</view><view>2</view><view>3</view>
</scroll-view> -->.shu{height: 300rpx;
}
.shu view{width: 100%;height: 200rpx;background-color: green;
}.heng{width: 100%;height: 300rpx;white-space: nowrap;
}.heng view{display: inline-block;width: 100%;height: 300rpx;
}.heng view:nth-of-type(1){background-color: pink;
}
.heng view:nth-of-type(2){background-color: green;
}
.heng view:nth-of-type(3){background-color: rgb(199, 115, 37);
}

1.3媒体组件

image

图片组件<!-- 1.image -->
<!-- 1.1 图片的缩放模式  等比缩放 -->
<!-- <image src="../../images/0.jpg" class="img" mode="widthFix"></image> --><!-- 1.2懒加载 lazy_load （都会预加载上中下三屏数据）-->
<!-- <image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image>
<image src="../../images/0.jpg" bindload="imgLoad" lazy-load></image> --><!-- 3. 识别图片中的二维码(小程序码) -->
<!-- <image src="../../images/ma.jpg" show-menu-by-longpress></image> -->// 监听图片载入成功
imgLoad(e){console.log(1)// console.log(e.detail)
},.img{width: 100%;/* height: ; */
}

1.4表单组件

如何获取每一个表单的元素的value;

如何获取表单提交后的数据；

1.input输入框

1.借鉴了react-native的语法 默认不显示边框 需要手动添加
2.实时获取input的value值：2.1.给input绑定监听用户输入的事件bindinput ,通过this.setData（）重新赋值2.2.简易的双向绑定，model:value注意，基础库 2.9.3 开始支持3.注意设置confirm-typ时，type类型一定是textuserName:'',userPhone:'',<view class="row"><text>姓名：</text><input value="{{userName}}"type="text"confirm-type="done"password="{{false}}"maxlength="5"placeholder="请输入姓名"placeholder-class="placeholder"disabled="{{false}}"bindinput="changeValue"/>
</view><view class="row"><text>联系方式：</text><input type="text"confirm-type="done"password="{{false}}"maxlength="11"placeholder="请输入手机号"placeholder-class="placeholder"disabled="{{false}}"model:value="{{userPhone}}"/>
</view><view>用户的姓名是：{{userName}}</view>
<view>用户的手机号是：{{userPhone}}</view>// 实时获取用户姓名changeValue(e){// 模拟双向绑定this.setData({userName:e.detail.value})},

2.radio/radio-group单选项目及组

 userSex:[{name:'男',value:0,checked:true,color:'green'},{name:'女',value:1,color:'red'},{name:'保密',value:2,color:'pink'},],<view class="row"><text>您的性别是</text><radio-group bindchange="changeSex"><radio wx:for="{{userSex}}"wx:key="value"value="{{item.value}}"checked="{{item.checked}}"color="{{item.color}}">{{item.name}}</radio></radio-group>
</view>// 实时获取用户的性别changeSex(e){console.log(e.detail.value)},

3.checkbox/checkbox-group多选项目及组

userhopy:[{name:'运动',value:0,checked:true,color:'green'},{name:'唱歌',value:1,color:'red'},{name:'代码',value:2,color:'pink'},{name:'游戏',value:3,disabled:true,color:'blue'},],<view class="row"><text>您的爱好是</text><checkbox-group bindchange="changeHopy"><checkbox wx:for="{{userhopy}}"wx:key="value"value="{{item.value}}"checked="{{item.checked}}"disabled="{{item.disabled}}"color="{{item.color}}">{{item.name}}</checkbox></checkbox-group>
</view>// 实时获取用户的爱好changeHopy(e){console.log(e.detail.value)},

4.picker底部弹起选择器

  region: ['北京市', '北京市', '昌平区'],storylist: [{"classify": "儿童小故事","classifyId": "1"},{"classify": "安徒生童话","classifyId": "2"},{"classify": "格林童话","classifyId": "3"},{"classify": "一千零一夜","classifyId": "4"},{"classify": "经典童话","classifyId": "5"},{"classify": "成语故事","classifyId": "6"},{"classify": "寓言故事","classifyId": "7"},{"classify": "民间故事","classifyId": "8"},{"classify": "童话故事","classifyId": "9"},{"classify": "王尔德童话","classifyId": "10"}],index:0,//设置默认展示故事分类<view class="row"><text>您的住址是</text><picker mode="region" bindchange="bindRegionChange" value="{{region}}" >当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}</picker>
</view><view class="row"><text>您的喜欢故事是</text><picker mode="selector" range="{{storylist}}"range-key="classify"value="{{index}}"bindchange="bindChangeStory" value="{{region}}" >当前选择：{{storylist[index].classify}}</picker>
</view>// 实时获取故事类型bindChangeStory(e){this.setData({index:e.detail.value})},// 实时获取用户的住址bindRegionChange(e){this.setData({region:e.detail.value})},

5.switch开关选择器

<view class="row"><text>是否同意联系您本人</text><switch type="checkbox" bindchange="changeBuffer"></switch>
</view>// 实时获取开关valuechangeBuffer(e){console.log(e.detail.value)},

6.button

button组件不只有按钮，还具有一定的开发能力比如获取用户的头像昵称 、用户的手机号  微信步数loadBuffer:false,//设置提交控制开关  <view class="but"><buttonsize="mini"type="primary"loading="{{loadBuffer}}"form-type="submit">提交</button><buttonsize="mini"type="warn"plainform-type="reset">重置</button>
</view>

7.form表单组件

表单提交流程：1.首先给button添加form-type属性2.将表单元素添加到form组件中3.给所有的表单元素添加name属性4.给form组件绑定bindsubmit事件// 监听表单重置reset(){// 可以再次处理一些业务逻辑比如还原picker上默认数据console.log(111)},// 获取表单提交的数据submit(e){// 开启提交加载动画this.setData({loadBuffer:true})console.log(e.detail.value);// 表单数据校验// 当数据成功提交到服务端后关闭加载动画(模拟)setTimeout(()=>{this.setData({loadBuffer:false})},2000)}

1.5路由组件

微信小程序中提供了导航组件（vue：router-link）和 路由api函数(vue:：this.$router.push)两种跳转方式，帮助开发者实现小程序内部的页面之间的跳转以及小程序与小程序之间的跳转，这两种方式在功能上完全一致，只不过是两种不同实现方式而已；

官方对于导航组件的功能介绍比较少，建议结合路由api的文档来学习页面跳转功能

1.导航组件

基本语法：

 <!-- 1.普通页面之间的跳转 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
-->
<navigator target="self" url="../form/form?name=李白&age=20" open-type="navigate">跳转到form页面</navigator>
<!--错误实例 <navigator target="self" url="../index/index" open-type="navigate">跳转到index页面</navigator> --><!-- 2.重定向 -->
<!-- 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 -->
<navigator target="self" url="../form/form?name=李白&age=20" open-type="redirect">定向到form</navigator><!-- 3.跳转选项卡页面 -->
<!-- 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面  路径后不能带参数。-->
<navigator target="self" url="../index/index" open-type="switchTab">跳转到index</navigator><!-- 4.重新打开页面 -->
<!--  -->
<navigator target="self" url="../form/form?name=李白&age=20" open-type="reLaunch">跳转到form</navigator>
<!-- <navigator target="self" url="../index/index?name=李白&age=20" open-type="reLaunch">跳转到index</navigator> --><!-- 5.返回某个（可以返回n层页面）页面 -->
<navigator delta="1" open-type="navigateBack">返回</navigator><!-- 6.跳转到外部微信小程序 -->
<navigatortarget="miniProgram"app-id="wx2f26909d14cc3fdf"version="release"
>跳转到菜谱小程序</navigator>

2.路由API

基本语法：

/*** 页面的初始数据*/data: {user:{id:1001,name:'张三'}},// 跳转到外部小程序miniProgramTo(){wx.navigateToMiniProgram({appId:"wx2f26909d14cc3fdf",success:res=>{console.log(res)}})},// reLaunchTo 重新打开reLaunchTo(){wx.reLaunch({url: '../form/form',})},// switchTo  跳转选项卡页面switchTo(){wx.switchTab({url: '../index/index',})},// redirectTo  重定向redirectTo(){wx.redirectTo({url: '../form/form?age=20',})},// navigateTo 普通跳转navigateTo(){wx.navigateTo({//错误实例   url: '../form/form?user='+this.data.user,url: '../form/form?user='+JSON.stringify(this.data.user),success:res=>{},fail:err=>{},complete:result=>{}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 获取小程序页面栈console.log(getCurrentPages());},

3.路由传参

注意get地址传值(不要加空格) 如：pages/index/index?name=李四&age=20

4.接收路由传参

目标页面的onLoad(options)生命周期中获取参数

5.总结路由规则

地址：

页面路由 | 微信开放文档

navigateTo, redirectTo 只能打开非 tabBar 页面，可以传参
switchTab 只能打开 tabBar 页面，不能传参。
reLaunch 可以打开任意页面，可以传参。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

6.获取页面栈记录

 console.log(getCurrentPages())  //array[route1,route2.....]页面栈一共10层，超多10层将会导致页面跳转失败

二、自定义组件

同vue语法相似

1.概述

小程序支持简洁的组件化编程，开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；自定义组件在使用时与小程序原生提供的组件非常相似，自定义组件的创建及页面构成基本同普通页面；

2.创建自定义组件

组件页面也是有.js .json.wxml .wxss四个文件构成

3.组件注册与使用

1.全局注册（app.json）可以在项目的所有页面使用"usingComponents": {"sonComp":"./components/son/son"}2.页面注册(页面的.json)可以在当前页面使用"usingComponents": {"son_Comp":"../../components/son/son"}
3.页面使用组件<sonComp></sonComp>

4.组件样式(wxss)

在组件中不要使用组件的（微信小程序封装的组件，view text）名称 、id作为选择器，建议使用class，其他同普通页面语法/* 基本同普通页面，注意不建议使用id和组件的名称作为样式选择器 建议使用class */

5.组件页面(wxml)

组件页面.wxml语法同普通页面的语法

6.组件逻辑(js)

组件页面使用component方法进行构造，区别于页面的page方法；properties：是组件对外的属性，可用于页面之间的通信，如父传子，其他与data无异；
data:组件页面的数据，通过普通页面中的data;
methods：组件页面的自定义事件，语法同普通页面，包含页面重新赋值（this.setData({})）

7.slot插槽使用

插槽分为单插槽和多插槽，语法和vue相似

7.1单插槽

<slot></slot>

7.2多插槽

// 给自定义组件添加配置
options:{multipleSlots:true,//允许使用多插槽
}<slot name='head'></slot>
<view slot='head'>我是头部</view>

8.组件间通信

语法同vue相似

8.1父传子

props

8.2子传父

事件传递
this.triggerEvent('channel',{name:'我是孩子son'})

8.3获取组件实例

this.selectComponent('组件的class名称')

9.observers数据监听器

用于监听组件中data数据和props属性的变化，类似于watch监听器，区别是不管值是否发生变化更改，只要监听了都会触发；数据监听器使用可以监听单一的数值也可以监听全部数据的变化

  // 用于监听组件中data数据和props属性的变化   只能获取修改后值observers:{// 监听单一数据的变化 // 'name'(param){//     console.log(param)// },// 监听对象中的某一个数据变化// 'user.id'(param){//     console.log(param)// },// 监听user对象中所有数据变化'user.**'(param){console.log(param)},// 监听data和props中所有数据的变化'**'(param){console.log(param)}},

10.组件的生命周期（了解）

created：组件实例刚刚被创建好时，created生命周期被触发。此时还不能调用setData` 。通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
attached：在组件完全初始化完毕、进入页面节点树后，attached生命周期被触发。此时，this.data` 已被初始化完毕。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
detached：在组件离开页面节点树后，detached生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则detached` 会被触发。

微信小程序组件、路由、组件通信、侦听器相关推荐

微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性共同的属性时间选择器time 参考 [微信小程序]选择器组件picker picke ...
微信小程序的父子组件传值
微信小程序的父子组件传值如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序引入vant-weapp组件遇到的bug以及解决方法
微信小程序引入vant-weapp组件遇到的bug问题原本百度了一波,说只要安装了node还有npm之后,使用gitBash命令行工具直接cd到根目录下然后直接引入以下代码: npm i vant- ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...

微信小程序组件、路由、组件通信、侦听器