前言

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.jianshu.com/p/852e6ffb6569
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

微信小程序的开发:通过微信小程序看前端的更多相关文章

  1. CabloyJS一站式助力微信、企业微信、钉钉开发 - 企业微信篇

    前言 现在软件开发不仅要面对前端碎片化,还要面对后端碎片化.针对前端碎片化,CabloyJS提供了pc=mobile+pad的跨端自适应方案,参见:自适应布局:pc = mobile + pad 在这 ...

  2. JAVA微信公众号网页开发 —— 接收微信服务器发送的消息

    WeixinMessage.java package com.test; import java.io.Serializable; /** * This is an object that conta ...

  3. 微信小程序红包开发思路 微信红包小程序开发思路讲解

    之前公司开发小程序红包,将自己在开发的过程中遇到的一些坑分享到了博客里.不少人看了以后,还是不明白怎么开发.也加了我微信咨询.所以今天,我就特意再写一篇文章,这次就不谈我开发中遇到的坑了.就主要给大家 ...

  4. C#开发微信公众号——网页开发之微信网页授权

    首先咱们先看下公众号的文档里面的介绍 上述图片的文字描述就是讲述了网页授权有什么用,就是为了获取微信用户的基本信息:授权回调域名的规范,说到域名回调的事情就不得不提一下设置网页授权域名 最好将这三个域 ...

  5. 微信小程序快速开发上手

    微信小程序快速开发上手 介绍: 从实战开发角度,完整系统地介绍了小程序的开发环境.小程序的结构.小程序的组件与小程序的API,并提供了多个开发实例帮助读者快速掌握小程序的开发技能,并能自己动手开发出小 ...

  6. 为什么要学习微信小程序直播开发?最新的小程序直播介绍和优势分析!

    小程序直播的介绍 “小程序直播”是微信提供给开发者的实时视频直播工具,包括直播管理端.主播端和观众端等模块,支持提供常用的用户互动和营销促销工具. 开发者只需在小程序中引入相关代码并在管理后台完成配置 ...

  7. 微信小程序--聊天室小程序(云开发)

    微信小程序 -- 聊天室小程序(云开发) 从微信小程序开发社区更新watch接口之后,一直在构思这个项目.项目已经完成很久,但是一直都没有空写一篇博客记录展示一下. 开源地址 wx-cloud-im: ...

  8. 微信小程序云开发指南

    一.初识云开发 官方文档 小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建服务器,可 ...

  9. 微信小程序实战--开发一个简单的快递单号查询

    功能如图: 虽然工作中只负责小程序后台开发,但是还是小程序开发产生了浓厚的兴趣,官方文档也是超级详细了 这里就简单做一个快递单号的查询: 新建一个page: 接着就可以写wxml了.这里用一个简单的i ...

随机推荐

  1. HDU2425:Hiking Trip(BFS+优先队列)

    给出一个地图,地图有四种路面,经过每种路面花费的时间不同,问从起点到终点所花费的最少时间是多少 把到各个点的花费存入队列中,然后弹出,即可得到最小 Sample Input 4 6 1 2 10 T. ...

  2. 用js来实现那些数据结构11(字典)

    我们这篇文章来说说Map这种数据结构如何用js来实现,其实它和集合(Set)极为类似,只不过Map是[键,值]的形式存储元素,通过键来查询值,Map用于保存具有映射关系的数据,Map里保存着两组数据: ...

  3. C++是跨平台的语言

    最开始学习Java时,老师就说Java是跨平台的,而c++不是,这里要纠正一下观点,c++也是跨平台的,只不过是实现跨平台的方式不同而已. 1.平台 一般我们把CPU处理器与操作系统的整体叫平台.不同 ...

  4. python2.7入门---简介&基础语法

    Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言,具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色语法结构.基于上述原因, ...

  5. java对redis的操作

    需要两个包的支持 jedis-2.1.0.jar commons-pool-1.5.4.jar 一个连接池一个工具类 pool代码 public class RedisUtil { private s ...

  6. R语言中函数调试

    有时候会用R语言写一下简单的脚本处理函数,加入需要调试的话可以按照下面的步骤进行: fun <- function(x , y){ x + y x - y x * y x / y } debug ...

  7. PHP $_GET 变量

    $_GET 变量 预定义的 $_GET 变量用于收集来自 method="get" 的表单中的值. 从带有 GET 方法的表单发送的信息,对任何人都是可见的(会显示在浏览器的地址栏 ...

  8. 为什么《Dive into Python》不值得推荐

    2010 年 5 月 5 日更新:我翻译了一篇<<Dive Into Python>非死不可>作为对本文观点的进一步支持和对评论的回复,请见:http://blog.csdn. ...

  9. 【Android 应用开发】 Android 各种版本简介 ( Support 支持库版本 | Android Studio 版本 | Gradle 版本 | jcenter 库版本 )

    初学者遇到 Android Studio, 导入工程后, 会出现各种奇葩错误, 如果管理好各个插件, gradle, SDK, SDK Tools, 各种官方依赖库 的版本, 会将错误大大的减少; 这 ...

  10. [CSDN_Markdown]使用LaTeX基本数学公式

    简介 以前我很头疼在博文里写公式,一直期盼CSDN的博文编辑器能支持LaTeX 公式输入,今天终于可以使用这个功能了!此文主要讨论如何在CSDN的Markdown编辑器中写 LaTeX 公式! 使用L ...