< view > 这里是组件的内部结构 < slot name = " after " > _微信小程序 改造">
devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序开发教程笔记Day04_微信小程序 改造

作者：繁依Fanyi0 | 2024-03-25 20:32:55

赞

踩

微信小程序 改造

自定义组件

1.创建组件

  1. 在项目的跟目录中中，鼠标右键，创建components->test文件夹
  2. 在新建的component->test文件夹上，鼠标右键，点击"新建Component"
  3. 键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为.js，.json，.wxml和.wxss
  4. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7dct5xUv-1692706071430)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230820204704122.png)]

2.引用组件

组件的引用方式分为局部引用和全局引用

  • 局部引用：组件只能在当前被引用的页面内使用

  • 全局引用：组件可以在每个小程序页面中使用

3.局部引用

在页面的.json配置文件中引用组建的方式，叫做局部引用

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

  • 1
  • 2
  • 3
  • 4
  • 5
<view>1</view>
<my-test1></my-test1>

  • 1
  • 2

4.全局引用

在app.json全局配置文件中引用组件的方式，叫做全局组件

5.全局引用VS局部引用

  • 如果某个组件在多个页面中经常被用到，建议全局引用
  • 如果某个组件在特定的页面中被用到，建议局部引用

6.组件和页面的区别

  • 组件的.json文件中需要声明"component":true属性
  • 组件的.js文件中调用的时Component()函数
  • 组件的事件处理函数需要定义到methods节点中

样式

1.组件样式隔离

默认情况下，自定义组件的样式支队当前组件生效，不会影响到组件之外的UI结构

  • 组件A的样式不会影响组件C的样式
  • 组件A的样式不会影响向程序页面的样式
  • 小程序页面的样式不会影响组件A和C的样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3uUKNyYg-1692706071431)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230820211345566.png)]

好处：

  • 防止外界的样式影响组件内部的的样式
  • 防止组件的样式破坏外界的样式

2.组件样式隔离的注意点

  • app.wsxx中的全局样式对组件无效

    .g-red-text{
  color:red;
}


    • 1
    • 2
    • 3
    • 4
    <view class="g-red-text">1</view>

    • 1
    <text class="g-red-text">components/test1/test1.wxml</text>

    • 1

    1变红，test1没有变红

  • 只有class选择器会有样式隔离效果，id选择器，属性选择器，标签选择器不受样式隔离的影响

text{
  font-size: 25rpx;
}

  • 1
  • 2
  • 3

组件和页面字体统一发生变化

建议：在组件和引用组件的页面中建议使用class选择器，不要使用id，属性，标签选择器！

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

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式相互干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过styelsolation修改组件的样式隔离选项

4.styleisolation的可选值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jBeBgGJN-1692706071431)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230820212946090.png)]

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

  • 1
  • 2
  • 3
  • 4

数据，方法和属性

1.data数据

在小程序组件中，用于组件模板渲染的私有数据，需要顶地道data节点中

 data: {
      count:0
  },

  • 1
  • 2
  • 3

2.methods方法

在小程序组件中，事件处理函数和自定义方法需要定义到methodes节点中

<view>count的值是{{count}}</view>
<button bind:tap="addCount">+1</button>

  • 1
  • 2
 methods: {
    addCount(){
      this.setData({
        count:this.data.count+1
      })
      this._showCount()
    },
    _showCount(){
      wx.showToast({
        title: 'count是'+this.data.count,
      })
    }

  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

3.properties属性

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据

<my-test1 max="12"></my-test1>

  • 1

简化定义

完整定义

  prop
  erties: {
      max:Number,
      max2:{
          type:Number,
          value:10
      }
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

properties属性的使用

if(this.data.count>=this.properties.max) return 

  • 1

4.data和properties的区别

在小程序中，properties属性和data数据的用法相同，他们都是可读可写的，只不过：

  • data数据更倾向于存储组件的私有数据
  • properties更倾向于存储外界传递到组件中的数据
<button bind:tap="showInfo">showInfo</button>

  • 1
    showInfo(){
      console.log(this.data)
      console.log(this.properties)
      console.log(this.data === this.properties)
    }

  • 1
  • 2
  • 3
  • 4
  • 5

5.使用setData修改properties的值

由于data数据和properties属性在本质上没有任何区别，引起properties属性的值也可以用于页面渲染，或使用setData为properties中的属性重新赋值

<view>max的值是{{max2}}</view>

  • 1
      this.setData({
        count:this.data.count+1,
        max2:this.properties.max2+1
      })

  • 1
  • 2
  • 3
  • 4

数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。他的作用类似于vue中的watch侦听器。在小程序组件中，数据监听器的基本语法格式

1.数据监听器的基本用法

<view>{{n1}}+{{n2}}={{sum}}</view>
<button bind:tap="addNum1">n1+1</button>
<button bind:tap="addNum2">n2+1</button>

  • 1
  • 2
  • 3
  data: {
      n1:0,
      n2:0,
      sum:0
  },

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

2.监听对象属性的变换

数据监听器支持监听对象中的单个或多个属性的变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81Zjsefs-1692706071431)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230821105715552.png)]

3.数据监听器案例

<text>components/test3/test3.wxml</text>
<view style="background-color: rgb({{rgbColor}});" class="colorBox">{{rgbColor}}</view>
<button size="mini" bind:tap="changeR" type="default">R</button>
<button size="mini" bind:tap="changeG" type="primary">G</button>
<button size="mini" bind:tap="changeB" type="warn">B</button>
<view>{{rgb.r}},{{rgb.g}},{{rgb.b}}</view>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
.colorBox{
  line-height: 200rpx;
  font-size: 24rpx;
  color: white;
  text-shadow: 0rpx 0rpx 2rpx black;
  text-align: center;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  data: {
    rgb:{
      r:0,
      g:0,
      b:0
    },
    rgbColor:'0,0,0'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    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
      })
    }
  },
  observers:{
    'rgb.r,rgb.g,rgb.b':function(r,g,b){
      this.setData({
        rgbColor:`${r},${g},${b}`
      })
    }
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

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

如果某个对象需要被监听的属性太多，为了方便，可以使用通配符**来监听对象中所有属性的变化

 observers:{
    'rgb.**':function(obj){
      this.setData({
        rgbColor:`${obj.r},${obj.g},${obj.b}`
      })
    }
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

纯数据字段

纯数据字段指的是那些不用于界面渲染的data字段

应用场景：某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内容使用。带有这种特性的data字段适合被设置为纯数据字段

好处：纯数据字段有助于提升页面更新的性质

1.使用规则

在Compment构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合整个正则表达式的字段将成为纯数据字段

  options:{
  pureDataPattern:/^_/
  },

  • 1
  • 2
  • 3

2.使用纯数据字段改造数据监听器案例

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

  },

  /**
   * 组件的初始数据
   */
  data: {
    _rgb:{
      r:0,
      g:0,
      b:0
    },
    rgbColor:'0,0,0'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    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
      })
    }
  },
  observers:{
    '_rgb.**':function(obj){
      this.setData({
        rgbColor:`${obj.r},${obj.g},${obj.b}`
      })
    }
  }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

组件的生命周期

1.组件全部的生命周期函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ja1dzpsq-1692706071432)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230821135250203.png)]

2.组件主要的生命周期函数

在小程序组件中，最重要的三个生命周期函数，created，attached，detached。

  • 组件实例刚被创建好的时候，created生命周期函数会被触发
    • 此时还不能调用setData
    • 通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段
  • 在组件完全初始化完毕，进入页面节点树后，attached生命周期函数会被触发
    • 此时，this.data已被初始化完毕
    • 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始化数据）
  • 在组件离开页面节点树后，detached生命周期函数会被触发
    • 退出一个页面后，会触发页面内每个自定义组件的detached生命周期函数
    • 此时适合做一些清理性质的工作

3.lifetimes节点

在小程序组件中，生命周期函数可以直接定义在Component构造器的第一级参数中，可以在lifetimes字段内进行声明（这是推荐的方式，其优先级最高）

  lifetimes:{
    created(){
      console.log('created~~~')
    },
  }

  • 1
  • 2
  • 3
  • 4
  • 5

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

自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。

例如：每当触发页面的show生命周期函数的时候，我们希望能够重新生成一个随机的RGB颜色值。

在自定义组件中，组件所在页面的生命周期函数有如下三个

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKqj3cLK-1692706071432)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230821141047745.png)]

5.pageLifetimes节点

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

  pageLifetimes:{
    show:function(){},
    hide:function(){},
    resize:function(size){}
  }

  • 1
  • 2
  • 3
  • 4
  • 5

6.生成随机的RGB颜色值

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

插槽

在自定义组件的wxml结构中，可以提供一个节点（插槽），用于承载组件使用者提供的wxml结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IQgUnptC-1692706071432)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230821142618256.png)]

1.单个插槽

在小程序中，默认每个自定义组件只允许使用一个进行占位，这种个数上的限制叫做单个插槽

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

  • 1
  • 2
  • 3
  • 4
<my-test4>
  <text>1</text>
</my-test4>

  • 1
  • 2
  • 3

2.启用多个插槽

在小程序的自定义组件中，需要使用多个插槽时，可以在组件的.js文件中，通过如下方式进行启用

options:{
    multipleSlots:true
    },

  • 1
  • 2
  • 3

3.定义多个插槽

可以在组件的.wxml中使用多个标签，以不同的name来区分不同的插槽

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

  • 1
  • 2
  • 3
  • 4
  • 5
<my-test4>
  <text slot="before">1</text>
  <text slot="after">2</text>
</my-test4>

  • 1
  • 2
  • 3
  • 4

父子组件之间的通信

1.父子组件之间通信的三种方式

属性绑定

  • 用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据

事件绑定

  • 用于子组件向父组件传递数据，可以传递任意数据

获取组件实例

  • 父组件还可以通过this.selectCompinent（）获取子组件实例对象
  • 这样就可以直接访问子组件的任意数据和方法

2.属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。

子组件在properties节点中声明对应的属性并使用

在父组件中

<view>父组件中，count值是{{count}}</view>
<my-test4 count="{{count}}"></my-test4>

  • 1
  • 2
  data: {
      count :1
  },

  • 1
  • 2
  • 3

在子组件中

<view>子组件中，count值是{{count}}</view>


  • 1
  • 2
  properties: {
      count:Number
  },

  • 1
  • 2
  • 3

3.事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据

  1. 在父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
  2. 在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件
  3. 在子组件的js中，通过调用this.triggerEvent(‘自定义事件名称’，{/参数对象/})，将数据发送到父组件
  4. 在父组件的js中，通过e.detail获取到子组件传递过来的数据
syncCount(e){
  this.setData({
    count:e.detail.value
  })
},

  • 1
  • 2
  • 3
  • 4
  • 5
<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>

  • 1
  methods: {
    addCount(){
        this.setData({
          count:this.properties.count+1
        })
        this.triggerEvent('sync',{value:this.properties.count})
      },   
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

4.获取组件实例

可在父组件里调用this.selectComponent(“id或class选择器”)，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器。

<my-test5 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test5>
<button bind:tap="getChild">获取子组件实例对象</button>

  • 1
  • 2
getChild(){
  const child = this.selectComponent('.customA')
  child.setData({count:child.properties.count+1})
  child.addCount()
},

  • 1
  • 2
  • 3
  • 4
  • 5

behaviors

behaviors是小程序中，用于实现组件间代码共享的特性，类似于Vue.js中的"mixins"

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cGBLC1Nt-1692706071433)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230821154631648.png)]

1.behaviors的工作方式

每个behavior可以包含一组属性，数据，生命周期函数和方法。组件引用他时，他的属性，数据和方法会被合并到组件中

每个组件可以引用多个behavior，behavior也可以引用其他behavior

2.创建behavior

调用Behavior（Object object）方法即可创建一个共享的behavior实例对象，供所有的组件使用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PKmsLOZd-1692706071433)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230821155449350.png)]

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3.导入并使用behavior

在组件中，使用require()方法导入需要的behavior，挂载后即可访问behavior中的数据或方法

const myBehavior = require("../../behaviors/my-behavior")
Component({
  behaviors:[myBehavior],

  • 1
  • 2
  • 3

4.behavior中所有可用的节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W5JJrVRJ-1692706071433)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230821160232874.png)]

5.同名字段的覆盖和组合规则（了解）

组件和他引用的behavior中可以包含同名的字段，三种同名时的处理规则

  1. 同名的数据字段（data）
  2. 同名的属性（properties）或方法（methods）
  3. 同名的声明周期函数

使用npm包

小程序对npm的支持和限制

目前，小程序中已经支持使用npm安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用npm包有三个限制

  • 不支持依赖于Node.js内置库的包
  • 不支持依赖于浏览器内置对象的包
  • 不支持支持与C++插件的包

总结：虽然npm上的包有千千万，但是能供小程序使用的包却为数不多

Vant Weapp

Vant Weapp官网

vant weapp是有赞前端团队开源的一套小程序UI组件库，助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议，对商业使用比较友好

1.安装Vant组件库

在小程序项目中，安装Vant组件库主要分为如下3步

  1. 通过npm安装（建议指定版本为@1.3.3）
  2. 构建npm包
  3. 修改app.json

①

在微信开发工具中打开终端，输入npm init -y 初始化包管理配置文件，名字为package.json

这里如果出现下面这种情况，需要安装node.js 安装结束之后看一下环境变量是否配置好，电脑重启之后就可以正常使用了

node官网

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tp1mpUqi-1692706071433)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230821164703801.png)]

②

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIVkmQjq-1692706071434)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230821171624504.png)]

新版本的微信开发者工具已经默认支持npm了，不需要再手动配置改选项了。现在使用微信开发者工具可以直接安装模块，然后进行构建了。

③

将app.json的"style":"v2’'去除

④

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RXPws5a6-1692706071434)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230821171836690.png)]

2.使用Vant组件

安装玩Vant组件库之后，可以在app.json的usingComponents节点中引入需要的组件，即可在wxml中直接使用组件

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

  • 1
  • 2
  • 3
<van-button type="primary">按钮</van-button>

  • 1

3.定制全局主题样式

VantWeapp使用CSS变量来实现定制主题，具体用法参考MDN文档

MDN

  • 定义样式

引用样式

在app.wxss中，写入css变量，即对全局生效

page{  
--button-danger-background-color:#C00000；
--button-danger-borderr-color:#D60000；
}

  • 1
  • 2
  • 3
  • 4

这里我出现了覆盖的问题 应该是包安装版本问题

API Promise化

1.基于回调函数的异步API的缺点

默认情况下，小程序官方提供的异步API都是基于回调函数实现的

缺点：容易造成回调地狱的问题，代码的可读性，维护性差

2.什么是API Promise化

通过额外的配置，将官方提供的，基于回调函数的异步API，升级改造为基于Promise的异步API，从而提高代码的可读性，维护性，避免回调地狱的问题

3.实现API Promise化

在小程序中，实现API Promise化主要依赖于miniprogram-api-promise这个第三方的nmp包。

安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CYiYHSfk-1692706071434)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230822101858228.png)]

每次安装完新的npm包都需要进行构建

import {promisifyAll} from 'miniprogram-api-promise'

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

  • 1
  • 2
  • 3
  • 4

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

<van-button type="primary" bind:tap="getInfo">按钮</van-button>

  • 1
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)
},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

全局数据共享

全局数据共享（状态管理）是为了解决组件之间数据共享的问题

开发中常用的全局数据共享方案用：Vuex，Redux，MobX等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BZ1n9B0y-1692706071434)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230822104435319.png)]

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

在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bingdings实现全局数据共享。

  • mobx-miniprogram用来创建Store实例对象
  • mobx-miniprogram-bindings用来把Store中的共享数据或方法，绑定到组件或页面中使用

2.MobX

1.安装MobX相关的包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tf5KYxLs-1692706071435)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230822105311483.png)]

注意：相关包安装完毕之后，记得删除miniprogram-npm目录后，重新构建npm

2.创建MobX的Store实例

创建一个store.js文件

import {observable,action} from'mobx-miniprogram'

export const store = observable({
  numA:1,
  numB:2,

  get sum(){
    return this.numA+this.numB
  },
updateNumA:action(function(step){
  this.numA+=step
}),
updateNumB:action(function(step){
  this.numB+=step
}),
})


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

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

<view>{{numA}}+{{numB}} = {{sum}}</view>
<van-button type="primary" bind:tap="btnHander" data-step="{{1}}">
numA+1
</van-button>
<van-button type="primary" bind:tap="btnHander" data-step="{{-1}}">
numA-1
</van-button>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
import{createStoreBindings} from'mobx-miniprogram-bindings'
import{store} from'../../store/store'
...
btnHander(e){
  this.updateNumA(e.target.dataset.step)
},
onLoad(options) {
      this.storeBindings = createStoreBindings(this,{
        store,
        fields:['numA','numB','sum'],
        actions:['updateNumA']
      })
  },
onUnload() {
      this.storeBindings.destoryStoreBindings()
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

4.将Store中的成员绑定到组件中，在组件中使用Store中的成员

<text>components/numbers/numbers.wxml</text>
<van-button type="primary" bind:tap="btnHander2" data-step="{{1}}">
numB+1
</van-button>
<van-button type="primary" bind:tap="btnHander2" data-step="{{-1}}">
numB-1
</van-button>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
// components/numbers/numbers.js
import{ storeBindingsBehavior} from'mobx-miniprogram-bindings'
import{store} from'../../store/store'
Component({
  behaviors:[storeBindingsBehavior],
  /**
   * 组件的属性列表
   */
  storeBindings:{
    store,
    fields:{
      numA:()=>store.numA,
      numB:(store)=>store.numB,
      sum:'sum'
    },
    actions:{
      updateNumB:'updateNumB'
    }
  },
  properties: {

  },

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

  },

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

})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建是打包成不同的分包，用户在使用是按需进行加载。

1.对小程序进行分包的好处

  • 可以优化小程序首次启动的下载事件
  • 在多团队共同开发时可以更好的解耦协作

2.分包前项目的构成

分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间

3.分包后项目的构成

分包后，小程序项目由1个主包+多个分包组成：

  • 主包：一般只包含项目的启动页面或TabBar页面，以及所有分包都需要用到的一些公共资源
  • 分包：只包含和当前分包有关的页面和私有资源

4.分包的加载规则

  1. 小程序启动时，默认会下载主包并启动主包内页面

    tabBar页面需要放在主包内

  2. 当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

    非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

5.分包的体积限制

目前，小程序分包的大小由以下两个限制

  • 整个小程序所有分包大小不超过16M
  • 单个分包/主包大小不能超过2M

6.使用分包

1.配置方法

 "subPackages": [
    {
      "root": "pkgA",
      "name": "animal",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dpg"
      ]
    },
    {
      "root": "pkgB",
      "name": "fruits",
      "pages": [
        "pages/apple/apple",
        "pages/banana/banana"
      ]
    }
  ],

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

2.打包原则

  • 小程序会按subpackages的配置进行分包，subpackages之外的目录将被打包到主包中
  • 主包也可以有自己的pages（即最外层的pages字段）
  • tabBar页面必须在主包内
  • 分包之间不能相互嵌套

3.引用原则

  • 主包无法引用分包内的私有资源
  • 分包之间不能相互引用私有资源
  • 分包可以引用主包的公共资源

7.独立分包

独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行

1.独立分包和普通分包的区别

最主要的区别：是否依赖于主包才能运行

  • 独立分包必须依赖于主包才能运行
  • 独立分包可以在不下载主包的情况下，独立运行

2.独立分包的应用场景

开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中

  • 当小程序从普通的分包页面启动时，需要首先下载主包
  • 而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的而启动速度

注意：一个小程序中可以由多个独立分包

3.独立分包的配置方法

"independent": true

  • 1

4.引用原则

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源

  • 主包无法引用独立分包内的私有资源
  • 独立分包之间，不能相互引用私有资源
  • 独立分包和普通分包之间，不能相互引用私有资源
  • 特别注意：独立分包中不能引用主包内的公共资源

8.分包预下载

在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度

1.配置分包的预下载

预下载分包行为，会在进入指定的页面时触发。在app.json中，使用preloadRule节点定义分包的预下载规则

 "preloadRule": {
    "pages/contact/contact":{
      "network": "all",
      "packages": ["pkgA"]
    }
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

2.分包预下载的限制

同一个分包中页面享有共同的预下载大小限额2M

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KTp7eSNX-1692706071435)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230822153849238.png)]

案例 -自定义tabBar

1.实现步骤

  1. 配置信息
  2. 添加tabBar代码文件
  3. 编写tabBar代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eanvDC03-1692706071435)(C:\Users\28183\AppData\Roaming\Typora\typora-user-images\image-20230822194411272.png)]

在app.json中

"custom": true,

  • 1
// custom-tab-bar/index.js
import{storeBindingsBehavior} from'mobx-miniprogram-bindings'
import{store} from'../store/store'
Component({
  behaviors:[storeBindingsBehavior],
  options:{
    styleIsolation:'shared'
  },
  /**
   * 组件的属性列表
   */
  storeBindings:{
    store,
    fields:{
      sum:'sum',
      active:'activeTabBarTndex'
    },
    actions:{
      updateActive:'updateActiveTabBarIndex'
    }
  },
  observers:{
      'sum':function(val){
        this.setData({
          'list[1].info':val
        })
      }
  },
  properties: {

  },

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


  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.updateActive(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    }
  }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#13A7A0">
<van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info?item.info:''}}">
    <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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
/* custom-tab-bar/index.wxss */
.van-tabbar-item{
  --tabbar-item-margin-bottom:0;
}

  • 1
  • 2
  • 3
  • 4

“/images/message.jpg”,
“selectedIconPath”: “/images/message-active.jpg”,
info:2
},
{
“pagePath”: “/pages/contact/contact”,
“text”: “联系我们”,
“iconPath”: “/images/contact.jpg”,
“selectedIconPath”: “/images/contact-active.jpg”
}]
},

/**

  • 组件的方法列表
    */
    methods: {
    onChange(event) {
    // event.detail 的值为当前选中项的索引
    this.updateActive(event.detail)
    wx.switchTab({
    url: this.data.list[event.detail].pagePath,
    })
    }
    }
    })

```xml
<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#13A7A0">
<van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info?item.info:''}}">
    <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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
/* custom-tab-bar/index.wxss */
.van-tabbar-item{
  --tabbar-item-margin-bottom:0;
}

  • 1
  • 2
  • 3
  • 4
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/312318
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号