小程序制作(超详解!!!)第十六节 小程序的基本架构

news/2024/4/25 18:22:54

1.题目描述

创建一个包含:首页、教学、科研、资讯和关于我们5个标签的小程序,每个标签都有对应的页面、图标和标签文字,点击某个标签将切换到对应的页面,同时该标签的图标和文字颜色都会发生变化页面的标题也发生相应的变化,而其他标签则变为非选中状态。

2.app.json

{"pages": [ "pages/shouye/shouye","pages/beibeiting/beibeiting","pages/beibeile/beibeile","pages/shequ/shequ","pages/wode/wode"],"window": { "navigationBarBackgroundColor": "#fff","navigationBarTitleText": "财小贝","navigationBarTextStyle": "black"},"tabBar": {"color":"#000","selectedColor": "#00f","list":[{"pagePath": "pages/shouye/shouye","text":"贝贝看","iconPath": "/images/贝贝看-关.png","selectedIconPath": "/images/贝贝看-开.png"},{"pagePath": "pages/beibeiting/beibeiting","text":"贝贝听","iconPath": "/images/贝贝听-关.png","selectedIconPath": "/images/贝贝听-开.png"},{"pagePath": "pages/beibeile/beibeile","text":"贝贝乐","iconPath": "/images/贝贝乐-关.png","selectedIconPath": "/images/贝贝乐-开.png"},{"pagePath": "pages/shequ/shequ","text":"社区","iconPath": "/images/贝贝社区-关.png","selectedIconPath": "/images/贝贝社区-开.png"},{"pagePath": "pages/wode/wode","text":"我的","iconPath": "/images/贝贝我的-关.png","selectedIconPath": "/images/贝贝我的-开.png"}]},"sitemapLocation": "sitemap.json"
}

3.shouye.json

{"navigationBarBackgroundColor": "#ff0000","navigationBarTextStyle":"white","navigationBarTitleText": "贝贝看"
}

4.目录

images中的照片要自己提前存。

5.总结

1.全局配置

app.json文件属性

属性类型必填描述
pagesstring[]页面路径列表
windowObject全局的默认窗口表现
tabBarObject底部tab栏的表现
networkTimeoutObject网络超时时间
debugboolean是否开启debug模式,默认关闭
permissiomObject小程序接口权限相关设置

Pages配置

pages用于指定小程序由哪些页面组成,每一项都对应一个页面路径(含文件名)信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的.json,.js,.wxml,.wxss四个文件进行处理。数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对pages数组进行修改。

Window配置

属性类型描述

navigationBarBackgroundColor

HexColor导航栏背景颜色

navigationBarTextStyle

string导航栏标题颜色

navigationBarTitleText

string导航栏标题文字内容
backgroundColorHexColor窗口的背景色
backgroundTextStylestring下拉loading的样式,仅支持dark/light
pageOrientationstring屏幕旋转设置,支持auto/portrait/landscape

tabBar配置

属性类型描述
colorHexColortab上的文字的默认颜色
selectedColorHexColortab上选中文字的颜色
backgroundColorHexColortab的背景色
borderStylestringtabbar上边框的颜色,仅支持black/white
listArraytab列表,最少2个、最多5个tab
positionstringtabBar的位置,仅支持bottom/top

list配置

属性类型必填说明
pagePathstring页面路径,必须在pages中先定义
textstringtab上按钮文字
iconPathstring图片路径,icon大小限制为40kb,建议尺寸为81px*81px,不支持网络图片
selectedIdconPathstring选中时的图片路径

2.页面配置

每一个小程序页面也可以使用同名.json文件来对本页面的窗口表现进行配置,页面中配置项会覆盖app.json的window中相同的配置项。


https://www.xjx100.cn/news/3092673.html

相关文章

力扣1038. 从二叉搜索树到更大和树(java,树的中序遍历解法)

Problem: 1038. 从二叉搜索树到更大和树 文章目录 题目描述思路解题方法复杂度Code 题目描述 给定一个二叉搜索树 root (BST),请将它的每个节点的值替换成树中大于或者等于该节点值的所有节点值之和。 提醒一下, 二叉搜索树 满足下列约束条件&#xff…

抽象工厂设计模式是什么?什么是 Abstract Factory 抽象工厂设计模式?Python 抽象工厂设计模式示例代码

什么是 Abstract Factory 抽象工厂设计模式? 抽象工厂设计模式是一种创建型设计模式,旨在提供一个创建一系列相关或相互依赖对象的接口,而无需指定其具体类。它允许客户端使用抽象的接口创建一组相关对象,而无需关注实际的对象实…

C++刷题 -- 二分查找

C刷题 – 二分查找 文章目录 C刷题 -- 二分查找一、原理二、例题1.二分查找2.使用二分查找确定target左右边界3.x的平方根 一、原理 条件:数组为有序数组,数组中无重复元素,因为一旦有重复元素,使用二分查找法返回的元素下标可能…

相机机模组需求示例

产品需求名称摄像头采集图片数据补充说明产品需求描述 As:用户 I want to:通过相机模组获取到自定义格式图片数据,要求包括: 1、支持多种场景,如:手持相机拍摄舌苔 2、支持图片分辨率至少达到1920X1080 3、…

【Python 千题 —— 基础篇】2 的 N 次方

题目描述 题目描述 2 的 N 次方。输入一个整数 N,使用 for 循环计算 2 的 N 次方的值。 输入描述 输入一个整数值 N。 输出描述 输出 2 的 N 次方的值。 示例 示例 ① 输入: 20输出: 请输入一个整数 N: 20 2 的 20 次方的值是: 10…

UE必学系列(基础篇完结)

导语: UE必须系列基础篇完结,敬请期待进阶篇 基础篇文章:在掌握了UE4基础操作,并且能上手做一些项目之后,对UE4知识进行更完善的知识体系学习。主要是把学习视频链接汇总,主要学习思路是 优先官方视频和官…

gitlab图形化界面使用

gitlab使用 创建用户 上面是创建用户基本操作 修改密码 创建组 给组添加用户 创建项目 选择空白项目 退出root用户,切换其他用户 在服务器上创建ssh密钥 使用ssh-ketgen 命令 新服务器上创建的 [rootgitlab ~]# ssh-keygen Generating public/private rsa key …

Redis从入门到精通(二)- 入门篇

文章目录 0. 前言1. 入门篇[【入门篇】1.1 redis 基础数据类型详解和示例](https://icepip.blog.csdn.net/article/details/134438573)[【入门篇】1.2 Redis 客户端之 Jedis 详解和示例](https://icepip.blog.csdn.net/article/details/134440061)[【入门篇】1.3 redis客户端之…