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


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 相关文章推荐
javascript验证身份证完全方法具体实现
Nov 18 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
node后端服务保活的实现
Nov 10 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 Javascript
学习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
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
php控制文件下载速度的方法
2015/03/24 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python3解释器知识点总结
2019/02/19 Python
python程序控制NAO机器人行走
2019/04/29 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
护理专业推荐信
2013/11/07 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
商务英语专业求职信
2014/06/26 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书