专栏首页知晓程序微信小程序接口全解析!从官方 Demo 了解小程序的能力

微信小程序接口全解析!从官方 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),作者:让你更知小程序的

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 个人开发者能做哪几类小程序?| 小程序问答 #45

    在文章或后台留言中,很多人都会问我们这个问题:个人开发者到底可以开发什么类目的小程序?

    知晓君
  • 暴漫新做的小程序又上榜了!王尼玛睡着都能笑出声吧? | 晓榜 #34

    要知道,买买买剁完手之后,就该操心快递物流的事了。贴心的知晓程序为你准备了一款国家邮政局推出的小程序,无论你是要查快递还是寄快递,无论你要寄哪家公司的快递,这一...

    知晓君
  • 快收下这 5 个小程序!不然,你很可能活不过这个冬天

    马上要步入 12 月份,北方的一些地区已经迎来了今年的第一场雪。然而,广州却还是入冬失败,依旧温暖如春。

    知晓君
  • 个人开发者能做哪几类小程序?| 小程序问答 #45

    在文章或后台留言中,很多人都会问我们这个问题:个人开发者到底可以开发什么类目的小程序?

    知晓君
  • “我的小程序”来了 新版微信v6.7.1下拉就能找到

      今天iOS版微信迎来v6.7.1正式版发布,本次升级主要是可以把常用的小程序添加到“我的小程序”。近期版本微信可以直接浏览订阅号的消息,扫一扫可拍照翻译整页...

    ytkah
  • 小程序赋能新商业机会 究竟有哪些行业适合入驻开发小程序呢?

    2018年6月底小程序C端用户达到2.8亿、小程序数量达到100万,而此次阿拉丁2018年上半年白皮书研究报告将会给予开发者、运营者、创业者、投资人更多行业洞察...

    速成应用小程序开发平台
  • 上个月,这些小程序最红最火最好用!看看你错过了哪些? | 晓榜 #36

    从今天开始,每一个月,知晓程序(微信号 zxcx0101)将为大家精心挑选本月最新、最有趣、最实用的小程序,并收集到当月的「晓榜」里。

    知晓君
  • 工作总是做不完?这 4 款时间管理小程序,让你做个效率狂人

    很多人都曾经因为一时的热情,给自己制订了远大的计划。但是由于拖延症和懒癌,预定的计划总是没法完成,走上人生巅峰遥遥不可期。

    知晓君
  • 小程序商店更新:支持模糊搜索,一键复制小程序全名

    知晓君
  • 2300多家微信小程序第三方代理加盟平台比较实在可靠的有哪些?

    小程序,是基于微信平台的一个划时代产品,也就是嵌入到微信里的一个功能丰富、操作简洁的轻应用,不需要下载安装即可使用。不同的小程序,能实现不同的功能。例如,买电影...

    速成应用

扫码关注云+社区

领取腾讯云代金券