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

news2024/11/10 22:49:47

目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1936327.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pyqt/pyside QTableWidget失去焦点后,选中的行仍高亮的显示

正常情况下pyqt/pyside的QTableWidget&#xff0c;点击input或者按钮失去焦点后 行的颜色消失了 如何在失去焦点时保持行的选中颜色&#xff0c;增加下面的代码&#xff1a; # 获取当前表格部件的调色板 p tableWidget.palette()# 获取活跃状态下的高亮颜色和高亮文本颜色&a…

防火墙内容安全综合实验

一、实验拓扑 二、实验要求 1&#xff0c;假设内网用户需要通过外网的web服务器和pop3邮件服务器下载文件和邮件&#xff0c;内网的FTP服务器也需要接受外网用户上传的文件。针对该场景进行防病毒的防护。 2&#xff0c;我们需要针对办公区用户进行上网行为管理&#xff0c;要…

仿源码大师主界面UI的iAPP源文件

仿源码大师首页主界面的布局 首页&#xff0c;分类&#xff0c;需求&#xff0c;我的 就只有这几个界面内容而已 资源静态 没有任何动画和功能 纯UI布局 纯UI布局 他的最新版已经不是这个UI布局 放心使用 以学习参考为目的&#xff0c;如有不妥望告知 原创&#xff0c;纯…

国内微短剧系统平台抖音微信付费小程序app开发源代码交付

微短剧作为当下热门的内容&#xff0c;结合抖音平台的广泛用户基础&#xff0c;开发微短剧付费小程序APP具有显著的市场潜力&#xff0c;用户对于短剧内容的需求旺盛&#xff0c;特别是在言情、总裁、赘婿等热门题材方面&#xff0c;接下来给大家普及一下微短剧小程序系统。 顺…

数据结构(5.2_3)——二叉树的存储结构

二叉树的顺序存储 #define MAXLEN 255struct TreeNode {ElemType value;//结点中的数据元素bool isEmpty;//结点是否为空 };void main() {TreeNode t[MaxSize]; } 定义一个长度为MaxSize的数组t&#xff0c;按照从上至下、从左至右的顺序依次存储完全二叉树中的各个结点 几个…

【matlab 投影寻踪】基于PSO算法的最优投影方向优化

一 投影寻踪算法 投影寻踪是处理和分析高维数据的一类统计方法&#xff0c;其基本思想是将高维数据投影到低维&#xff08;1&#xff5e;3维&#xff09;子空间上&#xff0c;寻找出反映原高维数据的结构或特征的投影&#xff0c;以达到研究和分析高维数据的目的。1974年&…

Linux下开放指定端口

比如需要开放82端口&#xff1a; #查询是否开通 firewall-cmd --query-port82/tcp#开放端口82 firewall-cmd --zonepublic --add-port82/tcp --permanent#重新加载防火墙 firewall-cmd --reload

云原生系列 - Jenkins

Jenkins Jenkins&#xff0c;原名 Hudson&#xff0c;2011 年改为现在的名字。它是一个开源的实现持续集成的软件工具。 官方网站&#xff08;英文&#xff09;&#xff1a;https://www.jenkins.io/ 官方网站&#xff08;中文&#xff09;&#xff1a;https://www.jenkins.io…

2024“钉耙编程”中国大学生算法设计超级联赛(1)

Rank 待补1003树&#xff0c;1005博弈&#xff0c;1012并。 星星 - HDU 7434 - Virtual Judge 这题第一眼云的时候感觉是贪心&#xff0c;后来要上手写代码感觉无从下手&#xff0c;遂反映过来是动态规划。 然后就是一个很简单的dp&#xff0c;外层枚举物品&#xff0c;里面枚举…

多类别支持向量机(Multi-class SVM)

多类别支持向量机&#xff08;Multi-class SVM&#xff09;是一种扩展二分类支持向量机以处理多类别分类问题的方法。常见的方法有“一对一”&#xff08;one-vs-one&#xff09;和“一对多”&#xff08;one-vs-rest&#xff09;。 一、数学模型理论推导 1.1 一对多&#xf…

时间卷积网络(TCN):序列建模的强大工具(附Pytorch网络模型代码)

1. 引言 引用自&#xff1a;Bai S, Kolter J Z, Koltun V. An empirical evaluation of generic convolutional and recurrent networks for sequence modeling. arXiv[J]. arXiv preprint arXiv:1803.01271, 2018, 10. 时间卷积网络&#xff08;Temporal Convolutional Networ…

Six common classification algorithms in machine learning

分类算法是一种机器学习算法&#xff0c;其主要目的是从数据中发现规律并将数据分成不同的类别。分类算法通过对已知类别训练集的计算和分析&#xff0c;从中发现类别规则并预测新数据的类别。常见的分类算法包括决策树、朴素贝叶斯、逻辑回归、K-最近邻、支持向量机等。分类算…

减分兔搜题-12123学法减分20题目及答案 #媒体#职场发展

对于即将参加驾驶考试的朋友来说&#xff0c;掌握一些经典题目和答案至关重要。今天&#xff0c;我就为大家带来了这样一份干货——20道驾驶考试题目和答案&#xff0c;助你轻松应对考试&#xff01;这些题目不仅包括了考试中常考的内容&#xff0c;还有针对难点和重点的详细解…

​数据结构之初始二叉树(3)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构&#xff08;Java版&#xff09; 二叉树的基本操作 通过上篇文章的学习&#xff0c;我们简单的了解了二叉树的相关操作。接下来就是有…

前端组件化技术实践:Vue自定义顶部导航栏组件的探索

摘要 随着前端技术的飞速发展&#xff0c;组件化开发已成为提高开发效率、降低维护成本的关键手段。本文将以Vue自定义顶部导航栏组件为例&#xff0c;深入探讨前端组件化开发的实践过程、优势以及面临的挑战&#xff0c;旨在为广大前端开发者提供有价值的参考和启示。 一、引…

从微软发iPhone,聊聊企业设备管理

今天讲个上周的旧闻&#xff0c;微软给员工免费发iPhone。其实上周就有很多朋友私信问我&#xff0c;在知乎上邀请我回答相关话题&#xff0c;今天就抽点时间和大家一起聊聊这事。我不想讨论太多新闻本身&#xff0c;而是更想聊聊事件的主要原因——微软企业设备管理&#xff0…

深入浅出WebRTC—DelayBasedBwe

WebRTC 中的带宽估计是其拥塞控制机制的核心组成部分&#xff0c;基于延迟的带宽估计是其中的一种策略&#xff0c;它主要基于延迟变化推断出可用的网络带宽。 1. 总体架构 1.1. 静态结构 1&#xff09;DelayBasedBwe 受 GoogCcNetworkController 控制&#xff0c;接收其输入…

C++STL初阶(7):list的运用与初步了解

在了解了vector之后&#xff0c;我们只需要简单学习List与vector不一样的接口即可 1.list的基本接口 1.1 iterator list中&#xff0c;与vector最大的区别就是迭代器由随机迭代器变成双向迭代器 string和vector中的迭代器都是随机迭代器&#xff0c;支持-等&#xff0c;而LIS…

MOGONET:患者分类与biomarker识别

为了充分利用组学技术的进步并更全面地了解人类疾病&#xff0c;需要新的计算方法来综合分析多种类型的组学数据。多组学图卷积网络 (MOGONET&#xff0c;Multi-Omics Graph cOnvolutional NETworks)是一种用于生物医学分类的新型多组学整合方法。MOGONET 包含特定组学的学习和…

Keil开发IDE

Keil开发IDE 简述Keil C51Keil ARMMDK DFP安装 简述 Keil公司是一家业界领先的微控制器&#xff08;MCU&#xff09;软件开发工具的独立供应商。Keil公司由两家私人公司联合运营&#xff0c;分别是德国慕尼黑的Keil Elektronik GmbH和美国德克萨斯的Keil Software Inc。Keil公…