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

最新推荐文章于 2025-06-01 16:26:55 发布
最新推荐文章于 2025-06-01 16:26:55 发布
阅读量1.4k 收藏 8
点赞数 13
CC 4.0 BY-SA版权
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2301_80486133/article/details/140516616

目录

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-miniprogr

最低0.47元/天 解锁文章

200万优质内容无限畅学
【小程序-基础进阶】Vant Weapp，API Promise化，全局数据共享，分包（独立分包、分包预下载）
zilin_taku的博客
10-26 983
开发中常用的全局数据共享方案有: Vuex、Redux、Mobx等。全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。，从而提高代码的可读性、维护性，避免回调地狱的问题。Vant Weapp是有赞前端团队开源的一套。，助力开发者快速搭建小程序应用。，将官方提供的、基于回调函数的异步API，升。分包预下载指的是：在进入小程序的某个页面时，，在构建时打包成不同的分包，用户在使用时。，从而提升进入后续分包页面时的启动速度。，对商业使用比较友好。，只不过它比较特殊，
微信小程序 五 npm 包 、安装 vant组件、promise组件、全局数据共享、 分包！！！、自定义 tabBar 案例
m0_55170432的博客
07-09 746
1.0 使用 npm 包 1.1 小程序对 npm 的支持与限制 目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下 3 个限制： 不支持依赖于 Node.js 内置库 的包 不支持依赖于 浏览器内置对象 的包 不支持依赖于 C++ 插件 的包 总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却“为数不多”。 1.2 Vant Weapp Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小
vant picker+popup 自定义三级联动案例
01-21
picker选择器的数据由columns属性控制，columns中有几个元素就代表该选择器有多少级，通过change方法来给对应列赋值。 columns = [{ values: column1, // 对应列的值 defaultIndex: 0, // 默认选中项索引 className: 'class1' // 对应列的类名 }, { values: [], defaultIndex: 0, className: 'class2' }, { values: [], defaultIndex: 0, c
vant实例
w1374401940的博客
05-07 3043
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min...
微信小程序首页与分类功能实现及Vant组件应用
最新发布
weixin_42466723的博客
06-01 642
微信小程序，作为一种新型的移动应用形式，它具备了无需下载安装即可使用的特性，与普通应用相比，拥有即开即用、触手可及的便捷优势。小程序通过微信内部的搜索、扫码等途径轻松触达用户，极大地降低了用户获取应用的成本，同时赋予了开发者和企业一种全新的触达用户的渠道。开发微信小程序的首要目标是实现快速开发、上线和迭代，以便快速响应市场和技术的变化。其次，目标是提高用户体验，无论是流畅度还是易用性，都要力求做到极致。此外，还要注重小程序的业务目标，例如增加销售、提升品牌知名度或者优化顾客服务。
vant 组件van-tabbar实现底部导航
yeyazi001的博客
04-06 5946
移动端小白，首次尝试移动H5开发，使用vant2的van-tabbar实现底部导航功能。本文忽略vant使用步骤，项目中使用全局引用。由于查询很多文章有的过于复杂，有的功能未实现，所以简单整理如有问题欢迎留言改正。底部导航栏简单实现，需要注意的是，组件是需要在所有需要使用的页面进行引用。所以将底部导航栏组合起来封装成一个组件。
小程序基本命令
aiven1637的博客
10-30 3446
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
如何使用vant配置Tabbar
jakelihua
06-11 3361
vant如何创建Tabbar,vue如何创建Tabbar
【微信小程序】学习拾遗四（Promise、全局数据/全局状态、自定义Tabbar、引入Vant组件）
世间小学徒
12-20 356
自定义tabBar,全局变量,引入外部包,引入Vant组件
微信小程序学习笔记(五) npm包+全局数据共享+分包
kianagrow的博客
11-06 600
微信小程序学习笔记(五) npm包+全局数据共享+分包
微信小程序使用van组件Tabbar 标签栏
小香菜子的博客
05-15 1996
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。（8）按需引入，在对应的page页面的 .json文件中的usingComponents属性中通过路径找到@vant引入你想使用的组件。（2）与pages同名创建custom-tab-bar文件夹（名字不能变），并创建index组件（tabbar自定义组件）（1）打开我们小程序的项目目录，然后打开文件所在的位置。（5）修改 app.json。
Vue vant 上拉加载 下拉刷新实际案例源码模板
05-18
vant 上拉加载 下拉刷新实际案例源码模板。你可以用请求的数据放到模板里面可以直接使用，不需要改啥，只需要复制，粘贴 就 o j b k 了。
20.自定义tabBar(使用vant中的tabbar)
potato123232的博客
07-09 5271
自定义图标就要用这个东西首先搞wxml，我当前的index.wxml是这样的<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>
vant搭建页面的小例子
snow刺客的博客
10-04 1014
使用vant2组件库工具+vue2构建页面的小例子，用cdn的方式引入包文件
20220117
菜鸡成长站
01-17 840
[今天麻了，不太想学习，两天没跟活人说话了，麻了，随意记记] API Promise化 什么是 API Promise 化 API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题 全局数据共享 创建 MobX 的 Store 实例 将 Store 中的成员绑定到页面中 4. 在页面上使用 Store 中的成员 5. 将 Store 中的成员绑定到组件中 6
如何在微信小程序使用vant 进行自定义底部tabbar组件
唐家小妹的博客
06-21 1430
van-tabbar-item icon="home-o">首页</van-tabbar-item><van-tabbar-item icon="friends-o">我的</van-tabbar-item>active: {value: 0},methods: {case 0:});break;default:});});比如 my.wxml和home.wxml。
前端第三方插件
聂培志的博客
11-28 325
动画 tweenmax js动画库 tweenJS js动画库 easeljs js列表动画 animation css动画 音频/视频 soundjs 处理音频 资源加载 preloadjs 预加载 图标 awesome css图标库 阿里iconfont 自定义图标 图表 d3Js 绘制图表 chartJS H5绘制图表 pdf js...
vant组件库——网易云音乐案例
weixin_45998300的博客
04-01 2175
自定义组件内标签+内容 1.准备MyTable.vue组件（子） – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里 2.准备UseTable.vue（父） – 准备数据传入给MyTable.vue使用 ...
【微信小程序】实现组件间代码共享的behaviors
薇z的博客
08-31 490
【微信小程序】实现组件间代码共享的behaviors
移动端开发骨架包-Vue+Vant+Axios+VueRouter实现
3. Vant组件库的应用：Vant是为Vue.js移动端开发的组件库，提供了丰富的移动端组件，如按钮、输入框、导航栏等。在移动端开发中，开发者可以使用Vant来快速实现界面元素的搭建，提升开发速度和界面的美观度。 4. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值