（一）阮一峰教程之一：初次上手
hello world 示例
- app.js
- app.json
- pages/home 子目录
app.js - 对整个小程序进行初始化
app.js内容只有一行代码。
App({});
app.json 配置文件，记录项目的一些静态配置。
app.json采用 JSON 格式。JSON 是基于 JavaScript 语言的一种数据交换格式，只有五条语法规则，非常简单，不熟悉 JSON 的同学可以参考这篇教程。
app.json文件的内容，至少必须有一个pages属性，指明小程序包含哪些页面。
{
"pages": [
"pages/home/home"
]
}
上面代码中，pages属性是一个数组，数组的每一项就是一个页面。这个示例中，小程序只有一个页面，所以数组只有一项pages/home/home。
pages/home/home是一个三层的文件路径。
- 所有页面都放在
pages子目录里面。 - 每个页面有一个自己的目录，这里是
pages下面的home子目录，表示这个页面叫做home。页面的名字可以随便起，只要对应的目录确实存在即可。 - 小程序会加载页面目录
pages/home里面的home.js文件，.js后缀名可以省略，所以完整的加载路径为pages/home/home。home.js这个脚本的文件名也可以随便起，但是习惯上跟页面目录同名。
新建 pages/home 子目录。
$ mkdir -p pages/home
然后，在这个目录里面新建一个脚本文件home.js。该文件的内容如下。
Page({});
上面代码中，Page()由小程序原生提供，它是一个函数，用于初始化一个页面实例。它的参数是一个配置对象，用于设置当前页面的行为属性。这里是一个空对象，表示不设置任何属性。
第五步，在pages/home目录新建一个home.wxml文件。WXML 是微信页面标签语言，类似于 HTML 语言，用于描述小程序的页面。
home.wxml的内容很简单，就写一行hello world。
hello world
到这一步，就算基本完成了。现在，打开小程序开发工具，导入项目目录wechat-miniprogram-demo。如果一切正常，就可以在开发者工具里面，看到运行结果了。
WXML 标签语言
小程序的 WXML 语言提供各种页面标签。下面，对 home.wxml 改造一下，加上两个最常用的标签。
<view>
<text>hello world</text>
</view>
上面的代码用到了两个标签：<view> 和 <text>。
<view> 标签表示一个区块，用于跟其他区块分隔，类似 HTML 语言的 <div> 标签。<text> 表示一段行内文本，类似于 HTML 语言的 <span> 标签，多个 <text> 标签之间不会产生分行。
小程序的项目结构
总结一下，这个示例一共有4个文件，项目结构如下。
|- app.json
|- app.js
|- pages
|- home
|- home.wxml
|- home.js
这就是最简单、最基本的小程序结构。所有的小程序项目都是这个结构，在上面不断添加其他内容。
这个结构分成两层：描述整体程序的顶层 app 脚本，以及描述各个页面的 page 脚本。
项目配置文件 app.json
顶层的app.json文件用于整个项目的配置，对于所有页面都有效。
除了前面提到的必需的pages属性，app.json文件还有一个window属性，用来设置小程序的窗口。window属性的值是一个对象，其中有三个属性很常用。
navigationBarBackgroundColor：导航栏的颜色，默认为#000000（黑色）。navigationBarTextStyle：导航栏的文字颜色，只支持black（黑色）或white（白色），默认为white。navigationBarTitleText：导航栏的文字，默认为空。
下面，改一下前面的app.json，加入window属性。
{
"pages": [
"pages/home/home"
],
"window": {
"navigationBarBackgroundColor": "#ff0000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小程序 Demo"
}
}
上面代码中，window属性设置导航栏的背景颜色为红色（#ff0000），文本颜色为白色（white），标题文字为"小程序 Demo"。
开发者工具导入项目代码，就可以看到导航栏变掉了。
除了窗口的样式，很多小程序的顶部或尾部，还有选项栏，可以切换到不同的选项卡。
这个选项栏，也是在app.json里面设置，使用tabBar属性，这里就不展开了。
（二）阮一峰教程之二：页面样式
一、总体样式
微信小程序允许在顶层放置一个 app.wxss 文件，里面采用 CSS 语法设置页面样式。这个文件的设置，对所有页面都有效。
注意，小程序虽然使用 CSS 样式，但是样式文件的后缀名一律要写成 .wxss。
打开上一篇教程的示例，在项目顶层新建一个 app.wxss 文件，内容如下。
page {
background-color: pink;
}
text {
font-size: 24pt;
color: blue;
}
上面代码将整个页面的背景色设为粉红，然后将 <text> 标签的字体大小设为 24 磅，字体颜色设为蓝色。
可以看到，页面的背景色变成粉红，文本字体变大了，字体颜色变成了蓝色。
实际开发中，直接对 <text> 标签设置样式，会影响到所有的文本。一般不这样用，而是通过 class 属性区分不同类型的文本，然后再对每种 class 设置样式。
打开 pages/home/home.wxml 文件，把页面代码改成下面这样。
<view>
<text class="title">hello world</text>
</view>
上面代码中，我们为 <text> 标签加上了一个 class 属性，值为 title 。
然后，将顶层的 app.wxss 文件改掉，不再直接对 <text> 设置样式，改成对 class 设置样式。
page {
background-color: pink;
}
.title {
font-size: 24pt;
color: blue;
}
上面代码中，样式设置在 class 上面（.title），这样就可以让不同的 class 呈现不同的样式。修改之后，页面的渲染结果并不会有变化。
二、Flex 布局
各种页面元素的位置关系，称为布局（layout），小程序官方推荐使用 Flex 布局。不熟悉这种布局的同学，可以看看我写的《Flex 布局教程》。
下面演示如何通过 Flex 布局，将上面示例的文本放置到页面中央。
首先，在pages/home目录里面，新建一个home.wxss文件，这个文件设置的样式，只对 home 页面生效。这是因为每个页面通常有不一样的布局，所以页面布局一般不写在全局的app.wxss里面。
然后，home.wxss文件写入下面的内容。
page {
height: 100%;
width: 750rpx;
display: flex;
justify-content: center;
align-items: center;
}
下面解释一下上面这段 WXSS 代码，还是很简单的。
height: 100%;：页面高度为整个屏幕高度。width: 750rpx;：页面宽度为整个屏幕宽度。
注意，这里单位是 rpx，而不是px。rpx是小程序为适应不同 宽度 的手机屏幕，而发明的一种长度单位。不管什么手机屏幕，宽度一律为750rpx。它的好处是换算简单，如果一个元素的宽度是页面的一半，只要写成width: 375rpx;即可。display: flex;：整个页面（page）采用 Flex 布局。justify-content: center;：页面的一级子元素（这个示例是<view>）水平居中。align-items: center;：页面的一级子元素（这个示例是<view>）垂直居中。一个元素同时水平居中和垂直中央，就相当于处在页面的中央了。
三、WeUI
如果页面的所有样式都自己写，还是挺麻烦的，也没有这个必要。腾讯封装了一套 UI 框架 WeUI，可以拿来用。
手机访问 weui.io，可以看到这套 UI 框架的效果。
这一节就来看看，怎么使用这个框架的小程序版本 WeUI-WXSS，为我们的页面加上官方的样式。
首先，进入它的 GitHub 仓库，在dist/style目录下面，找到weui.wxss这个文件，将源码全部复制到你的app.wxss文件的头部。
然后，将page/home/home.wxml文件改成下面这样。
<view>
<button class="weui-btn weui-btn_primary">
主操作
</button>
<button class="weui-btn weui-btn_primary weui-btn_loading">
<i class="weui-loading"></i>正在加载
</button>
<button class="weui-btn weui-btn_primary weui-btn_disabled">
禁止点击
</button>
</view>
可以看到，加入 WeUI 框架以后，只要为按钮添加不同的 class，就能自动出现框架提供的样式。你可以根据需要，为页面选择不同的按钮。
这个示例中，<button>元素使用了下面的class。
weui-btn：按钮样式的基类weui-btn_primary：主按钮的样式。如果是次要按钮，就使用weui-btn_default。weui-btn_loading：按钮点击后，操作正在进行中的样式。该类内部需要用<i>元素，加上表示正在加载的图标。weui-btn_disabled：按钮禁止点击的样式。
WeUI 提供了大量的元素样式，完整的清单可以查看这里。
四、加入图片
美观的页面不能光有文字，还必须有图片。小程序的<image>组件就用来加载图片。
打开home.wxml文件，将其改为如下代码。
<view>
<image src="https://picsum.photos/200"></image>
</view>
开发者工具加载项目代码，页面的渲染结果如下，可以显示图片了。
<image>组件有很多属性，比如可以通过style属性指定样式。
<view>
<image
src="https://picsum.photos/200"
style="height: 375rpx; width: 375rpx;"
></image>
</view>
默认情况下，图片会占满整个容器的宽度（这个例子是<view>的宽度），上面代码通过style属性指定图片的高度和宽度（占据页面宽度的一半），渲染结果如下。
当然，图片样式不一定写在<image>组件里面，也可以写在 WXSS 样式文件里面。
五、图片轮播
小程序原生的<swiper>组件可以提供图片轮播效果。
上面页面的图片上面，有三个提示点，表示一共有三张图片，可以切换显示。
它的代码很简单，只需要改一下home.wxml文件即可。
<view>
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
style="width: 750rpx;">
<swiper-item>
<image src="https://picsum.photos/200"></image>
</swiper-item>
<swiper-item>
<image src="https://picsum.photos/250"></image>
</swiper-item>
<swiper-item>
<image src="https://picsum.photos/300"></image>
</swiper-item>
</swiper>
</view>
上面代码中，<swiper>组件就是轮播组件，里面放置了三个<swiper-item>组件，表示有三个轮播项目，每个项目就是一个<image>组件。
<swiper>组件的indicator-dots属性设置是否显示轮播点，autoplay属性设置是否自动播放轮播。它们的属性值都是一个布尔值，这里要写成{{true}}。这种{{...}}的语法，表示里面放置的是 JavaScript 代码，这个放在下一次讲解。
（三）阮一峰教程之三：脚本编程
一、数据绑定
前面的所有示例，小程序的页面都是写死的，也就是页面内容不会变。但是，页面数据其实可以通过脚本传入，通过脚本改变页面，实现动态效果。
小程序提供了一种特别的方法，让页面可以更方便地使用脚本数据，叫做"数据绑定"（data binding）。
所谓"数据绑定"，指的是脚本里面的某些数据，会自动成为页面可以读取的全局变量，两者会同步变动。也就是说，脚本里面修改这个变量的值，页面会随之变化；反过来，页面上修改了这段内容，对应的脚本变量也会随之变化。这也叫做 MVVM 模式。
下面看一个例子。打开 home.js 文件，改成下面这样。
Page({
data: {
name: '张三'
}
});
上面代码中，Page() 方法的配置对象有一个 data 属性。这个属性的值也是一个对象，有一个 name 属性。数据绑定机制规定，data 对象的所有属性，自动成为当前页面可以读取的全局变量。也就是说， home 页面可以自动读取 name 变量。
接着，修改 home.wxml 文件，加入 name 变量。
<view>
<text class="title">hello {{name}}</text>
</view>
上面代码中，name变量写在 {{...}} 里面。这是小程序特有的语法，两重大括号表示，内部不是文本，而是 JavaScript 代码，它的执行结果会写入页面。因此，{{name}} 表示读取全局变量 name 的值，将这个值写入网页。
注意，变量名区分大小写，name 和 Name 是两个不同的变量名。
