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


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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
js中typeof的用法汇总
Dec 12 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 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笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
AngularJS内置指令
2015/02/04 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
js制作提示框插件
2020/12/24 Javascript
Python fileinput模块使用实例
2015/06/03 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python遍历pandas数据方法总结
2018/02/09 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
试述DBMS的主要功能
2016/11/13 面试题
工作会议方案
2014/05/21 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
尼克胡哲观后感
2015/06/08 职场文书
全民创业工作总结
2015/08/13 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers