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

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中相同的配置项。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数字IC基础:有符号数和无符号数的加减运算

相关阅读 数字IC基础https://blog.csdn.net/weixin_45791458/category_12365795.html?spm1001.2014.3001.5482 首先说明,本篇文章并不涉及补码运算正确性的证明,仅是对补码运算在有符号数和无符号数中运行进行讨论。 补码运算最大的作用在于消除计算机…

RabbitMQ 基础操作

概念 从计算机术语层面来说,RabbitMQ 模型更像是一种交换机模型。 Queue 队列 Queue:队列,是RabbitMQ 的内部对象,用于存储消息。 RabbitMQ 中消息只能存储在队列中,这一点和Kafka相反。Kafka将消息存储在topic&am…

2023年【T电梯修理】考试题及T电梯修理考试报名

题库来源:安全生产模拟考试一点通公众号小程序 T电梯修理考试题是安全生产模拟考试一点通总题库中生成的一套T电梯修理考试报名,安全生产模拟考试一点通上T电梯修理作业手机同步练习。2023年【T电梯修理】考试题及T电梯修理考试报名 1、【多选题】GB/T1…

什么是PyQt?

什么是Qt? Qt是一个著名的跨平台C图形用户界面应用程序开发框架。它由Qt公司开发,于1995年首次发布。Qt支持各种桌面,嵌入式和移动平台。 Qt的特点包括: 跨平台支持:Qt应用程序可以编译到多种平台运行,包括Windows,Mac,Linux,Android,iOS等。这大大简化了跨平台应用程序的开…

2023年亚太杯数学建模思路 - 案例:最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 最短时…

超级实用的程序员接单平台,看完少走几年弯路,强推第一个!

”前途光明我看不见,道路曲折我走不完。“ 兜兜转转,心心念念,念念不忘,必有回响。终于找到了....... 网络上好多人都在推荐程序员线上接单,有人说赚得盆满钵满,有的人被坑得破口大骂,还有的人…

解决Zotero不显示标签的问题

目录 问题描述 解决办法: 问题描述 Zotero是一款学习助手,可以帮助我们梳理文献,方便我们整理。 最近电脑从windows换到mac,重新安装了Zotero,发现之前的一直设置都没有了。比如设置好的标签信息不显示了。如下图: …

matlab设置背景颜色

matlab默认的背景颜色是纯白RGB(255,255,255),纯白太刺眼,看久了,眼睛会酸胀、疼痛,将其改成豆沙绿RGB(205,123,90),或者给出浅绿色RGB(128,255,255), 颜色就会柔和很多,眼睛感觉更舒适。     下面介绍在…

Java使用x-www-form-urlencoded发请求

平常在开发过程中用的最多的就是JSON格式&#xff0c;请求编码就是 application/json&#xff0c;但偏偏有些接口是 x-www-form-urlencoded&#xff0c;怎么办呢&#xff0c;重新封装喽 在POSTMan工具是叫 x-www-form-urlencoded 在 APIpost工具中是叫 urlencoded Map<Str…

2023年【施工升降机司机(建筑特殊工种)】最新解析及施工升降机司机(建筑特殊工种)考试资料

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 施工升降机司机(建筑特殊工种)最新解析参考答案及施工升降机司机(建筑特殊工种)考试试题解析是安全生产模拟考试一点通题库老师及施工升降机司机(建筑特殊工种)操作证已考过的学员汇总&#xff0c;相对有效帮助施工升…

SMART PLC累计流量功能块(梯形积分法+浮点数累加精度控制)

S7-200SMART PLC数值积分器相关知识请参考下面文章链接: SMART PLC数值积分器功能块(矩形+梯形积分法完整源代码)-CSDN博客文章浏览阅读153次。PLC的数值积分器算法也可以参考下面文章链接:PLC算法系列之数值积分器(Integrator)-CSDN博客数值积分和微分在工程上的重要意义不…

C语言进阶之冒泡排序

✨ 猪巴戒&#xff1a;个人主页✨ 所属专栏&#xff1a;《C语言进阶》 &#x1f388;跟着猪巴戒&#xff0c;一起学习C语言&#x1f388; 目录 前情回顾 1、回调函数 2、冒泡排序 3、库函数qsort cmp&#xff08;sqort中的比较函数&#xff0c;需要我们自定义&#xff09; …

c++|内联函数

一、概念 以inline修饰的函数叫做内联函数&#xff0c;编译时c编译器会在调用函数的地方展开&#xff0c;而不会建立栈帧&#xff0c;提升了程序运行的效率 例子&#xff1a; #include <iostream> using namespace std;int Add(int left, int right) {return left - ri…

详解硬盘的接口、总线和协议

总线&#xff1a;总线是计算机系统中用于连接各个硬件组件的一种通信方式&#xff0c;它可以实现数据、地址和控制信号的传输。在服务器中&#xff0c;内部总线起着承载数据和控制信号的重要作用。总线在单位时间内能传输数据量称为带宽。分为SATA&#xff0c;SAS&#xff0c;P…

Deep Learning for Monocular Depth Estimation: A Review.基于深度学习的深度估计

传统的深度估计方法通常是使用双目相机&#xff0c;计算两个2D图像的视差&#xff0c;然后通过立体匹配和三角剖分得到深度图。然而&#xff0c;双目深度估计方法至少需要两个固定的摄像机&#xff0c;当场景的纹理较少或者没有纹理的时候&#xff0c;很难从图像中捕捉足够的特…

模电 01

一.半导体基本知识 1.优点&#xff1a;体积小、重量轻、使用寿命长、输入功率小、功率转换效率高。 2.性能介于导体与绝缘体 3.常用半导体材料&#xff1a;硅&#xff08;SI&#xff09; 镉&#xff08;Ge&#xff09;,化合物半导体&#xff1a;砷化镓&#xff08;GaAs&…

centos安装kingbase(人大进仓)数据库

一、kingbase官网 https://www.kingbase.com.cn/rjcxxz/index.htm二、官网获取安装镜像文件和licence 三、安装步骤 1、创建新用户kingbase及其同名分组,以及家目录,并设置密码 useradd -m -U kingbase passwd kingbase2、创建自定义安装路径 su root mkdir -p /opt/Kingba…

Nacos介绍与使用

Nacos介绍与使用 文章目录 Nacos介绍与使用一. 什么是Nacos1 Nacos功能1.1 配置中心1.2 注册中心 2.为什么要使用Nacos 二.Nacos 部署安装1. Nacos 部署方式2. Nacos 安装3. 配置数据源4. 开启控制台授权登录&#xff08;可选&#xff09; 三. Nacos配置中心的使用1. 创建配置信…

暴力求解欲哭无泪之保安问题

身为程序员哪一个瞬间让你最奔溃&#xff1f; > 提醒&#xff1a;在发布作品前&#xff0c;请把不需要的内容删掉。 方向一&#xff1a;身为程序员遇到过的奔溃瞬间 写题目想到第一个方法便是暴力求解,然后少情况 题目如下: 方向二&#xff1a;如何解决遇到的奔溃瞬间 不…

[Docker]八.Docker 容器跨主机通讯

一.跨主机通讯原理 在主机192.168.31.140上的docker0(172.17.0.0/16)中有一个容器mycentos( 172.17.0.2/16), 在主机192.168.31.81上的docker0(172.17.0.0/16)中有一个容器mycentos( 172.17.0.2/16),然后在主机192.168.31.140上ping主机192.168.31.81,发现ping不通要实现两个主…