您的位置:首页 > 文旅 > 旅游 > 小程序-5(vant组件+全局数据共享+分包+tabBar案例)

小程序-5(vant组件+全局数据共享+分包+tabBar案例)

2024/10/14 9:23:41 来源:https://blog.csdn.net/2301_80486133/article/details/140516616  浏览:    关键词:小程序-5(vant组件+全局数据共享+分包+tabBar案例)

目录

1.使用npm包

小程序对npm的支持和限制

使用vant组件

使用CSS变量定制主题样式

API的promise化

2.全局数据共享

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

安装MobX相关的包

创建MobX的store实例

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

在页面上使用Store中的成员

将Store中的成员绑定到组件中

3.分包

分包的项目构成

分包的加载规则

分包的基本用法

打包原则和引用原则

独立分包

独立分包和分包的区别

独立分包的特点

引用原则

分包预下载

4.tabbar案例

初步实现自定义的tabbar效果

渲染tabBar上面的数字徽标

实现tabBar的切换效果


1.使用npm包

小程序对npm的支持和限制

使用vant组件

在app.json的usingComponents节点中引入想使用的组件,如按钮等,然后在wxml页面中使用<van-button></van-button>标签

使用CSS变量定制主题样式

在html文件中,为了方便修改样式,可以设置一个全局变量,在想用的地方进行引用,修改的时候也较为方便,在根节点处进行引用,也就是css中的html{}中

在wxss文件中,也要在根节点中设置全局变量,就是在page{}中设置,注意全局变量的前面都带有两个减号

API的promise化

小程序官方提供的异步API都是基于回调函数实现的,容易造成回调地狱的问题,代码可读性差、维护性差

API的promise化是通过额外的配置,将官方提供的、基于回调函数的异步API,改造为基于Promise的异步API,提高代码的可读性、维护性

在app.js文件中,只需调用一次promisfyAll()方法,如下图所示

2.全局数据共享

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

mobx-miniprogram  创建Store实例对象

mobx-miniprogram-bindings 把Store中的共享数据或方法,绑定到组件或页面中使用

安装MobX相关的包

创建MobX的store实例

使用mobx-miniprogram,并引入observable包,其中action是其中的一个方法

在下面的例子中,用一个新的变量来接数据,并使用了get方法返回二者之和;之后调用了action方法,修改store中的数据

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

现在页面中导入store方法

import{createStoreBindings} from 'mobx-miniprogram-bindings'

import{store}from'../../store/store'

在onLoad函数中使用fileds这个数组来接收数据,使用actions方法来调用函数

在页面上使用Store中的成员

将Store中的成员绑定到组件中

3.分包

分包的项目构成

主包:一般只包含项目的启动页面或者TabBar页面、以及所有分包都需要用到的一些公共资源

分包:只包含和当前分包有关的页面和私有资源

分包的加载规则

在启动小程序时,默认会下载主包并启动主包内界面,tabBar页面需要放到主包中

用户进入分包内某个界面时,客户端会把对应分包下载下来,下载完成后再进行展示;非tabBar页面可以按照功能的不同,划分为不同的分包之后,进行按需下载

小程序的分包大小:整个小程序的分包大小不超过16M(主包+所有分包);单个分包/主包不超过2M

分包的基本用法

在app.json文件中,使用subpackages来放置,root后面是主包的名字,还可以用name来给主包简写,每个主包下面还可以有多个页面表示分包

打包原则和引用原则

打包原则

tabBar页面必须在主包里,分包之间不能嵌套

引用原则

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

独立分包

独立分包和分包的区别

独立分包可以在不下载主包的情况下,独立运行

独立分包的特点

一个主包可以有多个独立分包,独立分包的不同之处在于它有属性independent:true

引用原则

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

格外注意的是:独立分包不能引用主包内的公共资源

分包预下载

在app.json文件中,使用preloadRule节点定义分包的预下载规则,其中第一行放置页面路径,packages指定预下载哪些分包,network指定在哪种网络下进行预下载

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

4.tabbar案例

初步实现自定义的tabbar效果

首先,创建一个custom-tab-bar文件夹,在文件夹中创建一个组件inde;x在app.json文件下的usingComponents方法中加上"van-tabbar":"@vant/weapp/tabbar/index"  和  "van-tabbar-item":"@vant/weapp/tabbar-item/index",并在tabBar中的list前面添加上custom:true

之后,在index.js文件中的data数据中复制list中的全部数据;在index.wxml文件中,通过使用wx:for循环来获得list中的所有数据,在自定义图标中,使用slot="icon"表示为未选中的图标,而slot="icon-active"表示选中的图标,将对应的图标路径放在后面,在放置完图标后可以直接写图标名字item.text

渲染tabBar上面的数字徽标

在自定义图标时,发现图标与文字之间的距离过大,导致徽标出线,这时可以修改wxss的全局样式,不过要先在js文件的Component函数中写一个options方法,其中放置styleIsolation:"shared"函数,之后再去修改全局样式

实现数字徽标的自动呈现,需要以下几步:

首先,是全局数据共享,调用了前面的store文件,所以先在index.js文件中导入store文件,并在Component函数中与data齐步的位置放置behaviors函数,之后就调用storeBindings函数来接收数据;通过监听器,来判断数据是否有变化,并在该步骤将数据赋值给对应的图标

然后,在index.wxml文件中使用三元判断,来对列表中的元素info值是否为空进行判断,不为空则进行显示item.info               info="{{item.info ? item.info : ' '}}"

实现tabBar的切换效果

首先,将数据放置在store.js文件中,定义activeTabBarIndex为0,再使用updateActiveTabBarIndex方法接收数据

之后,在index.js文件中使用wx.switch()转换方法实现转换,这里用的是根路径,所以要修改list中的路径,在前面都加上/

使用active-color来修改选中文本的颜色    

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com