小程序代码结构和基本配置介绍-CSDN博客

本文链接：https://blog.csdn.net/m0_67388537/article/details/131696499

1. 微信小程序

2. 小程序代码结构和基本配置介绍

2.1 pages

微信小程序每一个页面由四个文件组成，分别是js 页面逻辑、 json 单个页面的配置、wxml 页面内容、wxss 样式

pages文件夹里是小程序的各个页面，每个界面一般都由.wxml、.wxss、.js、.json四个文件组成，四个文件必须是相同的名字和路径

.js 是页面的脚本代码，通过Page()函数注册页面。可以指定页面的初始数据、生命周期、事件处理等
.wxml WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。
.wxss 是样式表
.json 页面配置文件，设置与页面顶部显示内容的相关信息

 *.js 
 *.wxml ---> view 结构 ----> html
 *.wxss ---> view 样式 -----> css
 *.json ---> 页面配置

2.2 utils

存放项目当中js模块的区域(存放项目当中常用的依赖如时间格式化等)

js 模块通过export default 对外暴露接口，其它使用的地方通过 import 进行引用

2.3 app.js

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

页面的.js文件可以通过var app = getApp() 获取其实例，调用其中定义的方法和变量，但不可以调用生命周期的方法

【参考】

2.4 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

  // app.json 配置介绍
  "pages": [ // 配置小程序的页面，第一个代表小程序的初始页面
    "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
    "pages/logs/logs"
  ],
  "window": { // 设置小程序的状态栏、标题栏、导航条、窗口背景颜色
    "navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
    "navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
    "navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
    "backgroundColor": "#eeeeee", //窗口的背景色
    "backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
    "enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的话就直接不写！
    "disableScroll": true, //  设置true不能上下滚动，true/false，注意！只能在 page.json 中有效，无法在 app.json 中设置该项。
  },
  "tabBar": { //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
      //只有定义为 tabBar 的页面，底部才有 tabBar
    "list": [{ //设置tab的属性，最少2个，最多5个
      "pagePath": "pages/index/index", //点击底部 tab 跳转的路径
      "text": "首页", //tab 按钮上的文字
      "iconPath": "../img/a.png", //tab图片的路径，本地路径
      "selectedIconPath": "../img/a.png" //tab 在当前页，也就是选中状态的路径
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }],
    "color": "red", //tab 的字体颜色
    "selectedColor": "#673ab7", //当前页 tab 的颜色，也就是选中页的
    "backgroundColor": "#2196f3", //tab 的背景色
    "borderStyle": "white", //边框的颜色 black/white
    "position": "bottom" //tab处于窗口的位置 top/bottom
    },
  "networkTimeout": { //默认都是 60000 秒一分钟
      "request": 10000, //请求网络超时时间 10000 秒
      "downloadFile": 10000， //链接服务器超时时间 10000 秒
      "uploadFile": "10000", //上传图片 10000 秒
      "downloadFile": "10000" //下载图片超时时间 10000 秒
    },
  "debug": true //项目上线后，建议关闭此项，或者不写此项

2.5 app.wxss

小程序全局样式(引入外部样式的时候只在这里面引入即可)

2.6 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。