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


Posted in Javascript onDecember 05, 2016

前言

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)其他...

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

总结

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

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

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

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
学习vue.js表单控件绑定操作
Dec 05 #Javascript
JavaScript易错知识点整理
Dec 05 #Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 #Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 #Javascript
bootstrap快速制作后台界面
Dec 05 #Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 #Javascript
浅谈js数组和splice的用法
Dec 04 #Javascript
You might like
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
给Python初学者的一些编程技巧
2015/04/03 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
房务中心文员岗位职责
2014/04/16 职场文书
项目建议书范文
2014/05/12 职场文书
给公司的建议书范文
2014/05/13 职场文书
服务承诺书怎么写
2014/05/24 职场文书
付款证明模板
2015/06/19 职场文书
聘任合同书
2015/09/21 职场文书
Python matplotlib多个子图绘制整合
2022/04/13 Python