2018-02-28-1第一节简易教程学习

第一部分： 小程序全局配置
之前笔记 关于client/app.json 的文件说明

// app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
// pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
// window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
// 所有参数配置地址详见上面

第二部分：个性化配置部分

工具配置 project.config.json
通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

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

第三部分：每个页面的单独个性化配置———页面配置 page.json

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

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

第四部分：WXML 模板

网页编程采用的是 HTML + CSS + JS 这样的组合
在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色

WXML特有的标签

不同于传统的div, p, span，WXML对标签进行进一步封装。小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力

WXML特色（类似React与vue）拥有的数据双向绑定MVVM开发模式

 多了一些wx:if 这样的属性以及 {{ }} 这样的表达式 和语法
通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

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

1.新增了尺寸单位。]WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2.提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

第六部分 JS 交互逻辑
直接上代码

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})