通过微信小程序看前端

前言

2016年9月22日凌晨，微信官方通过“微信公开课”公众号发布了关于微信小程序（微信应用号）的内测通知。整个朋友圈瞬间便像炸开了锅似的，各种揣测、介绍性文章在一夜里诞生。而真正收到内测邀请的公众号据说只有200个。

虽然内测名额十分稀少，但依赖中国广大开发者的破解和分享精神，在网络上很快出现了开发工具的破解版本和API文档。然而可能是微信的妥协或者早已预料，9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档，对于费劲心思破解完的开发者来说应该瞬间整个人都不好了。

以下便是微信提供的开发工具和文档地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644087418

作为一名具有极客精神的前端开发者，我也马上在这股热潮中试了下水，下载了小程序开发工具。下面是登陆后的界面：

从整个结构布局来看这款IDE工具可以分为三个部分，首先左侧为导航操作区域，中间是目录或展示区域，右侧为调试区域（很像Chrome的调试工具）。下面我就以前端的角度分别从代码角度和宏观角度介绍下自己对于微信小程序的看法。

代码角度

纵观整个开发文档，微信小程序的前端技术主要可以分为“框架”、“组件”和“API接口”。

1.框架

微信提供了一套自己的用于开发小程序的前端框架，和目前主流的前端框架相比，其既有类似的地方，也有特殊的地方。

特殊的地方在于其只能在微信小程序开发工具内使用，并做了相对严格的使用和配置限制，开发者必须按照其规定的用法来使用。一些外部的框架和插件在小程序里都是无法使用的，同时由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如document，window等。

而相似的地方在于其包含了和其他框架一样的“逻辑层”和“视图层”，以数据驱动为主，不操作DOM元素等。下面以代码为例子来介绍：

（1）数据绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
    data: {
      message: ‘Hello MINA!‘
    }
})

Page() 方法用来注册一个页面。接受一个 OBJECT 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。这乍一看怎么和目前流行的Vue框架语法十分类似呢，Vue代码如下：

<view> {{message}} </view>

// page.js
new Vue({
  data: {
    message: ‘Hello MINA!‘
  }
})

都是双括号插值语法，连数据初始化和双向绑定的格式都一样，好吧，就当纯属巧合吧。

这里需要注意的是，微信小程序提供了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及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来获取对象。

2.组件

小程序的组件其实也是框架的一部分，主要负责UI的呈现，也自带了一些功能与微信风格的样式。基本上移动端常用的组件都包含在内，比如表单组件、导航组件、媒体组件等。下面便是小程序提供的八类组件：

对于小程序的组件使用其实不是非常复杂，按照文档的使用示例便可以轻松搞定，详细地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=1474644085698

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("请求成功")
    },
    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）其他...

这里大概介绍了几点微信小程序给前端带来的影响，更多的大家可以补充。

总结

本文从代码角度和宏观角度简单阐述了微信小程序在前端领域的一些内容和影响，希望能够帮助那些不了解微信小程序的开发者很快入门并认识这一新的技术领域。

至于小程序对于前端的影响，反过来我们也可以这样认为：

技术的发展不是基于一个平台去改变，而是通过技术去驱动一个平台改变，正是因为前端的发展才催生了“小程序”的这种可能性…

原创文章，转载请注明来自 劳卜 - 博客园[http://www.cnblogs.com/luozhihao]

本文首发于微信公众号：前端呼啦圈（Love-FED）

同步发表于：http://www.cnblogs.com/luozhihao/p/5906813.html

　　　　　　https://segmentfault.com/a/1190000007006479

　　　　　　http://www.jianshu.com/p/852e6ffb6569