小程序简介

2019-07-22 本文已影响0人冷r

小程序代码构成

1.json 后缀的 JSON 配置文件
2.wxml 后缀的 WXML 模板文件
3.wxss 后缀的 WXSS 样式文件
4.js 后缀的 JS 脚本逻辑文件

JSON配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json

小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下

{
  "pages":[//项目目录
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",//
    "navigationBarBackgroundColor": "#fff",//导航背景颜色
    "navigationBarTitleText": "WeChat",//导航标题内容
    "navigationBarTextStyle":"black",//导航栏标题文本颜色
    "enablePullDownRefresh":"false",//是否开启当前页面的下拉刷新
    "onReachBottomDistance":"false",//页面上拉触发时距页面底部的距离
  }
}

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

工具配置 project.config.json

是一个个性化配置，例如界面颜色、编译配置的目录，在新的项目时只要将这个文件载入，开发者工具就自动恢复当时个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

页面配置 page.json

页面路径第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

JSON 语法

JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中。

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
1.数字，包含浮点数和整数
2.字符串，需要包裹在双引号中
3.Bool值，true 或者 false
4.数组，需要包裹在方括号中 []
5.对象，需要包裹在大括号中 {}
6.Null

注意 JSON文件中不能写注释

小程序视图层

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

在小程序中
1.WXML 类似 HTML 的角色

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构；
WXML中的新特性有：数据绑定、列表渲染、条件渲染、模板、事件等；

2.WXSS 具有 CSS 大部分的特性

WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件的样式；
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。；
与 CSS 相比，WXSS 扩展的特性有：尺寸单位、样式导入。

3.WXS 是小程序的一套脚本语言

WXS（WeiXin Script）是小程序的一套脚本语言；

组件 , 数据绑定 , 列表渲染 , 条件渲染 , 元素事件 , 模板 , 组件 , wxss