前言2016年9月22日凌晨，微信官方通过“微信公开课”发布了关于微信小程序（微信申请号）内测的通知公众号。整个朋友圈瞬间炸了，各种猜测和介绍文章一夜之间诞生。据说真正收到内测邀请的只有200公众号。虽然内测名额非常多，但靠着国内广大开发者的破解和分享精神，破解版的开发工具和API文档很快就出现在了网络上。不过，这可能是微信的妥协，也可能是早有预料。9月24日，微信官方发布了无需破解即可使用的微信小程序开发者工具和文档。好吧。以下是微信提供的开发工具和文档地址：https://mp.weixin.qq.com/debu...作为一个有极客精神的前端开发者，我也在这股热潮中尝试了Go下水下载小程序开发工具。以下是登录后的界面：从整体结构布局来看，这款IDE工具可以分为三个部分。首先，左边是导航操作区，中间是目录或显示区，右边是调试区（很像Chrome的调试工具）。下面我将从前端的角度，从代码的角度，宏观的角度介绍一下我对微信小程序的看法。从代码的角度来看整个开发文档，微信小程序的前端技术主要分为“框架”、“组件”和“API接口”。1.框架微信提供了自己的小程序开发前端框架。与目前主流的前端框架相比，既有相似之处，也有特殊之处。特殊之处在于只能在微信小程序开发工具中使用，有比较严格的使用和配置限制。开发者必须按照规定的用途使用它。一些外部框架和插件不能在小程序中使用，而且由于框架不运行在浏览器中，所以JavaScript的一些能力在web中是不能使用的，比如document、window等。相似之处在于它包含了和其他框架一样的“逻辑层”和“视图层”，主要是数据驱动，不操作DOM元素。以下代码为例介绍：(1)数据绑定{{message}}//page.jsPage({data:{message:'HelloMINA!'}})Page()方法用于注册页面。接受指定页面初始数据、生命周期函数、事件处理程序等的OBJECT参数。乍一看，这怎么和现在流行的Vue框架语法很像呢？Vue代码如下：{{message}}//page.jsnewVue({data:{message:'HelloMINA!'}})都是双括号插值语法，连数据的格式初始化和双向绑定是一样的，嗯，纯属巧合。这里需要注意的是，微信小程序提供了一种以WXML为后缀的文件类型，实际上是一种类似于XML的标签语言文件。(2)列表渲染{{item}}//page.jsPage({data:{array:[1,2,3,4,5]}})这样的列表渲染语法相信学过Angular和Vue的同学更容易掌握，它们都非常相似，当然还有条件渲染。(3)事件绑定{{count}}Page({data:{count:1},add:function(e){this.setData({data:this.data.count+1})}})如果学过React，里面有个setState方法可以用来改变state的值，这里的setDate也是一样的，通过绑定的add方法改变count在视图值中。(4)样式导入/**common.wxss**/.small-p{padding:5px;}/**app.wxss**/@import"common.wxss";.middle-p{padding:15px;}本小程序提供了另一种新的文件后缀类型WXSS，用于描述WXML组件样式。相比CSS文件，它还提供了SASS、LESS等预编译语言的样式导入功能，同时还提供了添加rpx、rem的单位大小功能。(5)模块化//common.jsfunctionsayHello(name){console.log('Hello'+name+'!')}module.exports={sayHello:sayHello}varcommon=require('common.js')Page({helloMINA:function(){common.sayHello('MINA')}})微信小程序继承了JS模块化机制，熟悉Require.js或Sea.js的同学应该不会陌生。在这里，对象是通过module.exports公开的。通过require获取对象。2.组件小程序的组件实际上是框架的一部分。它们主要负责UI的呈现，也自带一些功能和微信风格的样式。基本上移动端常用的组件都包括了，比如表单组件，导航组件，媒体组件等，下面是小程序提供的八类组件：比较复杂，根据文档中的使用示例可以轻松搞定。详细地址：https://mp.weixin.qq.com/debu...3.API接口相对于微信的开发公众号，微信小程序为开发者提供了更多的API接口，可以方便的调用微信提供的能力，如监控重力感应和罗盘数据、WebSocket连接、支付功能等。我们以一个发起网络请求的API为例：wx.request({url:'test.php',data:{name:'luozh',age:18},header:{'Content-Type':'application/json'},success:function(res){console.log("requestsucceeded")},fail:function(){console.log("requestfailed")}})wx.request发起HTTPS请求。一个微信小程序只能同时有5个网络请求连接。更多API接口介绍请参考官方文档。以上就是对微信小程序前端代码部分的简单介绍。相信对于有一点前端框架使用经验的同学来说上手还是比较容易的。下面将从宏观的角度来阐述我个人认为微信小程序对前端领域的影响。.从宏观上看，当微信小程序出来的时候，网上关于其对前端行业影响的报道层出不穷。更多的文章和评论相信前端又要流行了，前端的第二春来了，Javascript和HTML5的新时代来了。当然，微信小程序的出现确实会给前端带来一些火上浇油，但是任何事物的诞生都是有利有弊的，微信小程序也不例外。以下是我个人看法的简单说明：1.好处(1)提高开发兼容性：微信小程序可以说是重新定义了APP，让一个应用程序运行在android、iphone和windowsphone上。对于前端，实现了“一次编译，到处运行”的理念。（2）促进前端技术的发展：微信小程序以其简单的开发环境，使得基于Javascript和HTML5的前端技术在庞大的微信社交群体中得以普及。从前端编码和设计，为前端技术做贡献。(3)其他...2.缺点(1)增加了前端的工作量和学习成本：本来一个前端工程师负责的平台范围很广，包括PC、手机、APP应用。前端需要涉及到微信应用的开发，一定程度上增加了学习和工作的成本。同时，企业也会增加这方面的开发和投入成本。（2）前端竞争越来越明显：微信小程序的诞生可能会吸引一批后台、APP开发等领域的人转向前端开发，而这些已经拥有逻辑思维强或者感性思维强都会被挤掉摆脱掉那些处于前端边缘的新手，可能会让大部分底层的前端开发人员面临失业或者找不到工作的危险。(3)其他...这里说几点微信小程序对前端的影响，大家可以补充。总结本文从代码和宏观的角度，简要阐述了微信小程序在前端领域的一些内容和影响，希望能帮助不了解微信小程序的开发者快速上手，了解这个新兴的技术领域。至于小程序对前端的影响，我们也可以反过来想：技术的发展不是基于一个平台来改变，而是通过技术来带动一个平台的改变。正是因为前端的发展，才诞生了“小程序”。这种可能性...
