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

·  阅读 2389
微信小程序官方 Demo 体验报告

本文为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,不知道除了这些功能是否还提供了其他功能。我猜想应该还是有的吧,这次简单的体验惊艳到我了。微信都这么牛了,是不是下一步就是做系统,做手机了呢?最后也欢迎大家持续关注我的简书,后续我会把我学习小程序开发的点点滴滴都分享出来。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改