个人微信小程序开发入门教程:项目配置、全局配置和页面配置

学习开发微信小程序最最最最重要的就是学习微信小程序官方文档,因为文档可以解决我们在学习过程中遇到的大部分麻烦，所以先附上官方文档链接：

https://developers.weixin.qq.com/doc/

---

目录

• 一、项目配置（project.config.json）
  • （一）、项目配置的位置
  • （二）、项目配置的内容
  • （三）、项目配置的参数
• 二、全局配置（app.json）
  • （一）、全局配置的位置
  • （二）、全局配置的内容
  • （一）、全局配置的参数
• 三、页面配置（page.json）
  • （一）、页面配置的位置
  • （二）、页面配置的内容
  • （三）、页面配置的参数
• 四、总结

---

一、项目配置（project.config.json）

（一）、项目配置的位置

项目配置一般是新建一个小程序项目默认生成的，可以在资源管理器里面看见具体目录位置

（二）、项目配置的内容

打开编辑器，可以看到默认生成的具体内容
提示：不同作用下项目配置的内容不同，下面案例可供参考

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": [
      {
        "type": "file",
        "value": ".eslintrc.js"
      }
    ]
  },
  "setting": {
    "urlCheck": true,
    "es6": true,
    "enhance": true,
    "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,
    "lazyloadPlaceholderEnable": false,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "useIsolateContext": true,
    "userConfirmedBundleSwitch": false,
    "packNpmManually": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "disableUseStrict": false,
    "minifyWXML": true,
    "showES6CompileOption": false,
    "useCompilerPlugins": false,
    "ignoreUploadUnusedFiles": true
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "wxbf22421cb70fac4b",
  "projectname": "movie",
  "debugOptions": {
    "hidedInDevtools": []
  },
  "scripts": {},
  "staticServerOptions": {
    "baseURL": "",
    "servePath": ""
  },
  "isGameTourist": false,
  "condition": {
    "search": {
      "list": []
    },
    "conversation": {
      "list": []
    },
    "game": {
      "list": []
    },
    "plugin": {
      "list": []
    },
    "gamePlugin": {
      "list": []
    },
    "miniprogram": {
      "list": []
    }
  }
}

（三）、项目配置的参数

这里就不得不再说一次微信小程序官方文档的重要性了，有关项目配置的组件及参数，链接如下：
https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

二、全局配置（app.json）

（一）、全局配置的位置

全局配置一般是新建一个小程序项目默认生成的，可以在资源管理器里面看见具体目录位置

（二）、全局配置的内容

打开编辑器，可以看到默认生成的具体内容
提示：以下案例仅供参考

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

（一）、全局配置的参数

其实在制作小程序时，某些默认生成的不需要参数可以删除，具体的参数及其作用可以参考微信小程序官方文档，这里直接附上链接：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

三、页面配置（page.json）

（一）、页面配置的位置

这里的页面配置是指在【pages】这个文件夹下的所有子文件夹（也称为页面）里的.json文件

（二）、页面配置的内容

不同功能的页面下.json文件的内容也不一样
提示：以下案例仅供参考

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {}
}

（三）、页面配置的参数

由于小程序里不同的页面的功能不同，所以在配置文件时，最重要的就是仔细浏览小程序官方文档，然后在选择性地使用参数，链接如下：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

四、总结

在配置参数时，可以根据官方文档给出的例子参考配置。但如果找不到相关组件的使用示例，可以尝试改变组件的参数，在【模拟器】里观察改变的位置及改变的程度，以此来判断该组件的作用。毕竟，实践出真知！！