小程序的基本架构

一、小程序的基本架构

1.知识点

(1)小程序整体配置方法。

(2)小程序页面配置方法

2.实现方法

2.1全局配置

小程序根目录下的app.json文件夹用来对微信小程序进行全局配置,文件内容作为一个JSON对象,主要配置项如下表所示。

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

(1)pages用于指定小程序由哪些页面组成,每一项都对应一个页面的路径(含文件名)信息。文件名不需要写文件扩展名,框架会自动去寻找对应位置的.json,.js,.wxml,.wxss四个文件进行处理。数组的第一项代表小程序的初始页面(即首页)。小程序中新增/减少页面,都需要对pages数组进行修改。如果开发目录如图01所示,则需要在app.json中写

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
    ]
}

01

(2)window用于设置小程序的状态栏、导航条、标题、窗口背景色。其中涉及的及格属性如下表所示。

属性类型默认值描述
navigationBarBackgroundColorHeColor#000000导航栏背景颜色
navigationBarTextStylestringwhite导航栏标题颜色,仅支持black/white
navigationBarTitleTextstring导航栏标题文字颜色
navigationStylestringdefault导航栏样式
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉loading的样式,仅支持black/white
pageOrientationstringportrait屏幕旋转设置,支持auto/portrait/landscape

(3)tabBar用来配置小程序底部的tab。如果小程序是一个多tab应用(客户端 窗口的底部或顶部有tab栏可以切换页面),可以通过tabBar配置项指定tab栏的表现,以及tab切换时现实的对应页面。tabBar对象的常用属性如下表所示。

属性类型必选默认值描述
colorHexColortab上的文字默认颜色,仅支持十六进制颜色
selectColorHexColortab上的文字选中时的颜色,仅支持十六进制颜色
backgroundColorHexColortab的背景色,仅支持十六进制颜色
borderStylestringblacktabBar上边框的颜色,仅支持black/white
liststringtab的列表,详见list属性说明,最少两个,最多五个
positionstringbottomtabBar的位置,仅支持bottom/top
custombooleanFALSE自定义tabBar

其中list接受一个数组,只能配置最少两个,最多五个tab。tab按数组的顺序排列,每个项都是一个对象,其属性值如下表所示。

属性类型必填说明
pagePathstring页面路径,必须在pages中定义
textstringtab上按钮文字
iconPathstring图片路径,icon大小限制40KB。当position为top时不显示icon
selectIconPathstring选中时的图片路径,icon大小限制40KB。当position为top时不显示icon

2.2页面配置

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

3.案例分析

3.1案例描述

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

3.2实现效果

02

3.3案例实现

(1)创建images文件夹,准备10个图片作为变穷选中和非选中状态下的图标,把这些图片放在images文件夹中,并把images文件夹复制到建立的工程文件夹中。

推荐图标网站:https://design.maliquankai.com/

(2)编写app.json文件代码,定义五个页面:index,jiaoxue,keyan,zixun,guanyu。

{
  "pages": [
    "pages/index/index",
    "pages/jiaoxue/jiaoxue",
    "pages/keyan/keyan",
    "pages/zixun/zixun",
    "pages/guanyu/guanyu"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "xxxx大学欢迎您",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#00f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home-fill.png"
      },
      {
        "pagePath": "pages/jiaoxue/jiaoxue",
        "text": "教学",
        "iconPath": "/images/all.png",
        "selectedIconPath": "/images/all-fill.png"
      },
      {
        "pagePath": "pages/keyan/keyan",
        "text": "科研",
        "iconPath": "/images/set (1).png",
        "selectedIconPath": "/images/set.png"
      },
      {
        "pagePath": "pages/zixun/zixun",
        "text": "资讯",
        "iconPath": "/images/folder.png",
        "selectedIconPath": "/images/folder-fill.png"
      },
      {
        "pagePath": "pages/guanyu/guanyu",
        "text": "关于我们",
        "iconPath": "/images/Customer management.png",
        "selectedIconPath": "/images/Customer management-fill.png"
      }
    ]
  }
}

编写完app.json文件保存或编译后,创建的页面、导航栏和标签如图02所示,创建的文件目录结构如图03所示。
03

(2)编写.json文件代码,以"教学"页面为例。

{
  "navigationBarBackgroundColor": "#ff0000",          //导航栏背景颜色
  "navigationBarTextStyle": "white",                  //导航栏标题颜色
  "navigationBarTitleText": "教学"                    //导航栏标题文字内容
}

4.思考

(1)一个小程序页面通常是有哪几个文件构成?

一个小程序的页面由四个文件组成:

  • index.js 页面的逻辑层
  • index.json 页面的配置
  • index.wxml 就是相当于html页面
  • index.wxss 页面的样式

原文连接:https://blog.csdn.net/qq_51612558/article/details/122691843

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?