初识小程序结构1

1.小程序配置app.json

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

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

　　　　2.window字段 — 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

2.页面配置 page.json

　　1.是什么：page.json 用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置

　　2.应用场景：

　　　　　　如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，

　　　　可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独

　　　　立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

3.WXML 模板

　　和 HTML 非常相似，也有很多不一样的地方

　　　　1.把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

　　　　2.例如：需要把一个 Hello World 的字符串显示在界面上

　　　　WXML 是这么写 :

　　　　JS 只需要管理状态即可:

　　　　　　this.setData({ msg: "Hello World" })

　　　　3. 通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态

　　　　　　和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

4.WXSS 样式

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

　　1.新增了尺寸单位，在底层支持新的尺寸单位 rpx

　　2.提供了全局的样式和局部样式：

　　　　和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，

　　　　局部页面样式 page.wxss 仅对当前页面生效。

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

5. JS 交互逻辑

响应用户的点击、获取用户的位置等等

1.例如：点击button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"

WXML：

JS：

　　　　Page({

　　　　clickMe: function() {

　　　　this.setData({ msg: "Hello World" })

　　　　 }

　　　　})

　　　3.可以在 JS 中调用小程序提供的丰富的 API

　　利用这些 API 可以很方便的调起微信提供的能力

1. 获取用户信息、本地存储、微信支付等
2. 前面QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上
3. 小程序的API 详细文档：https://developers.weixin.qq.com/miniprogram/dev/api/index.html