微信小程序（1 初识）

前期准备

跟随 官网简易教程 ①申请小程序账号 ②获取AppID ③安装开发者工具 ④ 第一个小程序
（跟随简易教程 就实现了第一个小程序）

项目分析

微信开发者工具

像平时用到的IDE软件相似，讲一下平常用得到的功能。

模拟器 编辑器 调试器
模拟器 打开这个功能我们能看到模拟小程序的现实界面。
编辑器 打开编辑器，右侧将会显示文件结构和代码，用于开发时的代码编辑。

调试器 用于代码的调试，打开后可以像在谷歌浏览器上面一样调试代码。

QuickStart 项目 分析

小程序的 QuickStart 的目录如上：

• pages目录存放页面文件。
• utils目录存放工具库文件。
• app.js 是整个小程序的启动文件。
• app.json 里面是有关小程序的全局配置
• app.wxss 存放全局样式
• project.config.json 这个文件也有点类似于 npm init 生成的package.json 相同，是对项目的设置和介绍。

app.js 文件

App() 函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。

app.json 文件

app.json 文件用来对小程序进行全局的配置，决定页面的文件路径，窗口表现，设置网络超时时间，设置tab等。

Hello World

像大多数语言的学习一样，Hello World是 QuickStart 的起始页面， page/index 目录存放了hello world 页面的组成文件，包含 .js .wxml .wxss 三个文件分别对应脚本文件、HTML文件和css文件。

index.wxml 文件

可以看到如同vue一样小程序同样是使用双大括号来绑定数据，另外小程序的事件绑定 使用 bindMethods = "Methods" 的方式。
在小程序的开发过程中，数据绑定和时间绑定是重中之重。

index.js 文件

index.js 文件中包含了一个 Page()函数来注册一个页面，接受一个 object 参数，其指定页面的初始化数据，生命周期函数，事件处理函数等。

data 文件包含了在 index.wxml 文件中绑定的数据。
另外在模拟器中，当点击头像的时候会跳转到日志页面，这个功能由 bindViewTap 函数实现：

bindViewTap:function(){
    wx.navigateTo({
      url:'../logs/logs' 
    })
}   

• 事件绑定
  事件绑定有两种方法：
  
  1. bind + 事件类型
  2. catch + 事件类型

bind 事件绑定不会阻止冒泡事件向上冒泡， catch 事件绑定可以阻止冒泡事件向上冒泡.

• 常见的事件类型
  

上表事件类型全部为为冒泡，除之外的其它事件如无特殊声明都是非冒泡事件

index.js 文件中还有其它获取用户信息的代码，在后面用到的时候再做详细讲解，现在我们通过 index 目录掌握了 数据绑定和 事件绑定