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

文 | Marno

一、前言

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

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

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

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

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

二、功能

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

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

组件

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

视图容器

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

基础内容

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

表单组件

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

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

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

导航

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

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

媒体组件

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

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

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

地图

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

画布

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

接口

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

微信能力

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

界面

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

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

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

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

设备

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

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

网络

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

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

媒体

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

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

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

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

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

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

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

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

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

位置

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

数据

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

三、Demo 里没有提到的

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

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

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

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