我从技术角度聊聊小程序.

先来个开发界面截图.



工程项目,编辑开发,运行调试,打包部署...开发模式一条龙,完整的IDE.
再看看使用的语言,技术规范...虽然借鉴了react,vue等前端理念,但事实上他是一套完全封闭的技术体系,这套体系只能用于开发小程序.
啊!!!场景何其熟悉...android开发借鉴了java的技术理念和规范,但却是完全独立封闭的技术体系,只能用于开发安卓OS下的app...

说到这里,大家明白了.微信已经是个OS.有自己的开发模式,有自己的开发语言,有自己的API.比起安卓更可怕的是,微信是个云端OS.所有的开发,部署,接口,数据流转都是基于微信这么个超级云服务上.

======================下完定义的分割线=====================

Q : 小程序真的是用H5开发吗?
A : 答案显然是NO.小程序用的是一套全新的技术规范和技术架构,它是微信自有的,它借鉴了许多前端开发的技术理念,例如他用react实现"组件",例如用vue实现标签式逻辑与数据绑定,甚至用CMD的require作为面向对象的js引入.你可以说它用javascript语言和标签语言和css语言来写程序,你可以说它90%跟web前端开发一样,你也可以说任何一个有经验的web前端只需要花费十分钟时间就能快速上手小程序开发,但他依然不是标准化的H5+css3+javascript,也就是说小程序其实和w3c规范的那个html5+css3没半毛钱关系.
我这么说,论据有以下几个:

1. 小程序中没法使用dom,而且页面也不是基于window,document这些内置对象来做编程.这意味着现有前端领域的绝大部分第三方框架如Jquery,Zepto都是不能用的,就更不用提其他UI类的框架了(例如各种滚屏框架,chart图表框架,富文本框架等).另外,小程序的javascript上下文中自带了wx对象,也就是原来公众号开发中js-sdk的主对象.
2. 小程序的标签不是html,它是借鉴react理念定义出来的一整套新的标签库,它只能运行在微信的浏览器下.这意味着我们以往在服务号,企业号或者通过浏览器访问的前端项目代码,无法直接移植到小程序.
   参考以上代码,小程序的页面以page为主体对应html的body,以view标签对应html的div做区域布局,以各种form,input,silder等标签对应html中各种组件标签.理念很相似,但细节相差巨大.
3. html+css+js 和 wxml+wxss+js .
   如上图,官方demo中一个标准页面对应的代码是这些.
   微信小程序定义了自己的一套模型,理念上学习了主流前端开发中数据/样式/控制分离,并且省去了各类繁琐的关联配置,而是从规范上规定了每个"页面"需要有同名的三个文件,各司其职.
   目前从观察上发现,.js文件采用的依然是标准的javascript语法,wxss中采用了标准的css语法(我相信只是部分使用,因为css本身也是基于dom的选择器语言),而wxml与html的区别则比较大.
4. 小程序的页面是基于本地的,无需通过服务端请求.任何页面跳转都可以不通过服务端交互.这无疑比起服务号/企业号等基于h5的模式拥有更佳的用户体验,或许接近原生app的体验.
   如上图,我在demo中点击页面跳转时network栏中都显示没有任何http交互.

Q : 原有做服务号/企业号开发的工程师如何切换到小程序开发?
A : 前面说过由于小程序采用完全独有技术架构而非h5,所以原有的服务号/企业号应用是无法直接迁移到小程序的.小程序的开发也不是采用h5+css3+javascript的模式.
不过从技术理念和开发模式上看,有经验的前端开发人员可以快速切换到小程序开发.下面简单列一下一个前端开发工程师开发一个小程序的顺序:

1. 创建一个模块(页面).
   前端开发是以"页面"为单位,我身边的工程师在谈论自己工作量很重的时候喜欢说"我周末又得加班了,我还有X个页面没做...".同样的,小程序也是以"页"作为工作计量单位的.创建模块(test)即会创建出三个文件test.js,test.wxml,test.wxss.
   
2. 切图,还是得切图.
   UI给出的设计图,以前怎么切还是得怎么切,切完把html拷到wxml文件中,把css拷贝到wxss文件中,image也按照示例工程的规范放到对应位置.
   然后就是暂时我也不知道应该如何更高效处理的步骤,就是把html的div,form,input,select等等的标签替换成view,text,image等等的自有组件.把css修改成以class为主体的wxss.
3. 让小程序跑起来.
   js文件写入简单的初始化逻辑,直接用微信开发工具让小程序跑起来.OK,接下来就是根据设计图的细节,逐步调整小程序"页面"的美术效果了.
4. 绑入事件,加入交互控制的逻辑.
   和web前端开发一样,小程序的交互控制也是事件驱动的,也是绑定各种按钮的onclick事件(小程序里面用bindtap),然后,在test.js里面处理各种交互逻辑.
   
5. 绑入数据.
   数据哪来呢?也许是页面初始化的时候通过request(ajax)从服务端请求而来.目前官方的demo中只说了数据请求采用内置的request,但没有具体的交互示例.不过不用猜也知道应该是通过http+json的模式来走.相当于小程序内置封装了ajax交互的接口.
   请求回来的数据,通过标签式的逻辑和模板数据的方式填入页面,这个其实是借鉴了vue的理念,如下图.
   获取数据后,小程序通过对组件setData的方式将数据装入组件中.这是小程序开发和web前端开发最大的不同,小程序是基于组件的,web前端是基于dom的.
6. 最后列举一些小程序开发借鉴h5但可以发挥出比h5更强功力的功能.
   1) 本地存储localStorage.这是h5的特色功能,但即将会在小程序身上发光发热.由于小程序的页面都是本地化存储,这意味着在没有网络的环境下也可以使用.那么结合本地存储,小程序可以满足暂时断网或网络情况较差的场景需求.这是做服务号开发所无法实现的.
   2) 图形化canvas.小程序运行在微信上,微信不仅是一个web浏览器,它有能力向图像化功能提供更好的效果和更优的性能.
   3) 服务端主动推送websocket.官方的demo中对于websocket功能的展望是说可以实现实时IM对话.
   呵呵.不难理解.展望吧.
   4) 比服务号jssdk更丰富的原生能力.地理位置,重力感应,陀螺仪,本地文件...太多可以期待的能力了.

(未完,待补...今天花太多时间写东西了,得赶紧去干活...)

===================广告的分割线===================
关注我的公众号,请搜索 : 全栈生姜头

http://weixin.qq.com/r/3TkOFovEXdYirc9192zP (二维码自动识别)

公众号原文：
微信小程序来了!!!程序猿们你们路在何方? [前端篇]