Web前端_⼩程序实战开发⼩程序开发实战教程
⼀、⼩程序
它是⼀种混合开发的⽅式。
是安装在中的程序（⼀个程序最多2M空间）。
1.1 注册
1
2 点击⽴即注册：进⼊下⽅页⾯
3
4 点击⼩程序进⼊表单填写页⾯
5
6 填写完毕之后提交，会让你去邮箱中激活。激活之后就可以进⼊⼩程序开发了。
1.2 安装开发⼯具
经过1.1注册之后，我们有了开发账号，但是没有办法凭空开发内容，我们需要下载开发⼯具。使⽤提供的开发⼯具进⾏开发。下载地址：
进⼊之后，会看到让你选择版本的信息。
1
选择对应的版本进⾏安装。 例如：我的电脑就是windows64位操作系统，那么我就选Windows 64位
点击之后就会开始下载
1
下载完毕之后，得到⼀个安装包
前端页面模板
1
双击进⾏安装，下⼀步下⼀步直到结束。
安装完毕之后，会⾃动打开登录界⾯。有⼀个⼆维码，通过扫描该⼆维码登录。
登录之后
1
1.3 创建⼩程序项⽬
点击上图中的⼩程序项⽬
1
项⽬⽬录：就是项⽬所在⽬录
AppId： ⼩程序的id。你通过注册之后会得到⼀个id。输⼊它即可。我们现在没有注册完毕，只能点击测试⼩程序进⾏测试
项⽬名称： 你当前创建的项⽬的名称 这是唯⼀的。
填写完毕之后：
建⽴普通快速启动模板： 如果勾选 则会在项⽬⽬录下 ⾃动创建⼀个demo案例
点击确定之后，编辑器会启动
1
1
预览窗⼝： 你编写的⼩程序的预览窗⼝，可以进⾏点击 其实就是⼀个⼿机模拟器
功能窗⼝： 许多功能按钮
⽬录结构： 项⽬的⽬录状态
代码编辑窗⼝：代码可以在这⾥编辑
调试窗⼝： 代码书写过程中，调试时，会在这⾥输出⼀些信息。也有控制台的功能也有⽂档结构的功能。
1.4 ⽬录结构介绍
1.4.1 pages
这个⽂件夹，是⽤来放所有的⼩程序需要的页⾯。
该⽂件夹中是⼀个⼀个的⼦⽂件夹，每⼀个⼦⽂件夹表⽰⼀个页⾯。
默认创建出来的pages中有两个：1 index 就代表index页⾯  2 logs 就代表logs页⾯
1.4.2 utils
这个⽂件夹，是⽤来放所有的⼯具的。可以删除。
1.4.3 app.js
这个⽂件，叫做应⽤程序构造器。
整个应⽤程序的配置，都可以在这⾥⾯书写，主要是应⽤程序的声明周期函数以及全局数据。
全局的脚本⽂件
App({
/** onLaunch
* 当⼩程序初始化完成时，会触发 onLaunch（全局只触发⼀次）
*/
/** onShow
* 当⼩程序启动，或从后台进⼊前台显⽰，会触发 onShow
*/
/
**onHide
* 当⼩程序从前台进⼊后台，会触发 onHide
*/
/** onError
* 当⼩程序发⽣脚本错误，或者 api 调⽤失败时，会触发 onError 并带上错误信息
*/
})
1.4.4 app.json
这个⽂件，是⼩程序的配置⽂件。
配置的是⼩程序的内容。
这是⼀个JSON⽂件 需要使⽤符合规范的JSON语法。
key必须要使⽤双引号
不能有注释
对象的最后⼀个属性值之后不能有逗号
pages: 配置当前⼩程序在运⾏过程中所需要的页⾯
它的值是⼀个数组，每⼀个成员是⼀个页⾯⽂件的路径 本质上是在说明index.wxml 但是可以省略后缀它有⼀个特点：如果在添加完某⼀项并保存之后，该⽂件和⽂件夹还没有存在，则会⾃动创建出来window: 配置⼩程序的界⾯的
"window"
"backgroundTextStyle": 背景⽂字颜⾊
"navigationBarBackgroundColor": 导航部分的背景颜⾊
"navigationBarTitleText":  导航标题⽂本
"navigationBarTextStyle":  导航⽂本颜⾊
"tabBar": 底部按钮
"list": 每⼀个按钮都配置在这⾥⾯ 它是⼀个数组
数组的成员是对象