小程序-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来修改选中文本的颜色

相关推荐
2501_915918418 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106328 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
じòぴé南冸じょうげん16 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_9160137417 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184120 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张20 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩20 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
2501_915918412 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520862 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾2 天前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序