微信小程序官方 Demo 体验报告

Marno
2,557 阅读7分钟

本文为Marno原创，转载请说明

转载地址(www.jianshu.com/p/ffb5395a1…)

一、前言

2017年的第一篇文章，不得不说一下最近火热微信小程序。从最开始内测时就在关注了，直到昨天才有时间去体验一下。虽然现在已经开放公测了，但是只能企业资质才能进行注册，个人开发者还是没有办法体验。所以我就替大家体验了，现在写一下体验报告。
首先一句话总结下我的感觉，小程序so fucking cool（我怎么可以说脏话？但实在情不自禁！）。昨晚上只是下载了官方的Demo体验了一下，虽然没有去详细看文档，但小程序远比我想的要强大的多，感觉很多App没有存在的必要了，至少有了小程序，我会卸载我手机里很多的App，当然前提是有对应的小程序可以代替。

二、功能（一大波图来袭，抓稳，要开车了）

先简单说一下小程序有哪些功能：可以后台播放音乐，视频还支持弹幕，常用控件都用了，不常用的也有，自带地图，支持重力感应，可以获取定位，支持Flex布局，还有各种动画，还支持canvas绘制.....太多太多，接下来我们就一起来了解一下。

2.1） 分类

官方demo将功能分为两个大类
2.2）组件（共计7类，包含22个组件）
  • 视图容器
    1. view（flex布局）
    2. scroll-view（滚动视图，滚动起来不是很流程）
    3. swiper（类似banner，可以控制是否自动播放，是否显示指示器，设置自动播放速度）
  • 基础内容
    1. text（类似Android的TextView，支持文字换行显示）
    2. icon（一些常用的图标）
    3. progress（水平进度条，目前自带的好像只支持水平的）
  • 表单组件
    1. button（button上可以显示加载动画，可以设置禁用）
    2. checkbox
    3. form（可以提供表单提交的能力，web童鞋都明白）
    4. input（输入框，能监听输入事件，限制输入类型，设置hint内容）
    5. label
    6. picker（类似Android的WheelView，默认有普通，时间，日期三种选择器，做个省市区三级联动选择，那简直是简单的不要不要的）
    7. radio（没错，就是Android里的RadioButton）
    8. silder（拖动进度条，和Android的SeekBar一样）
    9. switch
    10. textarea（多行文本输入，上面那个input不能换行，这个可以。就是这里我发现个bug，当我输入完一行后，光标会跳到文本的最开始）


  • 导航（这里说的可不是地图导航哦）
    1. navigator

顺便说一句，所有页面都具有滑动返回功能，si不si很激动？少写多少代码？
  • 媒体组件
    1. image（加载本地和网络图片，不知道是否支持占位图和加载动画等？）
    2. audio（播放音频）
    3. video（播放视频，可以添加弹幕，支持全屏播放，就是全屏后有个“打开QQ浏览器”的提示，不知能否去掉）

视频可以添加弹幕，好开森，又可以少写好多代码。


全屏播放后，可以切换到竖向全屏播放，但是并不会退出全屏状态。
  • 地图
    1. map（这个没什么说的，因为就是显示一个地图，没错是腾讯地图，并且放置了一个定位图标。具体还是要看下官方介绍，地图究竟支持些什么功能，这个很关键）

（没错，那个定位就是在深圳的腾讯大楼）
  • 画布
    1. canvas（就是说，你想什么就可以画什么，demo里画了这么东东↓↓↓）
2.3）接口（共计7类，包含30个接口）
  • 开放接口
    1. 微信登录
    2. 获取用户信息
    3. 发起支付

毫无疑问，肯定会支持这些功能，但是不知道会不会支持其他登录方式呢？比如微博？哈哈~（你在想什么骚年，怎么可能？！）
  • 界面
    1. 设置界面标题（虽然可以改标题，但是应该也是可以自定义的）
    2. 标题栏加载动画
    3. 页面跳转
    4. 下拉刷新（下拉刷新不知道可以修改动画不）
    5. 创建动画（常见补间动画都有）
    6. 创建绘画
    7. 显示操作菜单 （弹出一个列表弹窗）
    8. 显示弹窗 （类似Android的AlertDialog）
    9. toast显示消息提示框 （就是类似Android的Toast）



  • 设备
    1.获取手机网络状态
    1. 获取手机系统信息（SM901？？别想多了，哥这不是山寨机！是Smartisan M1）
    2. 监听重力感应数据（意思是写个游戏也可以玩？）
    3. 监听罗盘数据
    4. 打电话（会调到拨号界面，不会直接拨出去）

  • 网络
    1. 发起一个请求
    2. WebSocket
    3. 上传文件
    4. 下载文件

demo中并没有展示什么，但是告诉我们小程序提供了接口访问能力，上传下载文件的能力，后面我出一个系列的文章详细介绍具体的内容。
  • 媒体
    1. 图片
    2. 录音
    3. 背景音频
    4. 文件
    5. 视频

图片是指拍摄或选取图片。这里选择图片之前会弹出一个权限确认框来，我手贱安快了，忘记了截图，后面试了重新打开，退出微信也都不会出现确认框了。之后的录音和保存读取数据、文件等功能也会出现权限确认框，不巧的是我居然都没有截图。

录音

背景音乐其实就是可以在后台进行播放，当你退出小程序，或者按home返回桌面时都会在后台进行播放。这是不意味着像我这个偶尔听一下音乐的人，基本就可以卸载网易云音乐了？不过遗憾的是当音乐到后台以后，通知中心并不会有快捷操作按钮，不知道代码中是否提供了这样的能力？

虽然是文件功能，但是demo只是展示了图片的选取保存，不知道是不是也支持其他文件格式。这里的文件是永久保存了，下次打开小程序时候还可以使用，那是不是我可以开发一款清理小程序垃圾文件的小程序应用呢？

可以拍摄或选择已经排好的视频，不过这里拍摄视频也是通过系统的照相机拍摄，不知道微信自带的拍摄小视频的界面能否提供给小程序调用呢？
  • 位置
    1. 获取当前位置（定位后只能获取到经纬度，地理信息还是需要自行获取）
    2. 使用原生地图查看位置
    3. 使用原生地图选择位置

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

三、demo里没有说到的事

1.小程序在微信里，可以收起到聊天回话列表中，并且小程序当前所在状态会被记录下来，但是不知道是不是只有demo才是这样。


2.按下Home 键后，小程序会自动收起到聊天回话列表中，目前还看不出是否可以同时开启多个小程序，不过目测应该不行。
3.小程序可以直接在微信里开启调试模式，可以显示控制台查看日志和报错等信息。

四、总结

这次体验仅仅针对官方提供的demo，不知道除了这些功能是否还提供了其他功能。我猜想应该还是有的吧，这次简单的体验惊艳到我了。微信都这么牛了，是不是下一步就是做系统，做手机了呢？最后也欢迎大家持续关注我的简书，后续我会把我学习小程序开发的点点滴滴都分享出来。

avatar
文章
阅读
粉丝