[小程序]基本构成和项目构建

一、项目结构组成

? ? ? ? 从上图可知，一个小程序项目通常由以下几个内容组成：

? ? ? ? ? ? ? ? ①pages：存放页面（每个页面建议以文件夹形式存在）

? ? ? ? ? ? ? ? ? ? ? ? 1.js文件：当前页面脚本(存放数据和事件函数)

? ? ? ? ? ? ? ? ? ? ? ? 2.json文件：当前页面配置

? ? ? ? ? ? ? ? ? ? ? ? 3.wxml：当前页面结构

? ? ? ? ? ? ? ? ? ? ? ? 4.wxss：当前页面样式

? ? ? ? ? ? ? ? ②utils：存放工具模块

? ? ? ? ? ? ? ? ③app.js：项目的入口文件

? ? ? ? ? ? ? ? ④app.json：全局配置文件

? ? ? ? ? ? ? ? ⑤app.wxss：样式文件

? ? ? ? ? ? ? ? ⑥project.config.json：项目配置文件

? ? ? ? ? ? ? ? ⑦sitemap.json：配置页面是否允许微信索引

二、json文件

? ? ? ? 1.app.json文件：包含所以页面的路径、窗口外观、页面表现、底部tab等。

{
  "pages": [    #页面
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {    #背景色、文字颜色
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
  "style": "v2",    #样式版本
  "renderer": "skyline",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",    #指向sitemap的位置
  "lazyCodeLoading": "requiredComponents"
}

? ? ? ? 2.project.config.json文件：对小程序进行个性化配置，如：setting-编译相关；projectname-项目名；appid-小程序账号ID。

? ? ? ? 3.sitemap.json文件：用来配置小程序是否允许在微信中进行索引。

三、页面

? ? ? ? 1.新建

? ? ? ? 在app.json->pages中新增页面存放路径即可自动创建相应界面。

? ? ? ? ?同时app.json中的第一个页面会被当成默认页面。

? ? ? ? 2.WXML

? ? ? ? 标签语言，类似HTML，其与HTML有以下区别：①标签名称不同；②属性节点不同；③提供了类似Vue的模板语法。

? ? ? ? 3.WXSS

? ? ? ? WXSS和CSS的区别：①新增rpx尺寸单位；②提供全局样式和局部样式；③仅支持部分CSS选择器。

? ? ? ? 4.JS文件

? ? ? ? 用于逻辑交互，分为三类：①app.js(入口文件，通过调用App()函数启动小程序)；②页面js(通过调用Page()函数来创建和运行页面)；③普通js(封装通用的函数/属性)。