✅持续创作，加速成长！这是我参加「日新方案 10 月更文应战」的第3天，点击检查活动概况

✅个人主页：hacker707的博客

欢迎重视点赞收藏⭐留言

系列专栏：微信小程序

个人格言：不断的翻越一座又一座的高山，那样的人生才是我想要的。这一马平川，一眼见底的活，我不想要,我的人生，我自己书写，余生很长，请多关照，我的人生，敬请期待

了解项目的基本组成结构

【微信小程序】小程序代码基本组成结构
==pages== 用于寄存一切小程序的页面 ==utils== 用于寄存工具性质的模块(例如:格式化时间的自定义模块) ==app.js== 小程序项目大局装备文件 ==app.wxss== 小程序项目大局样式文件 ==project,config.json== 项目的装备文件 ==sitemap.json== 用于装备小程序及其页面是否答应被微信索引

小程序页面的组成部分

小程序官方主张把一切小程序的页面，都寄存在==pages==目录中，以单独的文件夹存在 如下图所示。

【微信小程序】小程序代码基本组成结构
其中，每个页面由四个基本文件组成，分别是 ① .js文件（页面的脚本文件，寄存页面的数据、事件处理函数等） ② .json文件（当时页面的装备文件，装备窗口的外观、体现等） ③ .wxml文件（页面的模块结构文件） ④ .wxss文件（当时页面的样式表文件）

JSON装备文件的效果

JSON是一种数据格式，在实践开发中，JSON总是以装备文件的方式出现。小程序也不破例：通过不同的.json装备文件，能够对小程序项目进行不同级别的装备。 小程序项目中有四种json装备文件，分别是： ① 项目根目录中的app.json装备文件 ②项目根目录中的project.config.json装备文件 ③项目根目录中的sitemap.json装备文件 ④每个页面文件夹中的.json装备文件

app.json文件

app.json是当时小程序的大局装备，包含小程序的一切页面路径、 窗口外观、 界面体现、 底部tab等

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

pages :用于记载当时小程序一切页面的路径 windows :大局定义小程序一切页面的背景色、文字颜色等 “style”:”v2″ :大局定义小程序组件所使用的样式版别(如要使用旧版只需要把该代码删除 sitemaplocation :用于指明sitemap.json 的方位

project.config.json文件

project.config.json是项目装备文件，用来记载咱们对小程序开发做的个性化装备，例如： setting中保存了编译相关的装备 projectname中保存的是项目名称 appid中保存的是小程序的账号ID libVersion中保存的是基础库版别

{
    "description": "项目装备文件",
    "packOptions": {
        "ignore": [],
        "include": []
    },
    "setting": {
        "bundle": false,
        "userConfirmedBundleSwitch": false,
        "urlCheck": true,
        "scopeDataCheck": false,
        "coverView": true,
        "es6": true,
        "postcss": true,
        "compileHotReLoad": false,
        "lazyloadPlaceholderEnable": false,
        "preloadBackgroundData": false,
        "minified": true,
        "autoAudits": false,
        "newFeature": false,
        "uglifyFileName": false,
        "uploadWithSourceMap": true,
        "useIsolateContext": true,
        "nodeModules": false,
        "enhance": true,
        "useMultiFrameRuntime": true,
        "useApiHook": true,
        "useApiHostProcess": true,
        "showShadowRootInWxmlPanel": true,
        "packNpmManually": false,
        "enableEngineNative": false,
        "packNpmRelationList": [],
        "minifyWXSS": true,
        "showES6CompileOption": false,
        "minifyWXML": true,
        "babelSetting": {
            "ignore": [],
            "disablePlugins": [],
            "outputPath": ""
        }
    },
    "compileType": "miniprogram",
    "libVersion": "2.19.4",
    "appid": "wxa1b840ed79abac07",  
    "projectname": "miniprogram-92",
    "condition": {},
    "editorSetting": {
        "tabIndent": "insertSpaces",
        "tabSize": 4
    }
}

✅setting里边保存的是项目编译的个性化装备 当咱们翻开概况进行本地设置时把上传代码时样式自动补全撤销勾选时postcss就会变成false，当咱们把将JS编译成es5撤销勾选时es6就会变成false

【微信小程序】小程序代码基本组成结构

sitemap.json文件

✅sitemap.json文件用于装备小程序页面是否答应被微信索引。 当开发者答应被微信索引时，微信会提过爬虫的方式，为小程序页面内容建立索引。当用户的查找关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在查找结果中。

{
  "desc": "关于本文件的更多信息，请参阅文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

✅当咱们不想被微信索引，咱们能够把action里边的值改为disallow就不会被微信索引了

页面的.json装备文件

小程序的每一个页面，能够使用.json文件对本页面的窗口外观进行装备，页面中的装备项会覆盖app.json的window中相关的装备项 ✅假如咱们想修正导航栏的标题怎样操作呢？只需要在app.json中将navigationBarTitleText修正成你想要修正的标题(我这儿改的是hacker嘎嘎宠粉)

【微信小程序】小程序代码基本组成结构
✅假如咱们想修正首页导航栏的背景颜色怎样操作呢？只需要在index文件中找到index.json将navgationBarBackgroundColor改为你想要修正的颜色(我这儿修正的是蓝色)

咱们能够在app.json文件中对一切页面的窗口外观进行大局装备，在页面的.json文件中能够对当时页面窗口外观进行装备，假如页面的装备与大局装备发生冲突会以页面的装备为准。

【微信小程序】小程序代码基本组成结构

结束语

以上便是微信小程序之小程序代码基本组成结构，创作不易，多多支持

你们的支持便是hacker创作的动力

系列专栏：微信小程序