微信小程序组件

组件就是小程序页面的组成机构，与html在web网页开发中的作用一样，铺设页面，可以参考其他UI库，像elementUI，vantUI组件

组件是视图的基本组成单元

组件自带一些功能与微信风格一致的样式

一个组件通常包括，开始标签和结束标签，属性 用来修饰这个组件，内容在标签内部

组件具有公共属性和特殊属性，学习小程序组件其实就是小程序组件特殊属性

组件公共属性 id class style hidden data-* bind* /catch*

1.基础组件

1.icon

图标

<icon type="search" color="red" size="50">icon>

2.text

文本

<text user-select="{{true}}">
ni h    ao
text>
<text space="nbsp">你      好text>
<text decode>
{{"<"}}
text>

3.rich-text

富文本

<rich-text nodes="
你好
">rich-text>

2.视图组件

1.view

视图容器类似于div

<view>视图容器view>

2.swiper:轮播图

<swiper
autoplay
interval="1000"
circular
indicator-dos="{{false}}"
vertical="{{false}}"
bindchange="change"
>
  <swiper-item wx:for="{{imgs}}" wx:key="*this">
    <image src="{{item}}">image>
  swiper-item>
swiper>

  imgs:[
      '../../images/banner/1.jpg',
      '../../images/banner/2.jpg',
      '../../images/banner/3.jpg',
      '../../images/banner/4.jpg',
      ],
  activeIndex:0

change(e) {
  this.setData({
    activeIndex: e.detail.current
  })
}

3.sroll-view滚动视图

<scroll-view class="shu" scroll-y>
	<view>1view>
    <view>2view>
    <view>3view>
scroll-view>


<scroll-view class="heng" scroll-x>
	<view>1view>
    <view>2view>
    <view>3view>
scroll-view>

3.媒体组件

1.image图片

<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;">image>

image懒加载 小程序会先加载上中下三屏的数据

<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>
<image src="../../images/0.jpg" mode="witthFiex" style="width: 100%;" lazy-load bindload="loadimg">image>

loadimg() {
    console.log(1)
}

识别图中二维码

<image src="../../iamges/01.jpg" show-mune-by-longpress>image>

4.表单组件

1.input输入框

1.借鉴了react-native的语法，默认不显示边框，需要手动田间

2.实时获取input的value值

​ 给inputbanging监听用户输入的事件bindinput，通过this.setData()重新赋值

​ 简易 的双向绑定，model：value

​ 注：基础库 2.9.3开始支持

3.注意设置confirm-type时，type类型一定是text

userName='',
userPhone: '',
//实时获取用户姓名
changeName(e) {
    //模拟双向绑定
    this.setData({userName:e.detail.value})
}

<view cllass="row">
	<text>姓名:text>
    <input value="{{userName}}" type="text" confirm-type="done" password="{{false}}" maxlength="5" placeholder="请输入用户名" placeholder-class="placeholder" disabled="{{false}}" bindinput="changeName"/>
view>
<view class="row">
	<text>联系方式：text>
    <input type="text" cofirm-type="done" password="{{false}}" maxlength="11" placeholder="请输入用户名" placeholder-class="placeholder" disabled="{{false}}" model:value="{{userPhone}}"/>
view>
<view>用户名： {{userName}}view>
<view>用户的手机号:{{userPhone}}view>

2.radio/radio-group单选按钮及单选按钮组

userSex: [
	{name:'男',value:0,checked:true,color:'green'},
	{name:'女',value:1,color:'red'},
	{name:'保密',value:2,color:'pink'}	
]
// 实时获取用户的性别
changeSex(e) {
    console.log(e.detail.value)
}

<text>您的性别是text>
<radio-group bindchange="changeSex">
	<radio wx:for="{{userSex}}" wx:key="value" value="{{item.value}}" checkd="{{item.checked}}" color="{{item.color}}">{{item.name}}radio>
radio-group>

3.checkbox/checkbox-group复选框及组

userhoby:[
	{name:'运动',value:0,checked:true,color:'green'},
	{name:'唱歌',value:1,color:'red'},
	{name:'代码',value:2,color:'pink'},
	{name:'游戏',value:3,disabled:true,color:'blue'},
]
changeHoby(e) {
    console.log(e.detail.value)
}

<text>您的爱好是text>
<checkbox-group bidcheng="changeHoby">
	<checkbox wx:for="{{userhoby}}" wx:key="vallue" value="{{item.value}}" checkd="{{item.checked}}" disabled="{{item.disabled}}" color="{{item.color}}">{{item.name}}checkbox>
checkbox-group>

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,//设置默认展示故事分类
//实时获取故事类型
bindChangeStory(e) {
    this.setData({
        index:e.detai.value
    })
}
//实时获取用户的住址
bindRegionChange(e) {
    this.setData({
        region:e.detail.value
    })
}

<text>您的住址是text>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}">
	当前选择： {{region[0]}},{{region[1]}},{{region[2]}}
picker>

<text>您喜欢的故事是text>
<picker mode="selector" range="{{storylist}}" range-key="classify" value="{{index}}" bindchange="bindChangeStory" >
	当前选择: {{storylist[index].classify}}
picker>

5.switch开关选择器

<text>是否同意联系您本人text>
<switch type="checkbox" bindchange="changeBuffer">switch>

changeBuffer(e) {
    console.log(e.detail.value)
}

6.button

button组件不只有按钮，还具有一定的开发能力，比如获取用户的头像昵称、用户 手机号 微信步数

loadBuffer:false //设置提交控制开关

<view class="but">
	<button
     size="mini"
     type="primary"
     loading="{{loadBuffer}}"
     form-type="submit"
     >提交button>
   	<button
     size="mini"
     type="warn"
     plain
     form-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)
}

5.路由组件

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

1.导航组件

普通跳转

保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面

使用wx.navigateBack可以返回到原页面

小程序中页面栈最多十层

可以传参（get方式传递参数）

<navigator open-type="navigate" url="../form/form?name=张三">跳转到form页面navigator>

重定向

关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面

可以传参（get方式传递参数）

<navigator open-type="redirect" urll="../form/form？name=张三">跳转到form页面navagator>

跳转tabbar页面

跳转到tabBar页面，并关闭其他所有非tabBar页面

不可以传参

<navigator open-type="swithTab" url="../index/index">跳转到tabBar页面navigator>

重新打开页面

关闭所有页面，打开到应用内的某个页面

可以传参（get方式传递参数）

<navigator open-type="reLaunch" url="../form/form?name=zhangsan">跳转到form页面navigator>
<navigator open-type="reLaunch" url="../index/index">跳转到tabBar页面navigator>

navagateBack

关闭当前页面，返回上一页面或多级页面

不可以传参

<navigator open-type="navigateBack" delta="1">返回页面navigator>

小程序外部跳转

<navigator target="miniProgram" app-id="??????">跳转到外部小程序navigator>

2.路由API

跳转到外部小程序

navigateToMiniProgram(){
    wx.navigateToMiniProgram({
        appId: '??????'
    })
}

返回页面

navigateBack(){
    wx.navigateBack({
        delta:1
    })
}

重新打开页面

reLaunch() {
    wx.reLaunch({
        url: '../form/form?age=20'
    })
}

跳转到tabbar

swithTab(){
    wx.switchTab(){
        wx.switcTab({
            url: '../index/index'
        })
    }
}

重定向

redirect() {
    wx.redirectTo() {
        url:'../form/form?age=20'
    }
}

普通跳转

navigate() {
    let user={id:1,name:'张三'}
    wx.navagateTO({
        url: '../form/form?user='+JSON.stringfy(user)
    })
}

3.路由传参

通过get传值

如：…/form/form?age=20

4.接受路由传参

在目标页面的onLoad生命周期中获取参数

onLoad函数默认第一个参数为传递的参数

5.总结

navigatorTo,redirecTo只能打开非tabBar页面，可以传参

switchTab只能打开tabBar页面，不能传参

reLaunch可以打开任意页面，可以传参

页面底部的tabBar由页面决定，即只要是定义为tabBar的亚眠，底部都有tabBar

调用页面路由带有参数可以在目标页面的onLoad中获取

6.获取页面栈记录

console.log(getVurrentPage())
小程序页面栈最多10层，超过10层跳转失败

6.自定义组件

1.概述

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

2.创建自定义组件

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

3.组件的注册与使用

1.全局注册（app.json）
可以在项目的所有页面使用
"usingComponents": {
    "sonCom":"./components/son/son"
}
2.页面注册（页面的.json）
"usingCoponents": {
    "sonCom":"./components/son/son"
}

页面使用组件
<sonCom>sonCom>

4.组件样式（wxss）

在组件中不要使用组件的名称，id作为选择器，建议使用class，其他同普通页面语法

5.组件页面（wxml）

组件页面同普通页面

6.组件逻辑（js）

组件页面使用component方法进行构造，区别于页面page方法

properties：是组件对外的属性，可用于页面之间的通信，如父子传值，其他与data无异

data：组件页面的数据，通过普通页面中的data

methods：组件页面的自定义事件，语法同普通页面，包含页面重新赋值(this.setData({}))、生命周期函数

7.slot插槽使用

1.单插槽

<slot>slot>

2.多插槽

//给自定义组件添加配置
options: {
    multiplleSlots:true //允许使用多插槽
}

<slot name="head">slot>
<view slot="head">我是头部view>

8.组件间通信

1.父传子

props

2.子传父

事件传递
子组件定义事件

    给父组件传值

子组件js
methods: {
    pushData() {
		this.triggerEvent('sonData',{name:"zhangsan"})
    }
}

父组件

<son bindsonData="getData">son>

getData(e) {
    console.log(e.detail)
}

3.获取组件实例

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

9.observers数据监听器

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

observes: {
	//监听某一个数据的变化
    'user' (newV,oldV) {
        console.log(newV,oldV)
    },
    //监听对象中某一个属性的变化
     'user.name' (val) {
         consoel.log(val)
     },
     //监听对象中所有数据变化
     'user.**'(val) {
         consoel.log(val)
     },
     // 监听所有props和data中数据变化 
     '**'(val) {
         consoel.log(val)
     },
}