前言
在2016年9月22日凌晨,微信通过“微信公开班”官方帐户正式发布了有关微信Mini计划(微信应用程序帐户)的内部测试通知。整个朋友的圈子立即感到恐慌,各种投机和介绍性的文章在一夜之间出生。据说只有200个官方帐户收到了内部测试的邀请。
尽管内部测试配额的数量非常罕见,但依靠大多数中国开发人员的破解和分享精神,开发工具的破解版本和API文档很快出现在互联网上。但是,可能是微信的妥协或预期,9月24日,微信在不开裂而无需破解的情况下正式发布了微信微型程序开发人员的工具和文档。对于那些努力破解它的开发人员,他们应该立即进行。
以下是微信提供的开发工具和文档地址:
作为Geek 的前端开发人员,我立即尝试了这种热潮,并下载了Mini 开发工具。这是登录后的界面:
从总体结构布局来看,该IDE工具可以分为三个部分。首先,左侧的导航操作区域是中间的目录或显示区域,右侧的调试区域是(一个非常相似的调试工具)。下面,我将从前端的角度从代码和宏观角度介绍对微信微型程序的看法。
代码角度
查看整个开发文档,微信系的前端技术可以主要分为“框架”,“组件”和“ API接口”。
1。帧
微信提供了一套用于开发迷你程序的前端框架。与当前主流前端框架相比,它具有相似的特殊方面。
特殊的是,它只能在微信系开发工具中使用,并且具有相对严格的用法和配置限制。开发人员必须根据规定的用法使用它。迷你程序中没有一些外部框架和插件。同时,由于框架未在浏览器中运行,因此无法使用网络中的某些功能,例如,等。
相似之处是,它包含与其他框架相同的“逻辑层”和“视图层”,主要由数据驱动,并且不操作DOM元素等。以下是一个代码:一个示例:
(1)数据绑定
&编程lt;view> {{message}} // page.js Page({ data: { message: 'Hello MINA!' } })
Page()方法用于注册页面。接受一个参数,该参数指定页面的初始数据,生命周期功能,事件处理功能等。乍一看,为什么这看起来与当前流行的VUE框架语法非常相似? VUE代码如下:
{{message}} // page.js new Vue({ data: { message: 'Hello MINA!' } })
它们都是双式式插值语法,甚至数据初始化和双向结合的格式都是相同的。好的,把它作为巧合。
在这里应注意的是,微信软件提供了WXML后缀的文件类型,该文件实际上是类似于XML的标签语言文件。
(2)列表渲染
{{item}}
// page.js Page({ data: { array: [1, 2, 3, 4, 5] } })
我相信,学到了这份列表的学生渲染语法更容易掌握,并且非常相似,当然,有条件的渲染等。
(3)事件绑定
{{}}
Page({ data: { count: 1 }, add: function(e) { this.setData({ data: this.data.count + 1 }) } })
如果您学会了它,则可以使用一种方法来改变状态的价值,在这里也是如此。通过绑定添加方法在视图中更改值。
(4)样式导入
/** common.wxss **/ .small-p {zqmrU padding:5px; }
/** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; }
在这里,小程序提供了另一个新文件后缀类型WXSS,用于描述WXML的组件样式。与CSS文件相比,它还提供了预编译语言(例如Sass and )的样式导入功能,还提供了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('MjsINA') } })
微信迷你程序遵守JS模块化机制。熟悉.js或sea.js的学生应该非常熟悉它。在这里我们可以使用。暴露对象并通过对象获取对象。
2。组件
迷你程序的组件实际上是框架的一部分,主要负责UI的呈现,还具有一些功能和微信风格。基本上,包括移动终端上的所有常用组件,例如表单组件,导航组件,媒体组件等。以下是Mini计划提供的八种组件:
实际上,使用小程序组件的使用不是很复杂。可以根据文档的使用示例轻松完成。详细地址是:
3。API接口
与官方帐户的开发相比,微信小计划为开发人员提供了更多的API接口,可以轻松调整微信提供的功能,例如监视重力传感和指南针数据,连接,付款功能等。这是一个启动网络请求的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。是请求。微信系只能同时拥有5个网络请求连接。有关API接口的更多信息,请参阅官方文档。
以上是微信迷你计划的前端代码部分的简要介绍。我相信有使用前端框架经验的学生相对容易入门。以下将从宏观的角度解释微信迷你计划对前端场的影响。
宏观角度
当微信Mini计划发布时,对互联网上的前端行业产生了无限的影响。越来越多的文章和评论认为,前端将再次流行,前端的第二个春天即将到来,而其他事物的新时代也来了。
当然,微信微编程的出现确实会给前端带来某些燃料,但是任何事情的诞生都是利弊的结合,微信小计划也不例外。以下简要解释了我的个人意见:
1。利润
(1)提高开发兼容性:可以说微信小程序重新定义了该应用程序,允许应用程序在中间和中间运行,并且对于前端,它实现了“一次编译,无处不在”的概念。
(2)促进前端技术的发展:凭借其简单的开发环境,微信迷你计划允许前端技术主要基于和谐,可以在庞大的微信社会集团内传播。越来越多的人开始联系前端,参与前端编码和设计,并为前端技术做出贡献。
(3)其他...
2。缺点
(1)增加前端工作量和学习成本:最初,前端工程师负责广泛的平台,包括PC,移动设备,应用程序应用程序等。微信微编程的出现将要求前端涉及应用程序的开发,这将在一定程度上增加学习和工作成本。同时,企业还将增加该领域的发展和投资成本。
(2)前端竞争变得越来越明显:微信小计划的诞生可能会吸引其他领域的一群人,例如后端,应用程序开发等,以转向前端开发。这些已经有逻辑思维或强烈的情感思维的人将把这些新手挤在前端的边缘,这可能会使大多数低级的前端开发人员处于失业的风险或找不到工作。
(3)其他...
在这里,我们介绍了微信迷你节目对前端的一些影响,您可以添加更多。
总结
本文从代码的角度和宏观的角度简要说明了微信小程序在前端字段中的一些内容和影响。它希望帮助那些不了解微信小程序开始的开发人员,并了解这个新的技术领域。
至于迷你计划对前端的影响,我们还可以考虑到它:
技术的开发不是基于更改平台的基础,而是通过技术来驱动平台的变化。正是由于前端的发展,已经创建了“迷你程序”的可能性...
以上是本文的所有内容。我希望这对每个人都会有所帮助,并希望能为我们提供更多支持!
本文的标题:使用微信小程序开发前端[快速启动]