微信小程序Day4学习笔记

学习目标

基础强化

微信小程序Day4学习笔记_第1张图片

目录

微信小程序Day4学习笔记_第2张图片

1. 自定义组件 - 创建

新建组件
微信小程序Day4学习笔记_第3张图片

1. 引用组件

微信小程序Day4学习笔记_第4张图片

2. 局部引用组件

在 json 中 引用, 在页面 wxml 中 可以用标签 - 添加使用
微信小程序Day4学习笔记_第5张图片

3. 全局引用组件

全局配置文件 app.json 里引用,所有页面的 wxml 都可以使用
微信小程序Day4学习笔记_第6张图片

4. 根据需求,选择合适的引用方式

微信小程序Day4学习笔记_第7张图片

5. 组件 和 页面的区别

微信小程序Day4学习笔记_第8张图片
组件:

事件处理函数 - 定义到 js文件中 的 methods 节点中

微信小程序Day4学习笔记_第9张图片

2. 组件样式隔离

微信小程序Day4学习笔记_第10张图片

1. 样式隔离的 - 注意点

  1. app.wxss 里的样式 对 组件不管用
  2. 只有 class 选择器有样式隔离效果。(id选择器,属性选择器,标签选择器不受样式隔离的影响)

尽量不使用标签选择器

微信小程序Day4学习笔记_第11张图片

2. 修改组件样式隔离的 - 选项

微信小程序Day4学习笔记_第12张图片
微信小程序Day4学习笔记_第13张图片

isolated 页面 和 组件 不会互相影响
apply-shared 页面 影响组件
shared 组件 影响页面

3. 组件中的 data数据

微信小程序Day4学习笔记_第14张图片

4. 组件中的 methods

微信小程序Day4学习笔记_第15张图片

5. 组件中的 properties

定义组件的 properties
简化的方式 不能指定默认值
完整的定义方式 可以指定默认值

微信小程序Day4学习笔记_第16张图片

6. data 和 properties 的区别

data - 私有数据
properties - 外界传递过来的数据
微信小程序Day4学习笔记_第17张图片

7. 使用 setData 修改 properties 的值

微信小程序Day4学习笔记_第18张图片
效果:
微信小程序Day4学习笔记_第19张图片

8. 自定义组件 - 数据监听器

微信小程序Day4学习笔记_第20张图片需要在 app.json 里面全局使用一下组件

 "usingComponents": {
    "my-test1":"/components/test/test"
  }

1. UI结构:wxml

微信小程序Day4学习笔记_第21张图片
test.wxml


<view>{{n1}} + {{n2}} = {{sum}}</view>

<button bindtap="addN1">n1 + 1</button>
<button bindtap="addN2">n2 + 1</button>

2. 组件的 js 文件

微信小程序Day4学习笔记_第22张图片

实例:

微信小程序Day4学习笔记_第23张图片

component - test.js (observers 和 methods 是同级的)

/**
   * 组件的初始数据
   */
  data: {
    n1: 0,
    n2: 0,
    sum: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    addN1() {
      this.setData({
        n1: this.data.n1 + 1
      })
    },
    addN2() {
      this.setData({
        n2: this.data.n2 + 1
      })
    },
  },
  
  observers:{
    'n1, n2': function(newN1, newN2){
      this.setData({
        sum: newN1 + newN2
      })
    }
  }

})

3. 监听对象属性的变化

微信小程序Day4学习笔记_第24张图片

4. 案例

效果
微信小程序Day4学习笔记_第25张图片

1. 渲染 UI 结构

微信小程序Day4学习笔记_第26张图片

2. 定义 button 的事件处理函数

微信小程序Day4学习笔记_第27张图片

test.js


    changeR() {
      this.setData({
        'rgb.r': this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5 
      })
    },

    changeG() {
      this.setData({
        'rgb.g': this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5 
      })
    },

    changeB() {
      this.setData({
        'rgb.b': this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5 
      })
    }

3. observers 数据监听器

observers:{
    'n1, n2': function(newN1, newN2){
      this.setData({
        sum: newN1 + newN2
      })
    },

    'rgb.r, rgb.g, rgb.b': function(r, g, b){
      this.setData({
        fullColor: `${r},${g},${b}`
      })
    }
  }

4. observers 监听对象中 所有属性的变化

所有属性是 obj 对象
微信小程序Day4学习笔记_第28张图片

5. 纯数据字段

不用于 界面渲染的 data 字段

rgb 就是 纯数据字段
微信小程序Day4学习笔记_第29张图片
概念:
微信小程序Day4学习笔记_第30张图片
微信小程序Day4学习笔记_第31张图片

相同的内容全选 (Ctrl + D)
(Ctrl + S)保存!

6. 改造数据监听器案例

微信小程序Day4学习笔记_第32张图片

微信小程序Day4学习笔记_第33张图片

9. 组件的生命周期

微信小程序Day4学习笔记_第34张图片

1. 主要的 声明周期函数

微信小程序Day4学习笔记_第35张图片

2. 如何定义 生命周期函数

微信小程序Day4学习笔记_第36张图片

在 lifetimes 节点中 使用。

3. 组件 所在页面的 生命周期

微信小程序Day4学习笔记_第37张图片

组件所在页面 的生命周期函数,需要定义子啊 pageLifetimes 节点中

微信小程序Day4学习笔记_第38张图片

案例

微信小程序Day4学习笔记_第39张图片

组件所在页面被展示时, 立即调用 此方法 生成随机颜色值
微信小程序Day4学习笔记_第40张图片

组件的 js 文件

Component({
  options:{
    pureDataPattern: /^_/
  },
  
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    n1: 0,
    n2: 0,
    sum: 0,
    _rgb:{  // rgb 的颜色值对象
      r: 0,
      g: 0,
      b: 0, 
    },

    fullColor:'0, 0, 0' // 根据 rgb 对象的三个属性,动态计算 fullColor 的值
  },

  /**
   * 组件的方法列表
   */
  methods: {
    addN1() {
      this.setData({
        n1: this.data.n1 + 1
      })
    },
    addN2() {
      this.setData({
        n2: this.data.n2 + 1
      })
    },

    changeR() {
      this.setData({
        '_rgb.r': this.data._rgb.r + 5 > 255 ? 255 : this.data._rgb.r + 5 
      })
    },

    changeG() {
      this.setData({
        '_rgb.g': this.data._rgb.g + 5 > 255 ? 255 : this.data._rgb.g + 5 
      })
    },

    changeB() {
      this.setData({
        '_rgb.b': this.data._rgb.b + 5 > 255 ? 255 : this.data._rgb.b + 5 
      })
    },

    _randomColor() {
      this.setData({
        _rgb: {
          r: Math.floor(Math.random() * 256),
          g: Math.floor(Math.random() * 256),
          b: Math.floor(Math.random() * 256)
        }
      })
    }
  },

  observers:{
    'n1, n2': function(newN1, newN2){
      this.setData({
        sum: newN1 + newN2
      })
    },

    '_rgb.r, _rgb.g, _rgb.b': function(r, g, b){
      this.setData({
        fullColor: `${r},${g},${b}`
      })
    }
  },

  lifetimes: {   // 组件可用的生命周期
    created() {
      console.log('created~~~')
    },
    attached() {
      console.log('attached~~~')
    }
  },

  pageLifetimes: {
    show() {
      console.log('show~~')
      this._randomColor()
    },
    hide() {
      console.log('hide')
    },
    resize() {
      console.log('resize')
    }
  }

})

10. 插槽

概念
微信小程序Day4学习笔记_第41张图片

1. 单个插槽

微信小程序Day4学习笔记_第42张图片

使用组件的 wxml


<my-test1>
  <view>这里是通过插槽填充的内容</view>
</my-test1>

组件的 wxml


<view>
  <view>这里是组件的内部结构</view>
  <slot></slot>
</view>

在这里插入图片描述

2. 启用多个插槽

在组件的 js 文件中的 options 中启用 multipleSlots

微信小程序Day4学习笔记_第43张图片

3. 定义、使用 多个插槽

使用 不同的name 区分插槽
微信小程序Day4学习笔记_第44张图片微信小程序Day4学习笔记_第45张图片

使用组件的 wxml (slot 属性名)


<my-test1>
  <view slot="before">这里是通过插槽填充的内容</view>
</my-test1>

组件的 wxml


<view>
  <slot name="before"></slot>
  <view>这里是组件的内部结构</view>
  <slot name="after"></slot>
</view>

11. 父子组件之间的 通信

1. 三种方式

微信小程序Day4学习笔记_第46张图片

2. 属性绑定(父传子,Json兼容的数据)

注释的快捷键 Ctrl + /

父组件中的 count 属性,可以通过 count=“{{count}}” 来绑定到子组件中
微信小程序Day4学习笔记_第47张图片
父组件中


<my-test1 count="{{count}}">
  <view slot="before">这里是通过插槽填充的内容</view>
  <view slot="after">!~</view>
</my-test1>

<view>父组件中,count的值是:{{count}}</view>

子组件中,properties 中声明,外来属性的名称就可以用了

微信小程序Day4学习笔记_第48张图片

子组件中使用


<view>
  <slot name="before"></slot>
  <view>这里是组件的内部结构,子组件中 count 的值{{count}}</view>
  <slot name="after"></slot>
</view>

3. 事件绑定(子传父,任何类型的数据)

微信小程序Day4学习笔记_第49张图片

1. 步骤一

父组件的 js
微信小程序Day4学习笔记_第50张图片

2. 步骤二

父组件的 wxml

自定义事件的形式
bind: 事件名称 = “函数名称”
微信小程序Day4学习笔记_第51张图片

3. 步骤三

子组件的 js 中,调用 this.triggerEvent(‘自定义的事件名称’,{/*参数对象*/})

微信小程序Day4学习笔记_第52张图片

4. 步骤四

父组件的 js 中,e.detail 获取传递过来的数据,value
再绑定到 count 上
微信小程序Day4学习笔记_第53张图片

5. 传参,拿value

子组件的 js 文件
微信小程序Day4学习笔记_第54张图片
子组件 wxml 中的代码


<view>
  <slot name="before"></slot>
  <view>这里是组件的内部结构</view>
  <button bindtap="addCount">+1</button>
  <text>子组件中 count 的值{{count}}</text>
  <slot name="after"></slot>
</view>

子组件 js

    addCount(){
      this.setData({
        count: this.properties.count + 1
      })
      // 触发自定义事件,将数值同步给父组件(事件名后面,可以传参)
      this.triggerEvent('sync',{value: this.properties.count})
    }
  },

父组件 js 文件, 和 data 同级
微信小程序Day4学习笔记_第55张图片

父组件 wxml 中的代码 (子组件中有几个 slot,父组件使用子组件的时候,才能使用插槽,并显示几个自定义的view、text等)


<my-test1 count="{{count}}" bind:sync="syncCount">
  <view slot="before">before 这里是通过插槽填充的内容 </view>
  <view slot="after">after 插槽填充的内容 </view>
</my-test1>
<view>父组件中,count的值是:{{count}}</view>

父组件 js


  syncCount(e){
    console.log('syncCount' + e.detail.value)
    this.setData({
      count: e.detail.value
    })
  },

4. 获取组件实例

在父组件中调用 this.selectComponent(“id、class选择器”),
获取子组件的实例对象
然后可以直接访问子组件的任意数据和方法。
微信小程序Day4学习笔记_第56张图片

父组件的 wxml 文件


// 设置 class,id,方便 js 文件调用
<my-test1 count="{{count}}" bind:sync="syncCount" class="customA" id="cA">
  <view slot="before">before 这里是通过插槽填充的内容 </view>
  <view slot="after">after 插槽填充的内容 </view>
</my-test1>
<view>父组件中,count的值是:{{count}}</view>
// 在页面上点击按钮,触发 js中的 事件
<button bindtap="getChild">获取 子组件的 实例对象</button>

父组件的 js 文件


  getChild(){
  	// 拿到 子组件的 实例
    const child = this.selectComponent('#cA')
    console.log(child)
    child.setData({
    	  // 只能用 child,不能用 this(这时的this是父组件,不是子组件child)
      count: child.properties.count + 1
      // 触发子组件的 count 加 1
    })
  },
  

12. 自定义组件 - behaviors

1. 什么是 behaviors

组件间- 共享代码
微信小程序Day4学习笔记_第57张图片

2. behaviors 的 工作方式

可以互相引用
微信小程序Day4学习笔记_第58张图片

3. 创建 behaviors

定义一个 behaviors
微信小程序Day4学习笔记_第59张图片

在这里插入图片描述

创建

module.exports = Behavior({
  data: {
    username: 'zs'
  },
  properties:{},
  methods:{}
})

4. 导入并使用 behaviors

子组件的 js 文件中:
requir() 导入, 挂载在 behaviors节点下: [behaviors名字]
微信小程序Day4学习笔记_第60张图片

在子组件的 wxml 中使用

  <view>在behavior中定义的用户名是:{{username}}</view>

子组件的 js 文件中:

const myBehavior = require('../../behaviors/my-behaviors')

Component({
  behaviors: [myBehavior],

引入,挂载,即可使用 数据或方法

5. behaviors 中 所有可用的节点

微信小程序Day4学习笔记_第61张图片

6. 同名字段的 覆盖 和 组合规则

微信小程序Day4学习笔记_第62张图片

13. 总结1 - 组件

微信小程序Day4学习笔记_第63张图片

14. 如何导入别人的项目

选择导入
微信小程序Day4学习笔记_第64张图片

选择文件夹
微信小程序Day4学习笔记_第65张图片

改成自己的AppID,确认即可
微信小程序Day4学习笔记_第66张图片

15. 使用 npm 包

小程序对 npm 的支持与限制

微信小程序Day4学习笔记_第67张图片

1. 使用 Vant Weapp

扫码看组件
微信小程序Day4学习笔记_第68张图片

2. 安装 Vant 组件库

微信小程序Day4学习笔记_第69张图片
vant国内版

vant官网打不开怎么办 解决方法
(还是没法进去,但是可能有用)

w3cschool 的 vant 教程

1. 初始化,安装 vant

右键,在外部终端窗口打开 - 已定位到 当前小程序项目所在的目录。
微信小程序Day4学习笔记_第70张图片

没有 package.json, 需要初始化
微信小程序Day4学习笔记_第71张图片

安装 vant/[email protected] 指定了版本号
微信小程序Day4学习笔记_第72张图片
安装完毕

2. 构建 npm 包

微信小程序Day4学习笔记_第73张图片

3. 用 typescript 做步骤三,不用就直接步骤四

微信小程序Day4学习笔记_第74张图片

3. 使用 vant 组件

微信小程序Day4学习笔记_第75张图片
app.json

"usingComponents": {
    "vant-button": "@vant/weapp/button/index"
  }

home.wxml

<text>pages/home/home.wxml \n</text>

<vant-button type="primary">按钮</vant-button>

参考文档,使用对应的 组件

4. css变量 - 定制全局主题样式

微信小程序Day4学习笔记_第76张图片

MDN 手册

为了提高 css 的可维护性。
使用 css 变量,定制 vant 主题样式

微信小程序Day4学习笔记_第77张图片

定义 css 变量, var() 使用 css 变量
微信小程序Day4学习笔记_第78张图片

变量 在 html 里,说明这个变量的作用域是 html

5. CSS变量 实例

page 节点 - (类似 html 作用域 - 全局生效
微信小程序Day4学习笔记_第79张图片

定制主题: 这个名字该叫什么?

找变量改造
微信小程序Day4学习笔记_第80张图片

在 文档中找
微信小程序Day4学习笔记_第81张图片

6. 小程序 API 的 Promise化

1. promise回调函数的 缺点

微信小程序Day4学习笔记_第82张图片

2. API 的 promise 化

在这里插入图片描述

3. 实现 API 的 promise 化

右键,外部终端窗口。 使用 npm 命令

微信小程序Day4学习笔记_第83张图片

每安装一个包,需要重新构建一下才能使用

微信小程序Day4学习笔记_第84张图片

wx.p 属性,方便每个页面都可以访问

//app.js
import { promisifyAll } from 'miniprogram-api-promise'

const wxp = wx.p = {}
promisifyAll(wx, wxp)

4. 调用 promise 化之后的 异步 API

使用
微信小程序Day4学习笔记_第85张图片
页面 wxml 文件, bindtap


<vant-button type="primary" bindtap="getInfo">按钮</vant-button>

页面 js 文件, 用 async 和 await 优化异步操作,使

// 和 data 同级

  async getInfo(){
    const {data: res} = await wx.p.request({
      method: 'GET',
      url: 'https://applet-base-api-t.itheima.net/api/get',
      data:{
        name: 'zs',
        age: 20
      }
    })
    console.log(res)
  },

16. 全局数据共享

1. 什么是 全局数据共享

Behaviors 只是组件间的 代码复用,不是全局的 数据共享
微信小程序Day4学习笔记_第86张图片

2. 小程序中的 全局数据共享 - 方案

先创建实例,再挂载

微信小程序Day4学习笔记_第87张图片

1. 安装 mobx 包

微信小程序Day4学习笔记_第88张图片

微信小程序Day4学习笔记_第89张图片

删掉 miniprogra_npm包之后,再构建npm,成功。

微信小程序Day4学习笔记_第90张图片

2. 创建 MobX 的 Store 实例

根目录中,创建一个 store 文件夹, 在里面创建一个 store.js 文件
微信小程序Day4学习笔记_第91张图片

在外面 调用 action 方法,内部调用。

// 在这个 js 文件中,专门来创建 store 的实例对象
import { action, observable } from 'mobx-miniprogram'

export const store = observable({
  numA: 1,
  numB: 2,
  // 计算属性 get - sum只读, 无法重新赋值
  get sum(){
    return this.numA + this.numB
  },

  // actions 方法包裹 function() , 用来修改 store 中的数据
  updateNum1: action(function (step){
    this.numA += step
  }),
  updateNum2: action(function (step){
    this.numB += step
  }),
})

step 步长值

3. 将 Store 中的成员,绑定到页面中

实现思路
三步,导入需要的成员;onLoad绑定 字段、方法;清理工作。
微信小程序Day4学习笔记_第92张图片


import { createStoreBindings } from 'mobx-miniprogram-bindings'
import {store } from '../../store/store'

Pages({
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields: ['numA','numB','sum'],
      actions: ['updateNum1']
    })
  },

 /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.storeBindings.destoryStoreBindings()
  },

4. 在页面上使用 Store 中的成员

wxml 文件

微信小程序Day4学习笔记_第93张图片
页面 wxml 文件


<vant-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA + 1</vant-button>
<vant-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA - 1</vant-button>

页面 js 文件


  btnHandler1(e){
    this.updateNum1(e.target.dataset.step)
  },

5. 将 Store 中的成员, 绑定到组件中

组件

Component({
 behaviors: [ ],
 storeBindings:{ }
})

微信小程序Day4学习笔记_第94张图片

组件的 js 文件中

import {storeBindingsBehavior } from "mobx-miniprogram-bindings"
import {store } from "../../store/store"

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,  // 绑定字段的第 1 种方式
      numB: () => store.numB,  // 绑定字段的第 2 种方式
      sum: 'sum'               // 绑定字段的第 3 种方式
    },
    actions: {
      updateNum2: 'updateNum2'
    }
  },

6. 在组件中使用 Store 中的成员

微信小程序Day4学习笔记_第95张图片

组件的 wxml 文件


<view>{{numA}} + {{numB}} = {{sum}} </view>
<vant-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB + 1</vant-button>
<vant-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB - 1</vant-button>

组件中的 js 文件


import {storeBindingsBehavior } from "mobx-miniprogram-bindings"
import {store } from "../../store/store"

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,  // 绑定字段的第 1 种方式
      numB: () => store.numB,  // 绑定字段的第 2 种方式
      sum: 'sum'               // 绑定字段的第 3 种方式
    },
    actions: {
      updateNum2: 'updateNum2'
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    btnHandler2(e){
      this.updateNum2(e.target.dataset.step)
    }
  }


17. 分包

1. 什么是分包

在这里插入图片描述

2. 分包的好处

微信小程序Day4学习笔记_第96张图片

3. 分包前 - 项目的构成

项目体积过大
微信小程序Day4学习笔记_第97张图片

4. 分包后 - 项目的构成

微信小程序Day4学习笔记_第98张图片

5. 分包的 加载机制

tabBar - 主包
其他 非tabBar页面 - 分包(按照功能的不同)

微信小程序Day4学习笔记_第99张图片

6. 分包的 体积限制

微信小程序Day4学习笔记_第100张图片

2. 使用分包

1. 配置方法

在 app.json 的 subpackages 节点中,声明了分包的结构
微信小程序Day4学习笔记_第101张图片

2. 配置 - 实例(添加别名+查看分包体积)

用 app.json 的 subpackages 节点,声明分包的结构

微信小程序Day4学习笔记_第102张图片

“name” 分包的自定义名字(别名)

"pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "subpackages": [
    {
      "root": "pkgA",
      "name":"p1",
      "pages":[
        "pages/cat/cat"
      ]
    },
    {
      "root": "pkgB",
      "name":"p2",
      "pages":[
        "pages/apple/apple"
      ]
    }
  ],

详情基本信息 里可以查看分包的体积
微信小程序Day4学习笔记_第103张图片

3. 打包原则

微信小程序Day4学习笔记_第104张图片

4. 引用原则

微信小程序Day4学习笔记_第105张图片

3. 什么是独立分包

独立于主包,单独运行(不依赖主包)
微信小程序Day4学习笔记_第106张图片

区别

微信小程序Day4学习笔记_第107张图片

1. 独立分包的 应用场景

微信小程序Day4学习笔记_第108张图片

2. 独立分包的 配置方法

微信小程序Day4学习笔记_第109张图片

 "subpackages": [
    {
      "root": "pkgA",
      "name":"p1",
      "pages":[
        "pages/cat/cat"
      ]
    },
    {
      "root": "pkgB",
      "name":"p2",
      "pages":[
        "pages/apple/apple"
      ],
      "independent": true
    }
  ],

3. 引用原则

独立分包 - 普通分包 - 主包,相互隔绝。不能相互引用彼此的资源。
微信小程序Day4学习笔记_第110张图片

4. 什么是分包预下载

提前自动预下载
在这里插入图片描述

5. 配置 - 分包预下载

微信小程序Day4学习笔记_第111张图片

 "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "preloadRule": {
    "pages/contact/contact":{
      "packages": ["p1"],
      "network": "all"
    }
  },

网络只有两个选项,all 是所有网络,wifi 只能连 wifi中才显示
在这里插入图片描述

6. 分包预下载的 限制

体积加起来

微信小程序Day4学习笔记_第112张图片

18. 案例 - 自定义 tabBar

微信小程序Day4学习笔记_第113张图片

1. 实现步骤

微信小程序Day4学习笔记_第114张图片

声明一个 custom true就行,list 别删

"tabBar": {
    "custom": true,

2. 添加 tabBar 代码文件

在根目录下,custom-tab-bar 一定要叫这个名字。
微信小程序Day4学习笔记_第115张图片
这样设置,就会自动识别 tabBar
微信小程序Day4学习笔记_第116张图片
在这里插入图片描述

1. 调用 vant weapp的组件

微信小程序Day4学习笔记_第117张图片

组件
app.json 里声明

 "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"

微信小程序Day4学习笔记_第118张图片

wxml 中

<van-tabbar active="{{active}}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

js 中

// custom-tab-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    active:0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event){
      // event.detail 的值为当前选中项的索引
      this.setData({active: event.detail});
    },
  }
})

3. 自定义图标

在这里插入图片描述
在这里插入图片描述

自定义,选中,未选中的图标。文本平级声明
微信小程序Day4学习笔记_第119张图片

循环声明 tabbar

wxml

<van-tabbar active="{{active}}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index">
    <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" />
    <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

js 中,将app.json里 list的数据拿到 index.js 中。

 data: {
    active:0,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },

微信小程序Day4学习笔记_第120张图片

效果如上

组件 - 样式覆盖(美化右上角提示)

要开启 styleIsolation: ‘shared’
在这里插入图片描述

js

Component({
  options: {
    "styleIsolation": "shared" 
  },

wxss

.van-tabbar-item {
  --tabbar-item-margin-bottom: 0,
  
}

按照 js 中的 info 数字渲染(数字徽标)

info="{{item.info ? item.info : ''}}"

这是把数据 写死了的

{
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png",
        info: 2
      },

使用MobX(微信小程序官方文档)
微信小程序Day4学习笔记_第121张图片

import {storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import {store} from '../store/store'

Component({
  options: {
    "styleIsolation": "shared" 
  },
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:{
      sum: 'sum'
    },
    action: {
    },
  },
  observers:{
    'sum': function(val) {
      this.setData({
        'list[1].info':val
      })
    }
  },
  1. 导入成员
  2. 监听sum值变化
  3. 再重新赋值

4. 实现 TabBar页面的 - 切换效果

event.detail 的值为当前选中项的索引

 methods: {
    onChange(event){
      // event.detail 的值为当前选中项的索引
      this.setData({active: event.detail})
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }

5. 使用 store 存储,实现 tabBar 转换

组件的 js 文件

import {storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import {store} from '../store/store'

Component({
  options: {
    "styleIsolation": "shared" 
  },
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:{
      sum: 'sum',
      active: 'activeTabBarIndex'
    },
    action: {
      updateActive: 'updateActiveTabBarIndex',
    },
  },
  observers:{
    'sum': function(val) {
      this.setData({
        'list[1].info':val
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    "list": [
      {
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png",
        info: 0
      },
      {
        "pagePath": "/pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "/pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event){
      // event.detail 的值为当前选中项的索引
      // this.setData({active: event.detail}) 因为active是从store里映射过来的
      this.updateActive(event.detail);
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }
})

wxml

<van-tabbar active="{{active}}" bind:change="onChange">

6. 修改 tabBar 选中的颜色

API

active-color 标签

<van-tabbar active="{{active}}" bind:change="onChange" active-color="#13A7A0"><van-tabbar active="{{active}}" bind:change="onChange" active-color="#13A7A0">

微信小程序Day4学习笔记_第122张图片

19. 总结 - 使用 Vant 组件库

微信小程序Day4学习笔记_第123张图片

你可能感兴趣的:(微信小程序,前端学习,微信小程序,学习,javascript)