什么是微信小程序
腾讯公司于2016年9月21日开始微信小程序内测,一时间小程序的讨论热度不断。网络上流传一张张小龙的朋友圈,给了小程序的定义:小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。
(图片来源于网络)
小程序的本质是第三方开发者将前端展示交互层以微信的标准发布到腾讯云服务,为了达到更加丰富的效果,腾讯提供了丰富的组件和API。按照上面的理解,微信小程序同苹果的App Store如出一辙,只是使用的技术不同,App Store是第三方客户端运行在苹果的操作系统中,而小程序是第三方页面运行在腾讯的微信APP中。
小程序的推出并非毫无征兆,早在2016年1月的微信公开课上,微信之父张小龙就透露微信即将推出应用号。甚至在更早的PC时代,腾讯就曾推出WebQQ,用户可以通过PC浏览器访问WebQQ,通过QQ账号登录WebQQ可使用应用市场中的各类在线服务,从而引发了关于腾讯WebOS概念的讨论。WebQQ发展的结果不是很好,不但是因为受制于当时网络速度、PC计算性能等基础条件制约,还与PC用户对专业性、多样性要求较高但Web模式很难满足有关。不同的是,微信小程序用完即走的理念,十分符合移动互联网用户使用时间碎片化的特点。因此,业内普遍看好小程序的前景,小程序引发了极高的关注度。
要用小程序做什么
微信小程序SWOT分析
基于微信的技术文档分析,微信小程序能覆盖大部分的APP常用功能,只是目前的API列表还不支持与指纹、蓝牙等依赖硬件的接口。小程序有这么大的开放性和完成度,作为一个企业,应该用小程序实现什么业务??笔者这里对小程序做了SWOT分析,来得出结论。
优势Strenths:
1.无需安装、随用随点:对比于APP,用户使用成本更低,无需下载安装,通过搜索、扫码、摇一摇、点击分享等形式(目前微信小程序入口形式还未公布,按照笔者对微信的理解,大概为上面几种)即可达到类APP的体验。在Android系统中,若腾讯将微信小程序图标发布到操作系统桌面中,可令用户几乎分辨不出原生APP与小程序。
2.跨平台开发:微信APP已屏蔽了IOS和Android的差异,在相同版本的微信APP下,开发者无需关心操作系统的类型与版本,一套代码可满足各平台需求。
3.丰富的组件和API:
a)Websocket:支持浏览器与服务器全双工通信
b)视图组件:按钮、表单、弹窗、导航、媒体、地图、画布等
c)多媒体支持:图片、音频、视频、文件等
d)数据缓存:可通过同步或异步接口对本地缓存进行设置、获取和清理
e)硬件支持:可获得陀螺仪、罗盘等数据信息
f)微信开放接口:微信登录、微信用户信息、微信支付、模板消息等
劣势Threats:
1.客户端计算能力不及APP:因微信小程序使用H5技术,代码运行环境为webkit引擎,无法运行复杂的大型计算,某些场景无法支持。
2.不支持第三方插件:无法向PC浏览器、手机客户端那样安装或嵌入编译好的第三方插件,无法以插件的形式提供安全的密码控件。
机会Opportunities:
1.巨大流量入口:微信作为国内装机量最大的APP,月活用户已超过8亿,微信朋友圈用户粘度很高,利于小程序的推广使用。
2.技术较为成熟:小程序所需技能点为html+js+css,相关技术从业人员广、技术成熟,开发上手容易,学习成本低。
3.满足客户新鲜感体验:微信小程序刚刚推出,网络讨论热度高,部分用户会出于尝鲜心理体验小程序。
威胁Threats:
1.数据安全性较低:小程序的编写语言为解释执行语言,发布小程序需把源码发布到腾讯服务器,运行环境为微信APP内嵌浏览器,开发者需对腾讯的信任级别达到操作系统级别。
2.自由度受制于微信:接口和权限均依赖于微信及其API,小程序能实现的功能场景,完全依赖于微信APP提供的能力。小程序的开发自由度是没有native app高的。
3.对自家APP造成冲击:因为小程序良好的体验和强大的可扩展性,客户容易分流,对自家APP的装机量和使用时长造成冲击。
SWOT分析
民生银行微信小程序可以做什么
基于上面的SWOT分析结果,小程序适合做低频、刚需、不涉及客户重要密码的场景,比如便民服务、营销获客、投资顾问、查账还款等,并借助微信的广大客户群容易快速获得流量,将流量引导到手机银行高频的实用场景中,反哺自有渠道的发展。小程序是基于瘦客户端的移动互联网渠道,可定位为现有微信银行的延伸和手机银行的补充。对于涉及客户账户的金融类服务,尤其是涉及密码的动账场景,谨慎在小程序中做。
微信端的密码控件之路
现有方案:
基于目前的接口,微信小程序可复用公众号页面的密码控件解决方案——H5密码键盘。其原理是用H5在密码输入框周围绘出动态密码键盘,连续捕捉动态密码键盘的点击事件,通过js方法对密码键盘的输入结果和密钥、动态随机数等因子计算得出密文,然后传到服务端验密。但受限于js的解释执行性质,H5密码键盘安全级别并没有APP版本和PC浏览器插件版本的高。
畅想方案:
微信小程序第一版的API是支持音频录音和上传录音文件的。原理上,是可以通过音频key或外置音频密码键盘记录形成密文音频,客户端可将音频文件上传至服务器端解析验证。但因小程序不支持客户端对数据文件的解析,而服务器端对音频文件的集中处理亦不实用。
结合外置音频密码键盘或音频key的想法,可以建议腾讯发布一套公用的音频信息解析标准并配有相应native获取解析结果的方法,开发者可按照腾讯的标准定制专属密码键盘或音频key。此方案中,外置密码键盘负责记录密码的输入,结合密码因子加密成音频信号,微信小程序提供API负责将音频解码成密文,这样就能解决渠道方截取密码的问题。
微信小程序技术介绍
技术框架
小程序的技术框架命名MINA,意思是MINA IS NOT APP。MINA程序包含一个描述整体程序的app和多个描述各自页面的page。
MINA提供给开发者的方式也在发生全面的改变,从操作DOM转为操作数据,基于微信提供的一个过桥工具实现很多h5在公众号很难实现的功能,有点类似于hybrid开发,不同于hybrid开发的方式是:微信开放的接口更为严谨,结构必须采用他提供给我们的组件,外部的框架和插件都不能在这里使用上,让开发者完全脱离操作DOM,开发思想转变很大。
文件目录
每个子页面可包括4个文件:
1.WXML:(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。与HTML类似,WXML也采用了声明式结构,具体作用和HTML一样构造页面结构。不过从变现形式来看WXML更加类似于XML。WXML提供了数据绑定、列表渲染、条件渲染、模板、事件这些能力。
2.WXSS:(WeiXin Style Sheets)是MINA设计的一套样式语言,用于描述WXML的组件样式。WXSS类似于CSS,都是用来控制页面元素的样式。微信官方称WXSS具备CSS的大部分特性,这点和React Native以及Weex一样,都是CSS的子集,但是具备哪些CSS特性官方并没有公布。除此之外,WXSS还引入了样式单位这个概念。
3.JSON:项目的结构和一些项目配置
4.JS:页面逻辑
微信UI匹配的基础组件
2016年1月20日微信官方团队便开源了WeUI这套UI组件,随着微信小程序的推出,WeUI也发布了1.0 Release。微信小程序提供的组件就是基于WeUI演进而来的。基础组件分为以下八大类:
视图容器(View Container):
view 视图容器
scroll-view 可滚动视图容器
swiper 可滑动的视图容器
基础内容(Basic Content):
icon 图标
text 文字
progress 进度条
表单(Form):
button 按钮
form 表单
input 输入框
checkbox 单项选择器
radio 多项选择器
picker 列表选择器
slider 滑动选择器
switch 开关选择器
label 标签
操作反馈(Interaction):
action-sheet 上拉菜单
modal 模态弹窗
toast 短通知
导航(Navigation):
navigator 应用内跳转
多媒体(Media):
audio 音频
image 图片
video 视频
地图(Map):
map 地图
画布(Canvas):
canvas 画布
调用底层功能的API
微信小程序提供了丰富的微信原生API,可以方便的调起微信提供的能力。具体API如下:
网络API列表
wx.request发起网络请求
wx.uploadFile上传文件
wx.downloadFile下载文件
wx.connectSocket创建WebSocket连接
wx.onSocketOpen监听WebSocket打开
wx.onSocketError监听WebSocket错误
wx.sendSocketMessage发送WebSocket消息
wx.onSocketMessage接受WebSocket消息
wx.closeSocket关闭WebSocket连接
wx.onSocketClose监听WebSocket关闭
媒体API列表
wx.chooseImage从相册选择图片,或者拍照
wx.previewImage预览图片
wx.startRecord开始录音
wx.stopRecord结束录音
wx.playVoice播放语音
wx.pauseVoice暂停播放语音
wx.stopVoice结束播放语音
wx.getBackgroundAudioPlayerState获取音乐播放状态
wx.playBackgroundAudio播放音乐
wx.pauseBackgroundAudio暂停播放音乐
wx.seekBackgroundAudio控制音乐播放进度
wx.stopBackgroundAudio停止播放音乐
wx.onBackgroundAudioPlay监听音乐开始播放
wx.onBackgroundAudioStop监听音乐结束
wx.chooseVideo从相册选择视频,或者拍摄
wx.saveFile保存文件
数据API列表
wx.getStorage获取本地数据缓存
wx.setStorage设置本地数据缓存
wx.clearStorage清理本地数据缓存
位置API列表
wx.getLocation获取当前位置
wx.openLocation打开内置地图
设备API列表
wx.getNetworkType获取网络类型
wx.getSystemInfo获取系统信息
wx.onAccelerometerChange监听重力感应数据
wx.onCompassChange监听罗盘数据
界面API列表
wx.setNavigationBarTitle设置当前页面标题
wx.showNavigationBarLoading显示导航条加载动画
wx.hideNavigationBarLoading隐藏导航条加载动画
wx.navagateTo新窗口打开页面
wx.redirectTo原窗口打开页面
wx.navagateBack退回上一个页面
wx.createAnimation动画
wx.createContext创建绘图上下文
wx.drawCanvas绘图
wx.hideKeyboard隐藏键盘
wx.stopPullDownRefresh停止下拉刷新动画
开放接口
wx.login登录
wx.getUserInfo获取用户信息
wx.requestPayment发起微信支付
lDE——微信开发者工具
生命周期函数
下图说明了Page实例的生命周期。
详细基础组件和API列表请参考微信小程序官方API文档:
https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=1474644083871
结论
1.微信小程序给我们提供了一个新的线上服务渠道,还不能完全替代APP;
2.微信小程序本质是web应用,可以在手机web实施的,都可以在小程序实施;
3.微信提供了一套非常完整的基础组件及丰富的API接口,并且封装效果十分好,很大的提升了开发人员的开发效率(必须具备一定的前端水平);
4.微信小程序因为并不能跑在微信应用里,所以性能到底如何还是个未知数;
5.微信小程序适合做低频、刚需、不涉及重要密码的场景,并引流到自有APP;
6.微信小程序的开发模式必须完全遵守官方的规范,且和现有的前端框架不兼容,会带来学习及开发成本(不排除日后官方或社区推出各种XXX转微信小应用的工具);
7.微信小程序的模式,给我们客户端开发平台和前端开发框架带来新的设计思路:平台组可着重完善与业务无关的native app部分,并开放丰富的API列表;交付组基于API进行具体业务功能的开发。