前言

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. 【LSGDOJ 1850】滑雪课程

    题目描述 贝西去科罗拉多州去滑雪,不过还她不太会玩,只是个能力为 1 的渣渣.贝西从 0 时刻进入滑雪场,一到 T 时刻就必须离开.滑雪场里有 N 条斜坡,第 i 条斜坡滑行一次需要 D i 分钟,要 ...

  2. hdu 5727 二分图+环排列

    Necklace Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  3. poj 2653 线段与线段相交

    Pick-up sticks Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 11884   Accepted: 4499 D ...

  4. bzoj4361isn dp+容斥

    4361: isn Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 370  Solved: 182[Submit][Status][Discuss] ...

  5. java集合之LinkedList源码解读

    源自:jdk1.8.0_121 LinkedList继承自AbstractSequentialList,实现了List.Deque.Cloneable.Serializable. LinkedList ...

  6. 设置思科设备console密码、enable密码、vty登录密码

    思科设备各级密码:1)  console密码 SW2(config)#line console 0SW2(config-line)#password ciscoSW2(config-line)#log ...

  7. instanceof的用法

    转载自:http://blog.csdn.net/cnmilan/article/details/41696093package myPackage; /** * instanceof运算符用法 * ...

  8. prop与attr的区别

    与prop一样attr也可以用来获取与设置元素的属性. 区别在于,对于自定义属性和选中属性的处理. 选中属性指的是 checked,selected 这2种属性 1. 对于自定义属性 attr能够获取 ...

  9. Java Native方法

    一. 什么是Native Method   简单地讲,一个Native Method就是一个java调用非java代码的接口.一个Native Method是这样一个java的方法:该方法的实现由非j ...

  10. KMP及其改进算法

    本文主要讲述KMP已经KMP的一种改进方法.若发现不正确的地方,欢迎交流指出,谢谢! KMP算法的基本思想: KMP的算法流程: 每当一趟匹配过程中出现字符比较不等时,不需回溯 i 指针,而是利用已经 ...