微信小程序03

开发工具

• 微信小程序自带的开发工具，集开发、预览、调试、发布于一身的完整环境
• 但是由于编码的体验不是很好：因此使用**VS Code** + 微信小程序开发工具：VS Code负责敲代码；微信小程序开发工具负责预览、调试、发布代码

小程序结构目录

• 小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务
• 小程序框架提供了自己的是图层描述语言WXML、WXSS、Javascript或Typescript，并在视图层与逻辑层之间提供了数据传输和事件系统：让开发者能够专注于数据与逻辑
• 小程序文件结构与Web前端对比

结构	Web前端	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript、Typescript	Javascript、Typescript
配置	无	JSON

• 基本的项目目录
  

小程序的配置文件

• 一个小程序的配置文件包括最基本的两种配置文件：全局配置文件app.json + 页面自己的配置文件page.json
• 注意：配置文件中是不能出现注释的

全局配置文件

• 全局配置文件app.json是当前小程序的全局配置文件，包括了小程序的所有页面路径、界面表现、网络超时时间、tabBar等

{
   
  "pages":[
    "pages/index/index",
    "pages/demo01/demo01",
    "pages/logs/logs"
  ],
  "window":{
   
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
   
    "color": "#00ff00",
    "selectedColor": "#ff0000",
    "list": [
      {
   
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
   
        "pagePath": "pages/demo01/demo01",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• pages字段：用于描述当前小程序所有的页面路径，这是为了让微信客户端知道当前你的小程序的页面定义在哪个目录
• window字段：定义小程序所有页面的顶部背景颜色，文字颜色等等

页面配置文件

• 页面配置page.json是用来表示页面目录下的page.josn这类和小程序页面的相关的配置
• 微信小程序开发者只能设置app.json中部分window字段配置项的内容，页面中的配置项会覆盖app.json中的window字段中相同的配置项

模板语法

• WXML(WeiXin Markup Language)是框架设计的一套标准