通过微信小程序看前端
前言
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>
![](/assets/blank.gif)
Page({data: {count: 1},add: function(e) {this.setData({data: this.data.count + 1})} })
![](/assets/blank.gif)
如果你学过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)模块化
![](/assets/blank.gif)
// common.js function sayHello(name) {console.log('Hello ' + name + '!') } module.exports = {sayHello: sayHello }
![](/assets/blank.gif)
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为例:
![](/assets/blank.gif)
wx.request({url: 'test.php',data: {name: 'luozh' ,age: 18},header: {'Content-Type': 'application/json'},success: function(res) {console.log("请求成功")},fail: function() {console.log("请求失败")} })
![](/assets/blank.gif)
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)其他...
这里大概介绍了几点微信小程序给前端带来的影响,更多的大家可以补充。
总结
本文从代码角度和宏观角度简单阐述了微信小程序在前端领域的一些内容和影响,希望能够帮助那些不了解微信小程序的开发者很快入门并认识这一新的技术领域。
至于小程序对于前端的影响,反过来我们也可以这样认为:
技术的发展不是基于一个平台去改变,而是通过技术去驱动一个平台改变,正是因为前端的发展才催生了“小程序”的这种可能性…
通过微信小程序看前端相关推荐
- 微信小程序的开发:通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...
- 从微信小程序看前端代码安全
原文链接:https://share.whuboy.com/weapp.html 感觉写的很好,学习了,转载保存. 起初在研究对移动网络传输进行功耗优化,在一次意外的监听网络传输包中截获了微信小程序的 ...
- [个人向]超快速了解微信小程序:看这篇就够了!(注册、语言、框架、配额等简要说明)
[个人向]超快速了解微信小程序看这篇就够了+相关简要说明 本文精炼微信小程序开发文档相关内容,旨在对初次接触并准备开发小程序的童鞋(比如自己)提供一个快速了解攻略.其中包括注册相关.语言.框架模式.相 ...
- vue和小程序哪个好学一点_litemall,Spring Boot后端,微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端 注意: 由于第一次加载数据量较大,建议wif ...
- 微信小程序uni-app前端应用框架和HBuilderX工具使用及Git管理项目
微信小程序uni-app前端应用框架和HBuilderX工具使用及Git管理项目 官方地址:https://uniapp.dcloud.io/ 1.起步 1.1.简介 uni-app 是一个使用 Vu ...
- 云答题微信小程序 实现 前端加后台管理
1.为什么要使用微信云开发 微信云开发自己是不需要域名(备案的域名),服务器,搭建数据库等. 2.使用技术 微信小程序+相关云接口 java (SpringBoot+Maven) 后台管理使用 VUE ...
- 微信小程序纯前端生成海报并保存本地
需求 公司开发微信小程序,有一个海报页面,需要用户点击生成海报,可以将该该swipe-item 生成一个带二维码的图片,最终由纯前端实现! 技术调研 因为小程序的打包限制,不可能将所有的图片都放在代码 ...
- 微信小程序之前端与java后台进行数据交互
后台是用SpringBoot+SSM来写的,整体上来说,和普通的Web没什么区别 要注意的是,对于小程序访问的控制层方法,需要返回一个Map类型 @RequestMapping(value = &qu ...
- 微信小程序,前端大梦想(七)
微信小程序之数据缓存实例-备忘录 数据缓存在移动端的使用是非常重要的,既可以减少用户的流量支出又可以提高程序的访问速度和用户体验.每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStora ...
最新文章
- VS2013\VS2017 使用git 总是需要输入账号密码
- 一步快速将Smartform output转成生成PDF文件
- larvare数据库引入php_PHP全栈学习笔记6
- 【题解】luogu p1032 字串变换
- PyMongo--非关系型数据库mongodb入门(一步一步 版)
- Pandas 中 把Dataframe 格式转化为 array 数组
- bash初识,shell的基础语法及基本特性
- CVPR 2020丨基于范例的精细可控图像翻译CoCosNet,一键生成你心目中的图像
- 如何根据变量类型选择数据分析方法
- iOS开发-retain/assign/strong/weak/copy/mutablecopy/autorelease区别
- 世界银行开放数据目录:后宫数据集三千个,人生赢家就是你
- Centos7下安装小米SQL优化工具SOAR
- mysql删除的方法_mysql三种删除方式
- 利用浏览器书签执行脚本辅助
- 图中PNP型三极管发射极和基极为什么要加个100K(R21)的电阻?
- indexof 的基本用法
- 微信支付证书如何部署在linux,微信支付平台证书更新指引
- WSL2 Ubuntu18.04 apt-get update失败
- C语言相关的经典书籍(附Ebook)
- QQ浏览器app应用专区推荐系统
热门文章
- 找到所有数组中消失的数字_【一点资讯】千万程序员的呼声:面试如何拿到大厂Offer?这份阅读量超过11W+的算法刷题宝典请你原地查收 www.yidianzixun.com...
- unity-单例模式
- 03 graphx 从 SSSP 来看 pregel
- 【第三章 有限自动机与右线性文法】形式语言与自动机第三章个人总结复习笔记分享!(含文件、持续更新...)
- python加密狗的制作_如何使用U盘制作Windows系统开机加密狗图文教程
- 计算机图形学——八分法中点画圆
- DSP学习(5)—— Timer的使用
- 水果 hdu 1263 模拟
- win10 你没有足够的权限执行此操作。
- 没有计算的推理和基于推理的计算 逻辑与算法之五