小程序运行逻辑：wxml制定布局、wxss进行美化、js处理数据和控制逻辑。

全局文件

app.js

image-20220415103927818

app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
  "pages":[//有哪些页面，在这写下来编译过后会自动生成页面
    "pages/main/main",
    "pages/user/user",
  ],
  "window":{//导航栏设置
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "MBTI",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {//底部tabBar，一开始可能没有这一项，需要自己写
    "selectedColor": "#D53E37",
    "backgroundColor": "#white",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/main/main",
        "text": "主页",
        "iconPath": "images/tabBar/home0.png",
        "selectedIconPath": "images/tabBar/home1.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "images/tabBar/user0.png",
        "selectedIconPath": "images/tabBar/user1.png"
      }
    ]
  },
  "style": "v2",//样式版本
  "sitemapLocation": "sitemap.json"
}

app.wxss

image-20220415104417460

所有页面/组件都会附加此样式。但自身的wxss，内嵌的style、以及app.wxss会有作用的优先级顺序。组件要想使用app.wxss，需要设置styleIsolation项为apply-shared。

utils文件夹

存放所有页面/组件都会用到的一些公共方法。

在别的页面可以使用const util = require('../../utils/util.js');来引用文件夹下的util.js文件，用util.functionName()来使用其中的公共方法。

styles文件夹

存放阿里云的字体图标样式，参考[在微信小程序中引入 Iconfont 阿里巴巴图标库 - 木子欢儿 - 博客园 (cnblogs.com)](https://www.cnblogs.com/HGNET/p/15546431.html#:~:text=在微信小程序中引入 Iconfont 阿里巴巴图标库 小程序的代码包不能超过4M，为了压缩代码包的大小，可以通过第三方链接引入图标资源,Iconfont 无疑是最常用的第三方图标库，这里介绍一下在微信小程序引入 Iconfont 的方法)。