微信小程序基础

一、了解微信小程序

1. 小程序是什么？

微信小程序是一种介于原生app、和web app的hybrid。通过微信进行加载，实现类似原生app的流畅。相对原生app来说，小程序更加轻量、更新实时、跨平台；相对web app来说，小程序资源离线，体验更流畅。

微信小程序的设计目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

2. 小程序的实现机制

小程序的开发是基于微信提供的一套应用框架进行开发的。微信通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一套完整的Javascript Api，使得开发者能够非常方便的使用到微信客户端提供的各种基础功能，快速构建一个应用。

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层之间通过单向数据绑定进行数据传输，使开发者更加聚焦于数据与逻辑上。

3. 支持的特性

微信框架具体提供的特性：

wxml：一切皆组件（视图组件）

view组件（类似 H5中的div）

input组件（type = digit，有带小数点的9宫格键盘）

modal弹窗组件 （对应的wxml、效果如下）（该组件已换js 实现wx.showModal()）

4. 功能API：

支付

微信信息的获取

网络请求

录音

上传/下载文件

webSocket

访问相册

二、开发项目

1、环境准备

1.1注册账号

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

1.2. 获取APPID

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

1.3下载微信开发工具

微信⼩程序⾃带开发者⼯具，集开发预览调试 发布于⼀⾝的完整环境。但是由于编码的体验不算好，因此建议使⽤

vs code + 微信小程序编辑工具 来实现编码

vs code 负责敲代码， 微信编辑工具 负责预览

2、新建小程序

打开开发者工具 第⼀次登录的时候 需要扫码登录，点击“小程序”，点击“新建”，填写“项目信息”，“确认” 成功

3、⼩程序结构⽬录

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

4、⼩程序配置⽂件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的page.json

注意：配置文件中不能出现注释

4.1配置app.json

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

{

“pages”:[

“pages/index/index”,

“pages/logs/logs”

],

“window”:{

“backgroundTextStyle”:“light”,

“navigationBarBackgroundColor”: “#fff”,

“navigationBarTitleText”: “WeChat”,

“navigationBarTextStyle”:“black”

}

}

字段的含义

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

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

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

4.2配置page.json

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