# 微信小程序接口全解析！从 Demo 了解小程序能力

- 作者：知晓程序
- 发布时间：2017-01-23 18:24
- 原文：https://www.ifanr.com/minapp/779544

![featured](https://s3.ifanr.com/wp-content/uploads/2017/01/Featured.jpg)

文 \| Marno

### 一、前言

2017 年的第一篇文章，不得不说一下最近火热微信小程序。

现在，小程序已经开放使用了，但是只能企业资质才能进行注册，个人开发者还是没有办法注册小程序。

今天，我就来针对官方推出的小程序接口体验 Demo，写一下体验报告。

首先一句话总结下我的感觉：**小程序真的很棒。**

虽然只是体验官方的 Demo，但已经感觉到小程序的强大之处，感觉很多 app 没有存在的必要了——至少有了小程序，我会卸载我手机里对应的 app。

### 二、功能

小程序可以实现的功能包括一些常用控件，以及后台播放音乐、视频弹幕、重力感应、Flex 布局、动画，等等。接下来我们就一起来了解一下。

官方 Demo 将功能分为两个大类，**一个是组件，另一个是接口。**

![01](https://s3.ifanr.com/wp-content/uploads/2017/01/01-5.jpg)

#### 组件

共计 7 类，包含 22 个组件。

**视图容器**

- `view`（固定视图，支持 Flex 排版）；
- `scroll-view`（滚动视图）；
- `swiper`（轮播图容器，可以控制自动播放、指示器、自动播放速度等）。

![02](https://s3.ifanr.com/wp-content/uploads/2017/01/02-5.jpg)

**基础内容**

- `text`（类似 Android 的 `TextView`，支持文字换行显示）；
- `icon`（一些常用的图标）；
- `progress`（进度条）。

![03](https://s3.ifanr.com/wp-content/uploads/2017/01/03-5.jpg)

**表单组件**

- `button`（`button` 上可以显示加载动画、可以设置禁用）；
- `checkbox；`
- `form`（可以提供表单提交的能力）；
- `input`（输入框，能监听输入事件，限制输入类型，设置 `hint` 内容）；

![04](https://s3.ifanr.com/wp-content/uploads/2017/01/04-4.jpg)

- `label；`
- `picker`（类似 Android 的 `WheelView`，**默认有普通、时间、日期三种选择器**，可以利用它轻松制作一个地区联动选择器）；

![05](https://s3.ifanr.com/wp-content/uploads/2017/01/05-3.jpg)

- `radio`（就是 Android 里的 `RadioButton`）；
- `slider`（拖动进度条）；
- `switch；`
- `textarea`（多行文本框。但它有一个 bug，即**在这个组件中输入完一行后，光标会跳到文本的最开始**）。

![06](https://s3.ifanr.com/wp-content/uploads/2017/01/06-3.jpg)

**导航**

`navigator` 组件可以方便地让开发者在不同页面之间进行跳转。

顺便说一句，**小程序的所有页面都具有滑动返回功能**。这给前端开发减少了不少工作量了。

![07](https://s3.ifanr.com/wp-content/uploads/2017/01/07-2.jpg)

**媒体组件**

- `image`（加载本地和网络图片）；
- `audio`（播放音频）；
- `video`（播放视频）。

![08](https://s3.ifanr.com/wp-content/uploads/2017/01/08-3.jpg)

视频可以添加弹幕，用户也可以直接选择全屏播放。嗯，程序员哥哥又可以少写好多代码。

需要注意的是，**选择全屏播放模式后，可以切换到竖向全屏播放，但是并不会退出全屏状态**。

![09](https://s3.ifanr.com/wp-content/uploads/2017/01/09-2.jpg)

**地图**

使用 `map` 组件，可以在小程序中打开一个地图。这个没什么说的，因为官方 Demo 就是显示一个地图，并且放置了一个定位图标。

![10](https://s3.ifanr.com/wp-content/uploads/2017/01/10-8.jpg)

**画布**

**你可以使用** `canvas` **组件，在小程序中描绘图形。**在官方 Demo 里，画了这么个东西：

![11](https://s3.ifanr.com/wp-content/uploads/2017/01/11-4.jpg)

#### 接口

共计 7 类，包含 30 个接口。

**微信能力**

- 微信登录；
- 获取用户信息；
- 发起支付。

![12](https://s3.ifanr.com/wp-content/uploads/2017/01/12-2.jpg)

**界面**

- 设置界面标题；
- 标题栏加载动画；
- 页面跳转；

![13](https://s3.ifanr.com/wp-content/uploads/2017/01/13-1.jpg)

- 下拉刷新；
- 创建动画（常见的补间动画都有）；
- 创建画布；

![14](https://s3.ifanr.com/wp-content/uploads/2017/01/14-1.jpg)

- 显示操作菜单 （弹出一个列表弹窗）；
- 显示弹窗 （类似 Android 的 `AlertDialog`）；

![15](https://s3.ifanr.com/wp-content/uploads/2017/01/15-3.jpg)

- 显示 Toast 消息提示框 （类似 Android 的 Toast）。

![16](https://s3.ifanr.com/wp-content/uploads/2017/01/16-2.jpg)

**设备**

- 获取手机网络状态；
- 获取手机系统信息；
- 监听重力感应数据；

![17](https://s3.ifanr.com/wp-content/uploads/2017/01/17-2.jpg)

- 监听罗盘数据；
- 打电话（有些手机**会带着号码到拨号界面**，不会直接拨出去）。

![18](https://s3.ifanr.com/wp-content/uploads/2017/01/18-2.jpg)

**网络**

- 发起一个 HTTP 请求；
- 发起一个 WebSocket 长连接请求；
- 上传文件；
- 下载文件。

Demo 中没有网络相关能力的展示，只是说明了小程序提供的网络能力。

![19](https://s3.ifanr.com/wp-content/uploads/2017/01/19-1.jpg)

**媒体**

媒体相关的小程序能力包括：

- 图片
- 录音
- 背景音频
- 文件
- 视频

图片包括**拍摄新照片**或**选取已有图片**。

![20](https://s3.ifanr.com/wp-content/uploads/2017/01/20-1.jpg)

录音接口，**可以录制不超过一分钟的音频**。在录制过程中，**小程序顶部导航栏会出现提示**。

![21](https://s3.ifanr.com/wp-content/uploads/2017/01/21-2.jpg)

**使用音乐接口播放的音乐，可以在后台进行播放。**即从小程序返回微信，或者按 Home 键返回桌面时，小程序都会继续在后台进行播放。

不过遗憾的是，小程序放入后台运行后，Android 的通知中没有音乐快捷操作。

![22](https://s3.ifanr.com/wp-content/uploads/2017/01/22-4.jpg)

在文件接口中，Demo 只是展示了图片的选取保存，不知道是否支持其他文件格式。**这里的文件是永久保存，下次打开小程序时候还可以使用。**

![23](https://s3.ifanr.com/wp-content/uploads/2017/01/23-3.jpg)

视频接口，**可以即时录制或选择已录制的视频**。但选择录制新视频时，也是通过系统的相机应用进行拍摄。

![24](https://s3.ifanr.com/wp-content/uploads/2017/01/24-3.jpg)

在小程序首次调用图片、录音、读写数据、文件等功能时，会**出现权限确认框**。

**位置**

- 获取当前位置（**定位后只能获取到经纬度**，地理信息还是需要自行获取）；
- 使用原生地图查看位置；
- 使用原生地图选择位置。

![25](https://s3.ifanr.com/wp-content/uploads/2017/01/25-5.jpg)

**数据**

和 Android 里 `SharedPreferences` 一样，**小程序支持直接保存键值对**，也是永久保存，在下次打开后可以进行读取。

![27](https://s3.ifanr.com/wp-content/uploads/2017/01/27-2.jpg)

### 三、Demo 里没有提到的

小程序在微信里，**可以收起到聊天回话列表中**，并且小程序在此时仍在运行。

![28](https://s3.ifanr.com/wp-content/uploads/2017/01/28-1.jpg)

开发版的小程序可以**直接在微信里开启调试模式**，可以调出控制台，查看日志、报错等信息。

![29](https://s3.ifanr.com/wp-content/uploads/2017/01/29-1.jpg)


原文地址：http://www.jianshu.com/p/ffb5395a194c

**本文由知晓程序授权转载，关注微信号 zxcx0101，回复「1228」获得全网第一本《小程序入门指南》电子书。**

![new_zx](https://s3.ifanr.com/wp-content/uploads/2017/01/new_zx-1.png)