微信小程序基础_day01

1.微信小程序介绍

微信⼩程序，简称⼩程序，英⽂名 Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤

1.1. 为什么是微信⼩程序 ？

• 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
• 推⼴app 或公众号的成本太⾼。
• 开发适配成本低。
• 容易⼩规模试错，然后快速迭代。
• 跨平台。

1.2. 微信⼩程序历史

• 2016年1⽉11⽇，微信之⽗张⼩⻰时隔多年的公开亮相，解读了微信的四⼤价值观。张⼩⻰指出，越来越多产品通过公众号来做，因为这⾥开发、获取⽤⼾和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信⼩程序」 需要注意的是，之前是叫 做 应⽤号

• 2016年9⽉21⽇，微信⼩程序正式开启内测。在微信⽣态下，触⼿可及、⽤完即⾛的微信⼩程序引起⼴泛关注。腾讯云正式上线微信⼩程序解决⽅案，提供⼩程序在云端服务器的技术⽅案。

• 2017年1⽉9⽇，微信推出的“⼩程序”正式上线。“⼩程序”是⼀种⽆需安装，即可使⽤的⼿机“应⽤”。不需要像往常⼀样下载App，⽤⼾在微信中“⽤完即⾛”。

1.3 还有其他的⼩程序 不容忽视

1. ⽀付宝⼩程序
2. 百度⼩程序
3. QQ⼩程序
4. 今⽇头条 + 抖⾳⼩程序

1.3.1 其他优秀的第三⽅⼩程序

• 拼多多
• 滴滴出⾏
• 欢乐⽃地主
• 智⾏⽕⻋票
• 唯品会…

2. 环境准备

2.1. 注册账号

建议使用全新的邮箱，没有注册过其他小程序或者公众号的。访问注册⻚⾯，耐⼼完成注册即可。

2.2. 获取APPID

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后，可登录，然后获取APPID。登录，成功后可看到如下界⾯

2.3. 开发⼯具

下载地址

微信⼩程序⾃带开发者⼯具，集 开发 预览 调试 发布 于⼀⾝的 完整环境。但是由于编码的体验不算好，因此 建议使⽤ vs code + 微信小程序编辑工具 来实现编码vs code 负责敲代码， 微信编辑工具 负责预览。

3. 第⼀个微信⼩程序

3.1. 打开微信开发者⼯具

3.2. 新建⼩程序项⽬

3.3. 填写项⽬信息

3.4. 成功

4. 微信开发者⼯具介绍

官网

5. ⼩程序结构⽬录

小程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。
⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

5.1. ⼩程序⽂件结构和传统web对⽐

通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json

5.2. 基本的项⽬⽬录

6. ⼩程序配置⽂件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的page.json
注意：配置文件中不能出现注释

6.1. 全局配置app.json

全局配置app.json
app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

字段的含义

• pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。

  • 未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。
    

• window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
  

• 完整的配置信息请参考 app.json配置

6.1.1. tabbar

6.2. ⻚⾯配置page.json

⻚⾯配置page.json
这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json的 window 中相同的配置项。