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

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

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

相关文章

Python——使用Seaborn钻石数据可视化分析(2)

续 Python——使用Seaborn钻石数据可视化分析(1) 目录 📈 4、非数值变量描述性统计分析 1️⃣ 柱状图——分析钻石切工的情况 📍 sns.countplot —— 绘制柱状图、条形图 2️⃣ 箱线图——分析不同切工的钻石的价格情况 📍 sns.barplot —— 不同分类变量之间的数…

【论文阅读】Mamba: Linear-Time Sequence Modeling with Selective State Spaces

Mamba: Linear-Time Sequence Modeling with Selective State Spaces 论文&#xff1a;[2312.00752] Mamba: Linear-Time Sequence Modeling with Selective State Spaces 作者&#xff1a;Albert Gu 和 Tri Dao&#xff0c;分别来自卡内基梅隆大学机器学习系和普林斯顿大学计…

HarmonyOS ArkUi 唤起系统APP:指定设置界面、浏览器、相机、拨号界面、选择通讯录联系人

效果&#xff1a; 完整工具类&#xff1a; import { common, Want } from kit.AbilityKit; import { BusinessError } from kit.BasicServicesKit; import { call } from kit.TelephonyKit; import { promptAction } from kit.ArkUI; import { contact } from kit.Contacts…

docker 部署wechatbot-webhook 并获取接口实现微信群图片自动保存到chevereto图库等

功能如图&#xff1a; docker部署 version: "3" services:excalidraw:image: dannicool/docker-wechatbot-webhook:latestcontainer_name: wechatbot-webhookdeploy:resources:limits:cpus: 0.15memory: 500Mreservations:cpus: 0.05memory: 80Mrestart: alwayspor…

RabbitMQ学习实践二:MQ的实现

文章是本人在学习springboot实现消息队列功能时所经历的过程的记录&#xff0c;仅供参考&#xff0c;如有侵权请随时指出。 参考文章地址&#xff1a; RabbitMQ安装与入门_rabbitmq win11配置-CSDN博客 RabbitMQ入门到实战一篇文章就够了-CSDN博客 RabbitMQ系列&#xff08…

走进数组的奇妙之旅

引言&#xff1a; 在前几篇文章中&#xff0c;我们深入探讨了函数的奥秘。在讲述函数知识的过程中&#xff0c;我们邂逅了一个新的概念&#xff0c;你或许还记得在演示 strcpy函数时&#xff0c;出现的这行代码&#xff1a;char1[20]{0};。当时&#xff0c;你是否感到好奇&…

scp免密复制文件

实现在服务器A和服务器B之间使用scp命令免密互相传输文件 1. 在服务器A中免密复制到服务器B 1.1 生成服务器A的公钥私钥 #在服务器A中执行 ssh-keygen -t rsa -P ""命令执行完毕会在服务器A的 ~/.ssh 目录下生成两个文件&#xff1a;id_rsa 和 id_rsa.pub 1.2 拷…

《Towards Black-Box Membership Inference Attack for Diffusion Models》论文笔记

《Towards Black-Box Membership Inference Attack for Diffusion Models》 Abstract 识别艺术品是否用于训练扩散模型的挑战&#xff0c;重点是人工智能生成的艺术品中的成员推断攻击——copyright protection不需要访问内部模型组件的新型黑盒攻击方法展示了在评估 DALL-E …

外企跨境传输应该如何做到安全有效的文件管控?

跨境文件传输并非易事&#xff0c;它面临着多重挑战&#xff0c;尤其是数据安全、隐私保护以及法律法规遵守等问题。所以如何做到安全有效的文件管控&#xff0c;却是一个让许多企业头疼的问题。小编今天将说说跨境文件传输面临的主要挑战&#xff0c;并讨论如何选择合适的加密…

【深度学习】PyTorch框架(3):优化与初始化

1.引言 在本文中&#xff0c;我们将探讨神经网络的优化与初始化技术。随着神经网络深度的增加&#xff0c;我们会遇到多种挑战。最关键的是确保网络中梯度流动的稳定性&#xff0c;否则可能会遭遇梯度消失或梯度爆炸的问题。因此&#xff0c;我们将深入探讨以下两个核心概念&a…

Linux-mysql数据备份恢复

MySQL数据备份与恢复 一、备份介绍 1、为什么要备份 备份&#xff1a;能够防止由于机械故障以及人为误操作带来的数据丢失&#xff0c;例如将数据库文件保存在了其它地方。 冗余&#xff1a; 数据有多份冗余&#xff0c;但不等备份&#xff0c;只能防止机械故障带来的数据丢…

《JavaSE》---17.<String 类的常见操作>

目录 前言 一、String类的常见用法 1.1 字符串构造&#xff08;常见三种&#xff09; ①使用常量串构造 ②直接newString对象 ③ 使用字符数组进行构造 注意&#xff1a; 1.2 String对象的比较 1. 比较是否引用同一个对象 2. boolean equals(Object anObject) 方法&a…

Activiti7实战

Activiti7与SpringBoot 整合开发 介绍 流程定义如下&#xff1a; 流程如下&#xff1a;申请人提出请假申请后&#xff0c;上级领导看到进行审批&#xff0c;如果时间超过三天&#xff0c;需要校长复审&#xff0c;三天之内直接人事存档。 进入开发工作&#xff0c;具体步骤如…

【数据结构】:时间和空间复杂度在这篇里面一点都不复杂

目录 如何衡量一个代码的好坏 时间复杂度 概念 计算方法 实例计算 【实例1】 【实例2】 【实例3】 【实例4】&#xff1a;冒泡排序的时间复杂度 【实例5】&#xff1a;二分查找的时间复杂度 【实例6】&#xff1a;阶乘递归的时间复杂度 【实例7】&#xff1a;斐波那契…

独立游戏《星尘异变》UE5 C++程序开发日志5——实现物流系统

目录 一、进出口清单 二、路径计算 三、包裹 1.包裹的数据结构 2.包裹在场景中的运动 四、道路 1.道路的数据结构 2.道路的建造 3.道路的销毁 4.某个有道路连接的建筑被删除 作为一个工厂类模拟经营游戏&#xff0c;各个工厂之间的运输必不可少&#xff0c;本游戏采用的…

SQLite数据库在Android中的使用

目录 一&#xff0c;SQLite简介 二&#xff0c;SQLIte在Android中的使用 1&#xff0c;打开或者创建数据库 2&#xff0c;创建表 3&#xff0c;插入数据 4&#xff0c;删除数据 5&#xff0c;修改数据 6&#xff0c;查询数据 三&#xff0c;SQLiteOpenHelper类 四&…

学习008-02-01-05 Configure a One-to-Many Relationship(配置一对多关系)

Configure a One-to-Many Relationship&#xff08;配置一对多关系&#xff09; This lesson explains how to create a One-to-Many relationship between two entities and how XAF generates the UI for such a relationship. 本课介绍如何在两个实体之间创建一对多关系以及…

nginx高可用实例

什么是nginx高可用 为什么需要高可用 正常情况下使用nginx&#xff0c;浏览器访问网址到nginx服务器&#xff0c;nginx再发送到目标服务器&#xff0c;获取资源返回。 但是会有一个问题&#xff1a;当nginx进程发生宕机&#xff0c;此时目标服务器存在&#xff0c;但是浏览器访…

Vue入门之v-for、computed、生命周期和模板引用

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

Linux系统下U-Boot基本操作——UBoot基础知识

个人名片&#xff1a; &#x1f393;作者简介&#xff1a;嵌入式领域优质创作者&#x1f310;个人主页&#xff1a;妄北y &#x1f4de;个人QQ&#xff1a;2061314755 &#x1f48c;个人邮箱&#xff1a;[mailto:2061314755qq.com] &#x1f4f1;个人微信&#xff1a;Vir2025WB…