目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个小程序页面由四个文件组成，分别是：

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

允许上传的文件

在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：

1. wxs
2. png
3. jpg
4. jpeg
5. gif
6. svg
7. json
8. cer
9. mp3
10. aac
11. m4a
12. mp4
13. wav
14. ogg
15. silk

创建文件目录后解决一系列报错问题：

报警1、

[ app.json.json 文件错误] app.json: Empty file is NOT a valid json file

{
  "pages": [
    "pages/about/about"
  ]
}

报警2、

[ pages/about/about.json.json 文件错误] pages/about/about.json: Empty file is NOT a valid json file

{

}

报警3、

[sitemap 索引情况提示] 根据 sitemap 的规则[0]，当前页面 [pages/about/about] 将不被索引
VM938 WAService.js:18 Mon Jan 11 2021 09:30:32 GMT+0800 (新加坡标准时间) Page route 错误
VM938 WAService.js:18 Page[pages/about/about] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.
VM938 WAService.js:18 Mon Jan 11 2021 09:30:32 GMT+0800 (新加坡标准时间) Page route 错误
VM938 WAService.js:18 Page is not constructed because it is not found.

Page({})

报警4、

[sitemap 索引情况提示] 根据 sitemap 的规则[0]，当前页面 [pages/about/about] 将不被索引

"setting": {
    "urlCheck": true,
    "es6": true,
    "enhance": false,
    "postcss": true,
    "preloadBackgroundData": false,
    "minified": true,
    "newFeature": false,
    "coverView": true,
    "nodeModules": false,
    "autoAudits": false,
    "showShadowRootInWxmlPanel": true,
    "scopeDataCheck": false,
    "uglifyFileName": false,
    "checkInvalidKey": true,
    "checkSiteMap": true,
    "uploadWithSourceMap": true,
    "compileHotReLoad": false,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },

至此解除全部报警现象。可以进行项目编码开发。

页面配置

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

完整配置项说明请参考小程序页面配置

例如：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

about页面的编码；

<text style="font-weight:block;font-size:30px">Hello World!</text>

也可以将样式提出来放到wxss文件中。

about.wxss

.about_title{
  font-weight:block;
  font-size:30px
}

about.wxml

<text class="about_title">Hello World!</text>