前言
本文主要转自@劳卜（简书作者）的通过小程序看前端一文，加些自己的理解。
2016年9月22日凌晨，微信官方发布了关于微信小程序（微信应用号）的内测通知。接着，朋友圈就被微信小程序刷屏了，各种揣测、介绍性文章在一夜里诞生。而真正收到内测邀请的公众号据说只有200个。
9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档。
那么，我们就从前端的角度，来看看微信小程序是个什么东西吧。
微信提供的开发工具和文档地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644087418
作为一名前端开发者，我下载了小程序开发工具。用微信扫描二维码登录、创建项目后就是IDE的界面：
小程序IED界面
从整个结构布局来看这款IDE工具可以分为三个部分，左侧是导航操作区域，中间是目录或展示区域，右侧为调试区域（很像Chrome的调试工具）。下面我们从前端的角度来看看微信小程序。
代码
从开发文档来看，微信小程序的前端技术主要可以分为“框架”、“组件”和“API”。
1.框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。
微信提供了一套自己的用于开发小程序的前端框架，感觉目前主流的前端框架的一些优点，又有其特殊的地方。
比如它包含了和其他框架一样的“逻辑层”和“视图层”，以数据驱动为主，不操作DOM元素，每个页面有独立的作用域，并提供模块化能力等。
特殊的地方在于其只能在微信小程序开发工具内使用，并做了相对严格的使用和配置限制，开发者必须按照其规定的用法来使用。一些外部的框架和插件在小程序里都是无法使用的，同时由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如document，window等。
下面以代码为例子来介绍：
（1）数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello World!'
}
})
Page() 方法用来注册一个页面。接受一个 OBJECT 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。这和目前比较新的Vue框架语法十分类似，Vue代码如下：
<view> {{message}} </view>
// page.js
new Vue({
data: {
message: 'Hello World!'
}
})
都是双括号插值语法，连数据初始化和双向绑定的格式都一样～
这里需要注意的是，微信小程序提供了WXML后缀的文件类型，其实就是类似XML的标签语言文件。
（2）列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1,2,3,4,5]
}
})
这样的列表渲染语法相信学过Angular和Vue的同学都比较容易掌握，都是非常的类似，当然还有条件渲染等。
（3）事件绑定
<view bindtap="add"> {{count}} </view>
Page({
data: {
count:1
},
add:function(e){
this.setData({
data:this.data.count +1
})
}
})
如果你熟悉React，那么其里面有一个setState的方法可以用来改变状态的值，这里的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（responsive pixel）及rem的单位尺寸功能。
（5）模块化
// common.js
function sayHello(name) {
console.log('Hello '+ name +'!')
}
module.exports = {
sayHello: sayHello
}
var common = require('common.js')
Page({
helloMINA:function(){
common.sayHello('MINA')
}
})
微信小程序秉承了JS模块化的机制，熟悉Require.js或者Sea.js的同学应该很熟悉，这里通过module.exports暴露对象，通过require来获取对象。
（6）ES6 语法以及 API 支持
今天（10月12日）登录时提示基础库组建有更新了0.10.101000版本，在 0.10.101000 以及之后版本的开发工具中，会默认使用 babel将开发者代码 ES6语法转换为三端都能很好支持的 ES5的代码，帮助开发者解决环境不同所带来的开发问题。但是，这种转换只会帮助开发处理语法上问题，新的 ES6的 API 例如 Promise等需要开发者自行引入 Polyfill或者别的类库。
2.组件
小程序的组件其实也是框架的一部分，主要负责UI的呈现，也自带了一些功能与微信风格的样式。基本上移动端常用的组件都包含在内，比如表单组件、导航组件、媒体组件等。下面便是小程序提供的八类组件：
-
视图容器
view 视图容器
scroll-view 可滚动视图容器
swiper 滑块视图容器 -
基础内容
icon 图标
text 文字
progress 进度条 -
表单组件
button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
slider 滚动选择器
switch 开关选择器
label 标签 -
操作反馈
action-sheet 上拉菜单
modal 模态弹窗
toast 消息提示框
loading 加载提示符 -
导航
navigator 应用链接 -
媒体组件
audio 音频
image 图片
video 视频 -
地图
map 地图 -
画布
canvas 画布
对于小程序的组件使用其实不是非常复杂，按照文档的使用示例便可以轻松搞定。
3.API接口
相比微信公众号的开发，微信小程序向开发者提供了更多的API接口，可以方便的调起微信提供的能力，比如监听重力感应和罗盘数据、WebSocket连接、支付功能等。下面以一个发起网络请求的API为例：
wx.request({
url:'test.php',
data: {
name:'Zhx',
age:18
},
header: {
'Content-Type':'application/json'
},
success:function(res) {
console.log("请求成功")
},
fail:function(){
console.log("请求失败")
}
})
wx.request发起的是https请求。一个微信小程序，同时只能有5个网络请求连接。关于更多API接口的介绍请查阅官方文档。
以上便是关于微信小程序前端代码部分的简单介绍，相信前端的同学上手都是相对容易的。
对前端的影响
微信小程序一出来的时候，网上关于其对于前端界的影响层出不穷，更多的文章和评论认为前端又要火了，前端的第二春来了，Javascript和HTML5的新时代来了等等。
当然微信小程序的出现确实会给前端带来一定的推波助澜的效果，但是任何一件事物的诞生都是利弊并存的，微信小程序也不例外。
1.利
（1）提高开发兼容性：微信小程序可以说是重新定义了APP，使得一款应用能够在android、iphone及windows phone中都能运行，对于前端来说实现了“一次编译，到处运行”的理念。
（2）推动前端技术的发展：微信小程序以其简单的开发环境，使以Javascript和HTML5为主的前端技术在庞大的微信社交群体内传播，越来越多的人开始接触前端，参与到前端编码和设计中来，为前端技术贡献力量。
（3）其他...
2.弊
（1）增加前端工作量及学习成本：原本一名前端工程师负责的平台就很广泛，包括PC端、移动端、APP应用等，微信小程序的出现会要求前端涉及微信应用的开发，一定程度增加了学习和工作成本。同时企业也会增加这方面的开发和投入成本。
（2）前端竞争日趋明显：微信小程序的诞生可能又会吸引一批后台、APP开发等其他领域的人员转向前端开发，而这些本来就具备较强逻辑思维或者较强感性思维的人将挤掉那些处于前端边缘的新手，可能使得大部分低水平前端开发者面临失业或者找不到工作的危险。
（3）其他...
其实反过来我们也可以这样认为：
技术的发展不是基于一个平台去改变，而是通过技术去驱动一个平台改变，正是因为前端的发展才催生了“小程序”的这种可能性…
希望能帮助到大家对小程序的理解～
网友评论