微信小程序调研

什么是微信小程序

腾讯公司于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进行具体业务功能的开发。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,522评论 25 707
  • 人性善 亦恶?我不清楚,可是有些事情,只能抱着,嗅着那一点微弱的光明,给予我希望,让我在这满目疮痍的、勾心斗角的生...
    自悲自喜阅读 214评论 0 0
  • 儿子经过这几天的旷课事件后今天正常上学了。晚上化学补习也正常进行。晚饭时心情还不错,和我们聊了几句。感赏儿子坚持学...
    宁静致远_39f3阅读 155评论 1 1
  • 我們每天都應好好感恩,感恩每天發生的一切,有一份固定工作,有一個家庭,有一位好朋友,有爭取知識的權利,有吃飽睡覺的...
    tang_wt阅读 139评论 0 0
  • 恵山三角亭 5月5日,上午去三角亭。交款1600元。泠称也去惠山。洪晓也去,柏梁也去,许多游友也去。 每天都应快乐...
    蔡衍波阅读 138评论 0 0