微信小程序接口全解析!从官方 Demo 了解小程序的能力

文 | Marno

一、前言

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

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

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

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

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

二、功能

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

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

组件

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

视图容器

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

基础内容

  • text(类似 Android 的 TextView,支持文字换行显示);
  • icon(一些常用的图标);
  • progress(进度条)。

表单组件

  • buttonbutton 上可以显示加载动画、可以设置禁用);
  • 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」获得全网第一本《小程序入门指南》电子书。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-01-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏古时的风筝

最简单的数据抓取教程,人人都用得上

Web Scraper 是一款免费的,适用于普通用户(不需要专业 IT 技术的)的爬虫工具,可以方便的通过鼠标和简单配置获取你所想要数据。例如知乎回答列表、微...

4438
来自专栏python学习指南

Python爬虫(十九)_动态HTML介绍

JavaScript JavaScript是网络上最常用也是支持者对多的客户端脚本语言。它可以收集用户的跟踪数据,不需要重载页面直接提交表单,在页面嵌入多媒体文...

1565
来自专栏木子昭的博客

提升前端效率的十款工具(上篇)

可以通过npm全局安装一个http-server,当需要开启服务的时候, 通过命令行,跳转到需要开启服务的文件夹下, 开启服务即可!

822
来自专栏知晓程序

如何从零开始,做一个跑步小程序?| 实战案例

1144
来自专栏Material Design组件

Human Interface Guidelines — Modality

1223
来自专栏不二小段

公众号开发改动&教程、源码分享

放了半年的公众号拿出来做了一些简单的开发。目前功能如下: 1、回复 快递xxxxxx 自动识别快递公司 2、发送图片 识别性别和年龄 3、其他文字信息 原样返回...

34612
来自专栏python小白到大牛

动漫迷的福利!Python小白也可以学会的爬虫教程

有一段没用 python 了,我也不知道自己为什么对 python 越来越淡,可能自己还是比较喜欢 android ,毕竟自己第一次接触编程就是 android...

1012
来自专栏FreeBuf

Firefox/Chrome渗透测试插件推荐

注意:360安全浏览器有些比较不错的功能值得体验下(firefox/chrome有些功能我没能正常使用)不喜勿喷。firefox一直是各位渗透测试必备的利器,这...

4817
来自专栏HaHack

comment.js:一个纯JS实现的静态站点评论系统

1394
来自专栏小程序之家

如何在小程序中实现视频播放

在如何使用小程序媒体组件这篇文章中,我们简单介绍了video视频组件的使用,这篇文章中,将对视频播放做一些补充,同时介绍API的使用。

2040

扫码关注云+社区