使用微信小程序开发前端【快速入门】

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

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

以下便是微信提供的开发工具和文档地址:

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

使用微信小程序开发前端【快速入门】

从整个结构布局来看这款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的呈现,也自带了一些功能与微信风格的样式。基本上移动端常用的组件都包含在内,比如表单组件、导航组件、媒体组件等。下面便是小程序提供的八类组件:

使用微信小程序开发前端【快速入门】

对于小程序的组件使用其实不是非常复杂,按照文档的使用示例便可以轻松搞定,详细地址:

3.API接口

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwxyxw.html