微信小程序分享

大家好,我是技术部做前端工作的Ryan,关于微信小程序的概念和功能以及它的前景,前边Tim已经介绍的非常详细,而我将以前端的视角为大家介绍一下微信小程序。也就是PPT中看到的:

  1. 微信小程序与H5的区别

  2. 微信小程序框架的特性

首先我们简单介绍一下已经风靡很久的H5


HTML5的传统定义:是在HTML4标准的基础上扩展了无数的酷炫功能的新标准,即HTML5。可以看到,HTML4是97年发布的,HTML5直到2014年才制定完成,所以这个历时这么久的标准推出后火爆这么久也是可以理解的。

经过了这么久H5的洗礼,我们眼中的H5大多数时候是指代这些东西:网页小游戏,幻灯片(如易企秀),邀请函等酷炫网页,且能在浏览器、webview中无缝转换。相信PPT上的这些图片都曾经在你的微信中或开发需求中亮相过不止一次

接下来便是我们今天的主角---微信小程序


这里我列了一张表用来对比HTML5与微信小程序之间的主要区别

第一条是运行环境的不同。

传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,大家注意,我这里写的是“非完整的浏览器”,有以下几个原因

  1. 小程序的开发过程中会用到HTML5相关的技术(并非全部)

  2. 小程序最后的发布上线需要微信审核,微信在不更新自身软件的情况下可以将小程序更新到自身软件内,这就联想到了React Native框架,并且已经有开发者在微信小程序的开发工具源码中发现使用了React和NodeWebkit库

  3. 官方文档中着重强调了脚本内是无法使用浏览器中常用的window对象和document对象(基于这一点,像zepto/jquery这种操作dom的库就被完全抛弃了)

所以我个人认为,小程序的运行环境很有可能是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能。

不过由于微信给开发者提供了开发工具,而开发工具中也内置了编程、调试、开发环境、发布于一身,我们也不用再探讨它的最终运行环境了,只要按照官方文档进行开发就可以了。并且从微信团队给开发者提供开发工具这一举动,让我联想到了苹果给开发者提供的X-CODE开发工具,可以想象微信的“野心”可见一斑


第二条是开发成本的不同。

这里我提出了一个问题,当我们面对一个HTML5 web开发需求时,我们需要考虑什么呢?抛去开发工具(vscode、sublimtext、Atom等)不谈,大到前端框架(Angular、react、vue、backbone等)、模块管理工具(Webpack 、Browserify 等)、任务管理工具(Grunt、Gulp等),小到UI库选择、接口调用工具(ajax、Fetch Api等)、浏览器兼容性等都要我们一一考略,再不济用jqery插件写H5,也要在开发过程中去寻找合适的jquery插件来配合项目。尽管这些工具可定制化非常高,并且提高了开发者的开发效率,但我相信项目开发的配置工作已经消耗了不少精力,尽管大部分开发者都有自己的配置模板,但长久以来对于项目中使用的各种外部库的版本迭代、版本升级所产生的成本应该也不低。

而当我们面对一个微信小程序的开发需求时,我们需要考虑什么呢?微信团队提供了开发者工具,并且规范了开发标准,前端常见的HTML、CSS变成了微信自定义的WXML、WXSS,WXML中尽管全部是自定义标签,但官方文档中都有明确的使用介绍,相信上手应该是非常容易的;WXSS、JSON和JS文件中的写法稍有限制,但整体相差不多。在统一了这些标准之后,作为一个开发者,你会发现,自己只要专注写程序就可以了:

  1. 当需要调用后端接口时,调用发起请求API

  2. 当需要上传下载时,调用上传下载API

  3. 当需要数据缓存时,调用本地存储API

  4. 引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用

  5. UI库方面,框架自然带有自家weui库加成

并且在使用这些API时,你不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG,可见微信小程序的开发成本确实相比以往的web开发低很多。


第三条是获取系统级权限的不同。

微信小程序相对于HTML5 web应用能获得更多的系统权限,比如网络通信状态、数据缓存能力等,这些系统级权限都可以和微信小程序无缝衔接,也就是官方宣称的拥有Native App的流畅性能,而这一点恰巧是HTML5 web应用经常被诟病的地方,这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。


第四条便是应用在生产环境的运行流畅度。

这条无论对于用户还是开发者来说,都是最直观的感受。长久以来,当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时,它的体验总是不尽人意,需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立,尽管同样用html+css+js去开发,但配合微信的解析器最终渲染出来的是原生组件的效果,自然体验上将会更进一步。

最后我们看下微信小程序的特性


这里我总结了小程序框架的四个特性

第一个特性是数据驱动。
现在流行的前端框架全部都是数据驱动,几乎已经摒弃了操作DOM的方式,因为大家都发现浏览器中操作DOM是损耗性能的大头,也是前端项目性能提升的瓶颈,因此通过修改数据去重新渲染页面来避免操作DOM,是前端工程化的趋势,那么微信小程序框架采取同样的模式,也无可厚非

第二个特性是开发标准化。
大部分前端工程师,都有自己得心应手的整套工具,大到项目框架技术选型,小到css用less还是postcss进行预编译,都会选择自己比较满意的第三方库,但是在团队协作开发项目时,这些个人特色可能就影响到项目的开发、维护等。微信小程序将开发语言、开发环境、开发工具标准化后,不但提升了开发效率,还提高了项目的可维护性,降低了开发成本,版本迭代加快。

第三个特性是API功能强大。
可以直接使用原生APP的网络通信和数据缓存能力,无缝接入地图、扫一扫等功能,可以想象小程序的应用领域非常广

第四个特性是学习成本低,上手快。
该框架内的基础概念,如模板语法、生命周期、接口调用方法都与当前流行的前端框架基础概念大致相同,所以对于新开发者来说非常友好。


综上可以看出微信小程序确实解决了很多目前开发者的痛点,并给出了不错的解决方案,再加上自己移动端流量大户的buff加成,相信小程序的前景非常可观。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,050评论 25 707
  • 欢迎来我的博客阅读:「有赞微信小程序分享 — 概念篇」 在 2016 年 9 月 23 日 微信小程序内测开始以来...
    JC_Huang阅读 3,131评论 0 5
  • 在这里,我推荐两个测试工具。 1.火狐浏览器的HttpRequester 这个的工具可以测试局域网内的api,...
    changxiaonan阅读 739评论 0 0
  • 带着目的做事与带着觉察做事:两者有交叉,但不尽相同,本人文学功底不好,学术上解释不清楚,略表拙见,还是喜欢从心理学...
    yqzyyll阅读 329评论 0 1
  • CAP理论概述 一个分布式系统最多只能同时满足一致性(Consistency)、可用性(Availability)...
    我要当老司机阅读 600评论 0 1