本节内容源于P3

目录结构介绍

小程序文件和传统 WEB 对比

在小程序中，除了用于保存配置的json文件之外，其他大部分文件都源于传统的三板斧：HTML、CSS和JS

但是为了区分，在小程序中HTML要称为WXML，CSS要称为WXSS，JS保持不变

传统 WEB 微信小程序
HTML WXML
CSS WXSS
JS JS

小程序项目结构

一个新建的项目结构如下，具体用途在已注释中标记

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
miniprogram-1
    │  app.js // 入口文件
    │  app.json // 全局配置
    │  app.wxss // 全局样式表
    │  project.config.json // 项目配置（不重要）
    │  sitemap.json // 微信索引（不重要）
    │
    ├─pages // 页面文件夹，一个文件夹对应一个页面
    │  ├─index //首页
    │  │      index.js   // 首页JS
    │  │      index.json // 页面配置
    │  │      index.wxml // 首页HTML
    │  │      index.wxss // 首页CSS
    │  │
    │  └─logs // 这个是日志页面
    │          logs.js
    │          logs.json
    │          logs.wxml
    │          logs.wxss
    │
    └─utils // 公用文件夹，可以在里面放一些全局的函数方法之类的，非必须
            util.js

新建页面

打开/app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

在"pages"中定义了所有页面，最上面的是首页，可以更改页面顺序来更改首页

若要新建页面，只需在其中添加路径，然后保存即可，目录会自动创建

小程序使用的语言：以WXML与WXSS为例

打开\pages\index中的index.wxml与index.wxss，先将其中的内容全部删掉

在index.wxml中键入以下内容，并保存

1
<view class="box">test1</view>

可以看见，左侧已经渲染出来了

</view>又是什么？这不是HTML中的标签，这是因为WXML有一套自己独立的标签系统，具体内容在官方文档有

这个标签类似于HTML中的div

再打开index.wxss，我们再其中对其修改样式

1
.box{ width: 100px;height: 100px;background: red;}

这简直与CSS中的语法一样，对不对？可以看见左侧已经渲染出来了结果

总结：微信小程序用的并不是传统的WEB三板斧，而是保留了框架，而里面的标签之类的内容都是独立的