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

爱范儿  •  扫码分享
我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

文 | Marno

一、前言

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

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

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

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

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

二、功能

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

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

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

组件

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

视图容器

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

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

基础内容

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

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

表单组件

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

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

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

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

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

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

导航

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

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

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

媒体组件

  • image (加载本地和网络图片);
  • audio (播放音频);
  • video (播放视频)。

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

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

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

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

地图

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

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

画布

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

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

接口

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

微信能力

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

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

界面

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

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

  • 下拉刷新;
  • 创建动画(常见的补间动画都有);
  • 创建画布;

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

  • 显示操作菜单 (弹出一个列表弹窗);
  • 显示弹窗 (类似 Android 的 AlertDialog );

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

  • 显示 Toast 消息提示框 (类似 Android 的 Toast)。

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

设备

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

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

  • 监听罗盘数据;
  • 打电话(有些手机 会带着号码到拨号界面 ,不会直接拨出去)。

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

网络

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

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

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

媒体

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

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

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

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

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

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

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

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

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

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

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

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

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

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

位置

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

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

数据

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

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

三、Demo 里没有提到的

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

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

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

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

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

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

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

随意打赏

微信小程序上线
提交建议
微信扫一扫,分享给好友吧。