小程序学习笔记（一）小程序代码构成

小程序代码构成

 

 

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

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

app.json 

当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。如：

{
  "pages":[ //pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{ //window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

工具配置 project.config.json

你在工具上做的任何配置都会写入到project.config.json这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

页面配置 page.json（logs.json，index.json的统称）

让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。

即局部配置。

 

 

WXML 模板

WXML 充当的就是类似 HTML 的角色。(可以理解为封装好的HTML)

和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方：

1.标签名字有点不一样。

2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

 

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改：

1.新增了尺寸单位，rpx。

2.提供了全局的样式和局部样式（app.wxss 为全局样式），page.wxss 仅对当前页面生效。

3.WXSS 仅支持部分 CSS 选择器。

 

JS 逻辑交互

交互：响应用户的点击、获取用户的位置等等。