前期准备
跟随 官网简易教程 ①申请小程序账号 ②获取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'
})
}
- 事件绑定
事件绑定有两种方法:
bind + 事件类型
catch + 事件类型
bind
事件绑定不会阻止冒泡事件向上冒泡, catch
事件绑定可以阻止冒泡事件向上冒泡.
- 常见的事件类型
上表事件类型全部为为冒泡,除之外的其它事件如无特殊声明都是非冒泡事件
index.js 文件中还有其它获取用户信息的代码,在后面用到的时候再做详细讲解,现在我们通过 index 目录掌握了 数据绑定和 事件绑定