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