(二)运行微信小程序:单页面和多页面

news/2024/7/24 14:19:32/

使用微信开发者工具创建项目后,默认将运行一个单页面的小程序,运行效果和文件对应修改处如下。

根据上图,通过修改对应内容,可以修改界面显示的文字。

这是一个单页面的小程序,假如要实现多页面的小程序,我们先要了解一个概念。

1. tabBar

tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中的tabBar有在顶部的,也有在底部的,以底部为多。

 在小程序中通过点击tabBar,可以切换到不同页面。一个小程序中,tabBar最少2个,最多5个。

app.json文件初始内容。

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

"window"用于配置页面的顶部导航。

  "window": {"backgroundTextStyle": "light",  //下拉刷新的文字颜色"navigationBarBackgroundColor": "#fff",  //顶部背景"navigationBarTitleText": "Weixin",  //标题文字内容"navigationBarTextStyle": "black"  //标题文字颜色},

app.json相当于路由配置文件,pages/index文件夹表示首页。

2. 运行多页面

1. 新建文件夹

    在pages目录下右键选择“新建文件夹”并命名为abc,将创建与index文件夹同级的abc文件夹。

    

      

    

    

2. 新建页面

    在abc文件夹下右键选择“新建Page”并命名为abc,abc文件夹将生成abc.js文件、abc.json文件、abc.wxml文件和abc.wxss文件。并且,非常重要的是,app.json文件的“pages”内容将发生修改。

    

 3. 准备图标文件

    新建的tabBar加上原来的首页,我们现在需要为这两个页面提供点击时用到的图标。因为图标    有选中和非选中两个状态,所以我们需要为两个tabBar准备两种状态的图标,即四个图标。

    图标的尺寸大小要求通过查阅官网可知为81*81px。

https://developers.weixin.qq.com/miniprogram/dev/api/ui/tab-bar/wx.setTabBarItem.html#%E5%8F%82%E6%95%B0

    

(1)在与pages同级的位置,即项目文件夹(我们这里是CHECK05)下右击,选择新建文件夹,命名为“static”。

(2)在static文件夹下右击,选择新建文件夹,命名为“images”。

(3)在images文件夹下保存如下4个图片,尺寸为81*81px,分别是tab_home_selected.png、               tab_home.png、tab_my_selected.png和tab_my.png。

         

 (4)修改app.json文件,写入“tabBar”。

         根据语法要求,在文件的倒数第二行"sitemapLocation": "sitemap.json"后面写上“,”然后换行,写入tabBar内容。

         即从sitemapLocation这行到文件最后一行显示如下。

{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/abc/abc"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"Weixin",
"navigationBarTextStyle":"black"
},
"style":"v2",
"sitemapLocation":"sitemap.json",
"tabBar":{
"color":"#333",
"selectedColor":"#d43c33",
"backgroundColor":"#fff",
"position":"bottom",
"list":[
{
"pagePath":"pages/index/index",
"text":"主页",
"iconPath":"pages/static/images/tab_home.png",
"selectedIconPath":"pages/static/images/tab_home_selected.png"
},
{
"pagePath":"pages/abc/abc",
"text":"个人中心",
"iconPath":"pages/static/images/tab_my.png",
"selectedIconPath":"pages/static/images/tab_my_selected.png"
}
]
}
}

注意这里请在英文输入法状态下操作,否则可能会导致输入了中文空格而报错,并且不好排查。

为了避免粘贴后有中文空格导致报错,我把空格都删除了。

编译成功后底部显示两个导航,“主页”和“个人中心”显示效果如下。


http://www.ppmy.cn/news/63119.html

相关文章

[ubuntu][原创]通过apt方式去安装libnccl库

ubuntu18.04版本安装流程: wget https://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/cuda-ubuntu1804.pin sudo mv cuda-ubuntu1804.pin /etc/apt/preferences.d/cuda-repository-pin-600 sudo apt-key adv --fetch-keys https://develo…

使用SaleSmartly自动化流程的 5 个原因

想象一下,如果您可以采用智能数字解决方案来减轻团队和公司的手动和重复业务流程负担。它可以帮助您节省时间、提高公司的底线、消除冗余并增强数据管理。SaleSmartly(ss客服)就是这样。 通过利用自动化的力量,SaleSmartly&#x…

RSA加密的原理

一、RSA加密算法的原理 先上公式: 加密过程:其实就是明文的E次方对N取模公钥:(E,N)解密过程:密文的D次方对N取模私钥:(D,N)那么以上公式中的E、D、N分别代表什么&#x…

Nginx静态资源传输优化,文件高效传输,事半功倍

1.引出问题 Nginx可以作为静态资源服务器,比如我们访问192.168.110.97:80,熟悉的nginx欢迎界面,这其实也是nginx为我们提供的一个静态文件:index.html。 既然是静态资源,那我们能否优化一下传输效率呢? 1…

php+mysql求职招聘人才网站

1.系统登录:系统登录是用户访问系统的路口,设计了系统登录界面,包括用户名、密码和验证码,然后对登录进来的用户判断身份信息,判断是管理员用户还是普通用户[10]。 2.系统用户管理:不…

Linux安装canal

Linux安装canal 文章目录 Linux安装canalmsql修改1. mysql创建用户并授权2. 修改mysql的配置文件3. 重启mysql4. 检查是否打开binlog5. 查看binlog日志列表和当前正在写入的binlog canal1. 下载canal:2. 在服务器上解压3. 修改配置文件4. 启动canal5. 查看日志是否正…

C++的类型转换

文章目录 1. C语言中的类型转换2. 为什么C需要四种类型转换3. C强制类型转换3.1 static_cast3.2 reinterpret_cast3.3 const_cast3.4 dynamic_cast 1. C语言中的类型转换 在C语言中,如果赋值运算符左右两侧类型不同,或者形参与实参类型不匹配&#xff0…

685页40万字某省市场监管智慧应用一体化项目(word可编辑)

1.2.3.1 数字XX公共能力建设现状 1.2.3.1.1 数字XX通用基础应用平台现状 通用基础应用平台提供具有共性特征的跨部门、跨层级业务应用,与本项目有关的平台包括某省网上办事大厅、某省政务服务 APP 统一平台(X政通 APP)、某省公共信用信息平…

Linux | 学习笔记(适合小白)

操作系统概述: 计算机是由硬件和软件这两个主要部分组成的操作系统是软件的一类,主要作用是协助用户调度硬件工作,充当用户和计算机硬件之间的桥梁常见的操作系统:PC端:Windows,Linux,MacOS&…

热门的免费 API 合辑整理

快递物流查询 全国快递物流查询:目前已支持600快递公司的快递信息查询。 跨境国际快递物流查询 : 支持900物流商,提供实时查询和单号订阅API接口。 物流时效性查询:预估从下单开始直到收到货物的时间,计算物流的时效…

go读request.Body内容踩坑记

go读request.Body内容踩坑记 踩坑代码如下,当时是想获取body传过来的json func demo(c *httpserver.Context) {type ReqData struct {Id int json:"id" validate:"required" schema:"id"Title string json:"…

xib替代main.storyboard

xib替代main.storyboard 其实xib和storyboard在编译时都会变成nib文件。 删除storyboard 删除main.storyboard和ViewController 创建新VC 因为上一步干脆删掉了自带的ViewController,所以这里创建一个新的VC。 创建 创建自定义VC,叫做“TestXibVi…

《Linux 内核设计与实现》12. 内存管理

文章目录 页区获得页获得填充为 0 的页释放页 kmalloc()gfp_mask 标志kfree()vmalloc() slab 层slab 层的设计slab 分配器的接口 在栈上的静态分配单页内核栈 高端内存的映射永久映射临时映射 每个 CPU 的分配新的每个 CPU 接口 页 struct page 结构表示系统中的物理页&#x…

Rosetta从头蛋白抗体设计、结构优化及在药物研发中的应用

Rosetta从头蛋白抗体设计、结构优化及在药物研发中的应用 第一天 内容 主要知识点 从蛋白质折叠到蛋白质设计教学目标:了解本方向内容、理论基础、研究意义。 蛋白质折叠与结构预测简介 主链二面角与二级结构侧链堆积与三级结构蛋白质设计简介 蛋白质设计的分…

【RabbitMQ】SpringAMQP

RabbitMQ 1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式: 同步通讯:就像打电话,需要实时响应。 异步通讯:就像发邮件,不需要马上回复。 两种方式各有优劣,打电话可以立即得到响应&am…

微服务学习笔记--(Ribbon)

Ribbon负载均衡 负载均衡策略懒加载 Ribbon-负载均衡策略 Ribbon的负载均衡规则是一个叫做IRule的接口来定义的,每一个子接口都是一种规则: IRuleAbstractLoadBalancerRuleRetryRuleClientConfigEnabledRoundRobinRuleRoundRobinRuleRandomRuleBestAv…

【1419. 数青蛙】

来源:力扣(LeetCode) 描述: 给你一个字符串 croakOfFrogs,它表示不同青蛙发出的蛙鸣声(字符串 "croak" )的组合。由于同一时间可以有多只青蛙呱呱作响,所以 croakOfFrog…

windeployqt工具打包C++ QT项目

目录 前言方法TIP 前言 使用VS编写好QT项目后,有时需要发送给他人进行测试。在此情况下,发送所有项目文件显然不可取,因为exe文件不能独立运行,故在测试前需要先配置项目环境,以确保运行所需的库文件能够完全。 因此&…

PAT A1042 Shuffling Machine

1042 Shuffling Machine 分数 20 作者 CHEN, Yue 单位 浙江大学 Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techniques are seen as weak, and in order to avoid "inside jobs" where employees collab…

golang的os包用法简介

文章目录 简述os 包中的常用函数HostnameEnvironGetenvSetenvExitGetuidGetgidGetpidGetwdMkdirMkdirAllRemove os/exec 执行外部命令LookPath os/user 获取当前用户信息Current os/signal 信号处理NotifyStop 简述 Go语言的 os 包中提供了操作系统函数的接口,是一个…