微信小程序笔记

微信小程序笔记

一.⼩程序配置⽂件

1.1全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

{
  "pages":[
    "pages/index/index",//微信小程序显示的首页，谁在第一位显示谁
    "pages/logs/logs",
    "pages/demo01/demo01"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

字段的含义 ：

1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。

2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

3. 完整的配置信息请参考 app.json配置

1.2全局window配置

{
  "pages":[
    "pages/index/index",//微信小程序显示的首页，谁在第一位显示谁
    "pages/logs/logs",
    "pages/demo01/demo01"
  ],
  "window":{
    "backgroundTextStyle":"dark",//两个值dark/light 默认是light
    "navigationBarBackgroundColor": "#0094ff",//头部导航栏颜色
    "navigationBarTitleText": "我的应用",//标题
    "navigationBarTextStyle":"white",//标题颜色，两个值black/white 默认是white
    "enablePullDownRefresh": true,//是否开启下拉刷新，默认是false
    "backgroundColor": "#ccc"//下拉刷新时的背景颜色
  },
    "tabBar": {//tabbar
    "color": "#999",//未选中的字体颜色
    "selectedColor": "#ff2d4a",//选中时字体颜色
    "backgroundColor": "#fafafa",//tabbar的背景颜色
    "position": "bottom",//tabbar的位置
    "borderStyle": "black",//tabbar边框
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      }
      ,
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      }
      ,
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  }
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

二.数据绑定

<text>1text>
<text>2text>
<view>1view>
<view>2view>

<view>
    {{msg}}
view>

<view>{{num}}view>

<view>是否是伪娘:{{isGril}}view>

<view>{{person.name}}view>
<view>{{person.age}}view>
<view>{{person.height}}view>
<view>{{person.weight}}view>


<view data-num="{{num}}">自定义数据view>



<checkbox checked="{{isChecked}}">checkbox>


 
<view>{{1+1 - 3  * 2 / 3}}view>
  

<view>{{'hello' + 'wx'}}view>


<view>{{17+1 == 18 ? '欢迎' : '您未满18岁'}}view>



 //注意: 花括号和引号之间如果有空格，将最终被解析成为字符串

2.1循环

wx:for

项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名

wx:key ⽤来提⾼数组渲染的性能

wx:key 绑定的值 有如下选择

1. string 类型，表⽰ 循环项中的唯⼀属性 如

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]

wx:key="id"

2.保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是 唯⼀的字符串和数组。

list:[1,2,3,4,5]
wx:key="*this"

 <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
    索引:{{index}}---值：{{item.name}}
 view>

 <view>遍历对象view>
 
    属性：{{key}}---值:{{value}}
 view>

2.2 block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: view>
  <view> {{item}} view>
block>

2.3 if 条件渲染

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

 <view>条件渲染view>
 <view wx:if="{{true}}">显示view>
 <view wx:if="{{false}}">隐藏view>

 <view wx:if="{{false}}">不显示view>
 <view wx:elif="{{false}}">不显示view>
 <view wx:else>他们都不要，我接盘view>

 <view>----------view>
 <view hidden> 我被hidden我不会显示view>
 <view hidden="{{false}}">我可以被看到view>
 <view hidden="{{true}}">你看不到我view>

2.4 小程序事件的绑定

小程序绑定事件，通过bind关键字来实现，如 bindtap bindinput bindchange等不同组件支持不同的事件，具体看组件的说明即可

<input type="text" bindinput="handleInput">input>
<view>{{num}}view>

<button bindtap="changeNum" data-operation="{{1}}">+button>
<button bindtap="changeNum" data-operation="{{-1}}">-button>

// pages/demo03/demo03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },
  handleInput(e) {
    console.log(e.detail.value)
    this.setData({
      num: e.detail.value
    })
  },
  changeNum(e){
    console.log(e)
    const {operation} = e.target.dataset
    this.setData({
      num:this.data.num + operation
    })
  }
})

2.5wxss宽度自适应配置

/* pages/demo04/demo04.wxss */
/*
1.小程序中 不需要主动引入样式文件
2.需要把页面中某些元素的单位 由px改换成rpx
    1.设计稿 750px
    750 px = 750rpx
      1 px = 1 rpx
    2.把屏幕宽度改成375px
    375px = 750 rpx
    1 px = 1 rpx 
    1rpx = 0.5px
    3.存在一个设计稿 款多 414 或者未知page
    1.设计稿 page 存在一个元素宽度 100px
    2.拿以上的需求 趋势线 不同宽度的页面适配

    page px = 750px
    1px = 750 rpx * 100 / page
    100px = 750 rpx * 100  / page
    假设设计稿的宽度page等于375px
    4. 利用 一个calc属性 
    注意：1.750和rpx中间不要留空格
    2.运算符的两边也不要留空格
*/
view{
  /* width: 200rpx; */
  height: 200rpx;
  background-color: aqua;
  font-size: 40rpx;
  width: calc(750rpx * 100 / 375);
}

2.6引入外部样式

通过@import “路径位置”

注意只支持相对路径

代码演示：

/*style文件夹下的common样式*/
view{
  color: aqua;
  font-size: 16px;
}

/*导入到demo05中的样式中*/

@import "../../style/common.wxss"

2.7选择器

特别需要注意的是小程序不支持通配符*因此以下代码无效

*{
    margin:0;
    padding:0;
    box-sizing:border-box; 
 }

目前的选择器有：

选择器	样例	样例描述
.class	.banner	选择所有拥有class="banner"的组件
#id	#phone	选择拥有id="phone"的组件
element	view	选择所有view组件
element,element	view,checkbox	选择view和checkbox组件
nth-child(n)	view:nth-child(n)	选择某个标签
::after	view::after	在view组件后面插入内容
::before	view::before	在view组件前边插入内容

2.8小程序中使用less

1.原生小程序不支持less,其他基于小程序的框架大体都支持，如wepy mpvue, taro

2.用vscode中的插件easy less

3.在vscode中设置加入以下配置

less.compile": {
        "outExt":       ".wxss"
   }

4.在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。

//嵌套写法
view{
    text{
        width: 20px;
    }
}
//定义变量
@color:yellow;
text{
    color: @color;
}
//导入外部less文件
@import '../../style/index.less';
view{
    color: @themeColor;
}

三.小程序常见的组件

重点讲解⼩程序中常⽤的布局组件

view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox 等

3.1 view

代替原来的div标签

 <view hover-class="h-class">
 点击我试试
 view>

3.2 text

1.文本标签

2.只能嵌套text

3.长安文字可以复制（只有该标签有这个功能）

4.可以对空格回车进行编辑

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

<text selectable="{{true}}" decode="{{true}}">
我是一个text，我可以被复制   123<
text>

3.3 image

<image mode="top" lazy-load  src="https://pic.images.ac.cn/image/5ea0fe288244e.html" >
    
image>

1.image图片标签默认高度320px,240px

2.支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪，缩放的模式
lazy-load	Boolean	false	图片懒加载

mode有效值：

mode有13种模式，其中4种是缩放模式，9中是裁剪模式

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
缩放	aspectFilt	保持纵横比缩放图片，是图片的长边能完全显示出来
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来
缩放	widthFix	宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
缩放	top	不缩放图⽚，只显⽰图⽚的顶部区域
缩放	bottom	不缩放图⽚，只显⽰图⽚的底部区域
缩放	center	不缩放图⽚，只显⽰图⽚的中间区域
缩放	left	不缩放图⽚，只显⽰图⽚的左边区域
缩放	right	不缩放图⽚，只显⽰图⽚的右边区域
缩放	top left	不缩放图⽚，只显⽰图⽚的左上边区域
缩放	top right	不缩放图⽚，只显⽰图⽚的右上边区域
缩放	bottom left	不缩放图⽚，只显⽰图⽚的左下边区域
缩放	bottom right	不缩放图⽚，只显⽰图⽚的右下边区域

3.4 swiper 微信内置轮播图组件

swiper组件默认的宽是100%,高度是150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0,0,0.3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000（毫秒）	自动切换事件间隔
circular	Boolean	false	是否循环轮播

3.4.1swiper 滑块视图容器

3.4.2swiper-item每个滑块

默认宽度和高度都是100%

<swiper autoplay="{{true}}" interval="2000" circular indicator-dots="{{true}}" indicator-color="skyblue" indicator-active-color="orange">
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg">image>
    swiper-item>
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/142/O1CN012xkybe1Cv4pztdLZm_!!142-0-lubanu.jpg">image>
    swiper-item>
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i4/190/O1CN01fmyLv41DH3qg3rPgY_!!190-0-lubanu.jpg">image>
    swiper-item>
swiper>

wxss文件
/* pages/demo09/demo09.wxss */
image{
    width: 100%;
}
swiper{
    width: 100%;
    height: calc(100vw * 352 / 1125);
}

3.5 navigator导航标签

<navigator url="/pages/demo09/demo09">
    跳转到轮播图页面
navigator>

<navigator url="/pages/index/index">
    跳转到tabbar页面（我是默认值，跳不了哈哈哈）
navigator>
<navigator open-type="redirect" url="/pages/demo09/demo09">
    我是redirect重定向到别的页面
navigator>
<navigator open-type="switchTab" url="/pages/index/index">
    switchTab直接跳转到 tabbar页面
navigator>
<navigator open-type="reLaunch" url="/pages/index/index">
    我是relaunch我可以随便跳转
navigator>

navigator 导航组件 类似于超链接组件

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转连接
open-type	String	navigate	跳转方式

open-type有效值:

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
redirect	关闭当前页面，跳转到应用内的某个页面,但是不能跳转到tabbar页面
switchTab	跳转到tabbar页面，关闭其他所有非tabbar页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages()获取当前的页面栈,决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

3.6 rich-text

富文本标签 类似于vue中的v-html

示例代码

<!--pages/demo12/demo12.wxml-->
<!-- <text>pages/demo12/demo12.wxml</text> -->


<!-- 
  rich-text 富文本标签
  1 nodes属性来实现
    1 接收标签字符串 
    2 接收对象数组 
 -->
<rich-text nodes="{{html}}">
    
</rich-text>

// pages/demo12/demo12.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 1. 标签字符串 最常用
    // html:'
天猫
聚划算
天猫国际
外卖
天猫超市
充值中心
飞猪旅行
领金币
拍卖
分类
'
    //2.对象数组的方式
    html:[
      {
        //1.放一个div标签用name属性来指定
        name:'div',
        //2.标签上有哪些属性，用attrs来指定
        attrs:{
          //标签上的属性有类名，和样式
          class:'my_div',
          style:'color:red;'
        },
        //子节点用 children来指定
        children:[
          {
            //div里面的子节点p标签
            name:"p",
            //p身上的属性
            attrs:{
              
            },
            children:[
              {
                type:'text',
                text:'hello'
              }
            ]
          }
        ]
      }
    ]
  },
  
})

3.6.1nodes属性

nodes属性支持字符串和标签节点数组

属性	说明	类型	必填	备注
name	标签	String	是	支持部分受信任的html节点
attrs	属性	object	否	支持部分受信任的属性，遵循Pascal命名法
children	子节点列表	array	否	结果和nodes一致

文本节点：type=text

属性	说明	类型	必填	备注
text	文本	String	是	支持entities

html:[
      {
        //1.放一个div标签用name属性来指定
        name:'div',
        //2.标签上有哪些属性，用attrs来指定
        attrs:{
          //标签上的属性有类名，和样式
          class:'my_div',
          style:'color:red;'
        },
        //子节点用 children来指定
        children:[
          {
            //div里面的子节点p标签
            name:"p",
            //p身上的属性
            attrs:{
              
            },
            children:[
              {
                type:'text',
                text:'hello'
              }
            ]
          }
        ]
      }
    ]

3.7 button 组件

<button>default按钮button>
<button size="mini">mini按钮button>
<button type="primary">primary按钮button>
<button type="warn">warn按钮button>
<button type="warn" plain>warn按钮 透明button>
<button type="primary" loading>primary按钮button>

<button open-type="contact">contactbutton>
<button open-type="share">sharebutton>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumberbutton>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfobutton>
<button open-type="launchApp">launchAppbutton>
<button open-type="openSetting">openSettingbutton>
<button open-type="feedback">feedbackbutton>

属性	类型	默认值	必填	说明
size	string	default	否	按钮大小
type	string	default	否	按钮的样式类型
plain	boolean	default	否	按钮是否镂空，背景⾊透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带loading图标
form-type	string		否	用于’'组件，点击分别会触发‘’组件的submit/reset事件
open-type	string		否	微信开放能力

size合法值

值	说明
default	默认大小
mini	小尺寸

type的合法值

值	说明
primary	绿色
default	白色
warn	红色

form-type的合法值

值	说明
submit	提交表单
reset	重置表单

open-type的合法值

值	说明
contact	打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从bindcontact 回调中获得具体信息
share	触发⽤⼾转发，使⽤前建议先阅读
getPhoneNumber	获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息，
getUserInfo	获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数
openSetting	打开授权设置⻚
feedback	打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登 录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

open-type 的 contact的实现流程

1. 将⼩程序 的 appid 由测试号改为 ⾃⼰的 appid

2. 登录微信⼩程序官⽹，添加 客服客服 – 微信微信

3. 为了⽅便演⽰，⽼师⾃⼰准备了两个账号

   1. 普通⽤⼾ A

   2. 客服-微信 B

4. 就是⼲

3.8 icon

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search,clear
size	number/string	23	否	icon大小
color	string		否	icon的颜色，同css的color

<icon  type="success" size="60" color="#0094ff">
    
icon>

3.9 radio

可以通过 color属性来修改颜色

需要搭配 radio-group ⼀起使⽤

<radio-group bindchange="checked">
    <radio color="aqua" value="male">男radio>
    <radio color="aqua" value="female">女radio>
radio-group>
<view>选中了：{{res}}view>

3.10 checkbox

可以通过 color属性来修改颜色

需要搭配 checkbox-group ⼀起使⽤

<checkbox-group bindchange="checked">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="{{item.id}}">
        {{item.name}}
    checkbox>
checkbox-group>
<view>
    勾选了：{{fruit}}
view>
  

// pages/demo16/demo16.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:0,
        name:'',
        value:'apple'
      },{
        id:1,
        name:'',
        value:'grape'
      },{
        id:2,
        name:'',
        value:'banana'
      },
    ],
    fruit:[]
  },
  checked(e){
    console.log(e)
    const value = e.detail.value
    this.setData({
      fruit:value
    })
  }
 
})

四.自定义组件

4.1创建自定义组件的步骤

• 创建自定义组件文件夹

  类似于页面，一个自定义组件由 json ,wxml ,wxss ,js4个文件组成可以在微信开发者⼯具中快速创建组件的⽂件结构

• 声明组件 ⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明

  {
    "component": true
  }
  

• 编辑组件

  同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样式slot 表⽰插槽，类似vue中的slot

  
  <view class="inner">
   {{innerText}}
      <slot>slot>
  view>
  

  在组件的 wxss ⽂件中编写样式

  注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

  /* 这里的样式只应用于这个自定义组件 */
  .inner {
    color: red; 
  }
  

• 注册组件

  在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和 ⾃定义⽅法

  // components/Tabs/Tabs.js
  Component({
    /**
     * 组件的属性列表
     */
    properties: {
  
    },
  
    /**
     * 组件的初始数据
     */
    data: {
  
    },
  
    /**
     * 组件的方法列表
     */
    methods: {
  
    }
  })
  
  

• 声明引⼊⾃定义组件

  ⾸先要在需要引用⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径

   // 引用声明
    "usingComponents": {
   // 要使用的组件的名称     // 组件的路径
      "my-header":"/components/myHeader/myHeader"
   }
  }
  

• ⻚⾯中使⽤⾃定义组件

  <view>
    
    <my-header inner-text="Some text">
      <view>用来替代slot的view>
      my-header>
  view>
  

4.2组件之间的传值

4.2.1父向子组件传值

类似于vue中的父向子组件传值，通过标签属性的方式来传递

子组件接收的形式，在子组件的js文件中的properties接收

• 子组件js文件

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //父组件传递过来的List 
    list:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
   /* 
  1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
  2 组件.js 文件中 存放事件回调函数的时候 必须要存在在 methods中！！！
   */
  /**
   * 组件的方法列表
   */
  methods: {
    changeTab(e){
      // console.log(e)
      // 1.获取当前索引
      const {index} = e.currentTarget.dataset
      console.log(index)
      //2. 获取data中的数组
      // 解构  对 复杂类型进行结构的时候 复制了一份 变量的引用而已
      // 最严谨的做法 重新拷贝一份 数组，再对这个数组的备份进行处理，
      // let tabs=JSON.parse(JSON.stringify(this.data.tabs));
      // 不要直接修改 this.data.数据 
      // let {tabs}=this.data;
      // let tabs=this.data;
      //循环数组
      let {list} = this.data
      list.forEach((item,i) => {
        if(i === index){
          item.isActive = true
        }else{
          item.isActive = false
        }
      });
      //重新赋值给list
      this.setData({
        list
      })
    }
  }
})

• 子组件wxml文件

<view class="tabs">
    <view class="tabs_title">
        <view class="tabs_item {{item.isActive ? 'active':''}}" wx:for="{{list}}" wx:key="id" bindtap="changeTab" data-index="{{index}}">
            {{item.name}}
        view>
    view>
    <view class="tabs_connent">内容view>
view>

• 子组件wxss文件

/* components/Tabs/Tabs.wxss */
.tabs_title{
    display: flex;
    padding: 10rpx;
}
.tabs_item{
    display: flex;
    flex:1;
    justify-content: center;
    align-items: center;
}
.active{
    border-bottom: 5px solid red;
    color: orange;
}

• 父组件js文件

// pages/demo17/demo17.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
        id: 0,
        name: '首页',
        isActive: true,
      }, {
        id: 1,
        name: '新闻',
        isActive: false,
      }, {
        id: 2,
        name: '娱乐',
        isActive: false,
      }, {
        id: 3,
        name: '金融',
        isActive: false,
      },

    ]
  },

  
})

• 父组件wxml文件

 

<Tabs list="{{list}}">Tabs>

 1 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递
    1 在子组件上进行接收
    2 把这个数据当成是data中的数据直接用即可
  2 子向父传递数据 通过事件的方式传递
    1 在子组件的标签上加入一个 自定义事件

4.2.2子组件向父组件传值

类似vue 子传父用this.$emit(‘name’,value)

这里用this.triggerEvent(‘name’,value)

• 子组件中的js

/*
	5 点击事件触发的时候 
      发父组件中的自定义事件 同时传递数据给  父组件  
      this.triggerEvent("父组件自定义事件的名称",要传递的参数)  
*/
//子组件向父组件传值
    changeTab(e){
      //获取当前的索引
      const {index} = e.currentTarget.dataset
      this.triggerEvent('myTabs',index)
        //第一参数是自定义事件名称，第一个参数是要传递的参数
    }

• 父组件通过标签事件接收子组件传递的事件和参数

<Tabs list="{{list}}" aaa="123" bindmyTabs="changTabs">Tabs>
这里绑定的事件myTabs就是子组件自定的事件名称

• 父组件的js文件

// pages/demo17/demo17.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
        id: 0,
        name: '首页',
        isActive: true,
      }, {
        id: 1,
        name: '新闻',
        isActive: false,
      }, {
        id: 2,
        name: '娱乐',
        isActive: false,
      }, {
        id: 3,
        name: '金融',
        isActive: false,
      },

    ]
  },
  changTabs(e){
      //获取子组件传递过的当前的index
    console.log(e)
    const index = e.detail
    //深拷贝data中的list数组
    let list = JSON.parse(JSON.stringify(this.data.list))
    //遍历数组，把当前的索引设置为选中状态，其他改为false
    list.forEach((item,i) => i===index ? item.isActive=true : item.isActive=false)
      //设置list
    this.setData({
      list
    })
  }
})

4.2.3 插槽的使用

和vue中的slot作用一样，就是一个占位符，也可以有默认值，

当给定了内容，slot的内容就会被覆盖

示例：

• 子组件的wxml文件

<view class="tabs">
    <view class="tabs_title">
        <view class="tabs_item {{item.isActive ? 'active':''}}" wx:for="{{list}}" wx:key="id" bindtap="changeTab" data-index="{{index}}">
            {{item.name}}
        view>
    view>
    <view class="tabs_connent"><slot >slot>view>
    
    
view>

• 父组件的wxml文件

<Tabs list="{{list}}" aaa="123" bindmyTabs="changTabs">
    <block wx:if="{{list[0].isActive}}">首页block>
    <block wx:elif="{{list[1].isActive}}">新闻block>
    <block wx:elif="{{list[2].isActive}}">娱乐block>
    <block wx:else>金融block>
Tabs>

4.3组件常见的属性

定义段	类型	是否必填	描述
properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，参见下文
data	Object	否	组件内部数据，和properties一同用于组件模板渲染
observers	Object	否	组件数据字段监听器，用于properties和data的变化，类似于vue中的watch
methods	Object	否	组件的方法，包括时间相应函数和任意的自定义方法，
created	Function	否	组件生命周期函数，在组件实例化刚刚被创建时执行，此时不能调用setData
attached	Function	否	组件⽣命周期函数，在组件实例进⼊⻚⾯节点树时执⾏，
ready	Function	否	组件⽣命周期函数，在组件布局完成后执⾏，
moved	Function	否	组件⽣命周期函数，在组件实例被移动到节点树另⼀个位置 时执⾏
detached	Function	否	组件⽣命周期函数，在组件实例被从⻚⾯节点树移除时执 行

五.小程序的生命周期函数

5.1应⽤⽣命周期

属性	类型	默认值	必填	说明
onlLaunch	function		否	监听小程序初始化
onShow	function		否	监听小程序启动或切后台
onHide	function		否	监听小程序切后台
onError	function		否	错误监听函数
onPageNotFound	function		否	页面不存在监听函数

5.2页面生命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调–监听页面加载
onShow	function	⽣命周期回调—监听⻚⾯显⽰
onReady	function	⽣命周期回调—监听⻚⾯初次渲染完成
onHide	function	⽣命周期回调—监听⻚⾯隐藏
onUnload	function	⽣命周期回调—监听⻚⾯卸载
oonPullDwonRefresh	function	监听用户下拉动作
onReachBotton	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改时触发
onTabltemTap	function	当前是tab也时，点击tab时触发