近日,微信推出的小程序横空出世,一下引起轩然大波,吃瓜群众纷纷围观。
在这个技术快速更新,牛人辈出的大环境下。作为一名前端爱好者,对于这种刚出炉的东西也是充满好奇。
以前出现了什么新的框架或者新的好玩的东西,都是等到那些身先士卒的勇士搞明白了,然后看他们的教程或心得来决定是否入手。
但这次,初生牛犊也想探探这个小程序的虚实。
1.内测
此次微信小程序还属于内测版本,所以,没有收到内测邀请的开发者账户是不能将小程序上传到微信上去的。但是这都不是什么大事,我们如果有一个微信公众号,我们就能开发,只是我们只能本地预览,不能上线而已。进入微信公众号,打开开发者文档即可看到关于小程序的开发说明并获取开发工具。然后就可以开发了。在微信公众号刚推出的时候,我就有注册过一个微信公众号,但后面就没管了。没想到在这个时候帮了大忙了。
2.框架
小程序整体目录结构分为两个层次,逻辑层,视图层。顾名思义,逻辑层就是数据处理部分,视图层是数据展现部分。视图层采用的是.wxml和.wxss文件来渲染。根据后缀名就能猜到,这两种文件就是和传统web开发里面的html文件和css文件是一个机制。只是,微信的小程序他采用的是自己的引擎和内核,因此他定义了自己的文件格式,但.wxss文件和.css文件语法是一样的,都是样式文件,里面的属性也就是css属性。只是.wxml文件和html文件有一些小区别,微信定义了一套自己的标签和标签属性,但这一套标签太简单了,只有几个标签,要想实现自己预想的效果,还是要靠编写样式去美化。在逻辑层,有.js和.json文件。.js文件就是用来数据处理的文件,和传统的web开发中的js并无差别。.json是配置文件,用来配置当前页。值得注意的一点是,在开发中,我们每一个页面都要对应四个名字相同但后缀为.wxml、.wxss、.js、.json文件。例如我们要有一个首页index,我们就应该建一个index文件夹,并且index文件夹里面要存在index.wxml、index.wxss、index.js、index.json文件。当程序运行的时候,在开发者工具中,我们查看程序资源,我们就会发现,这些文件都被合并成了一个js文件。至于.js文件中的配置机制,就要查看文档了。小程序除了我们自己定义的文件,还有三个全局定义文件是必不可少的。分别为app.js、app.json、app.wxss这是用来进行全局配置的文件。具体配置,请看文档。
3.特性
小程序有借鉴很多当下前端优秀框架的特性,像angular的双向数据绑定、react的组件化等,如果有接触过当下十分火热的一些框架,在开发的过程中,你会觉得这些语法很熟悉,因此上手会很快。
3.1数据双向绑定
WXML 中的动态数据均来自对应 Page 的 data。其语法和angularjs中的双向绑定是一样的。
/**index.wxml*/
<view> {{ ahdms }} </view>
/**index.js*/
Page({
data: {
ahdms: 'Hello MINA!'
}
})
3.2条件渲染
用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 来添加一个 else 块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
3.3列表渲染
在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item.
<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
items: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
由于篇幅原因,更多特性不再赘述。
4.总的来说
经过编写一些测试demo,几天下来。给我的感觉就是,这个微信小程序感觉就是一个应用在微信端的angularjs框架、或者说更像是一个react框架。如果有接触过angular、react
或者是vue等,会上手的特别快。小程序的数据双向绑定,页面的渲染机制,自定义模板,mv*的结构,模块化。这些特性都很符合现在的前端潮流。我想这也是为什么小程序一公布
就在前端圈引起轩然大波的原因之一吧。但是,这个小程序毕竟还只是一个内测版本,还是有几处不足的。例如,标签不足,连<textarea></textarea>这样的标签都没有满足。
由于小程序的底层是通过js去调用微信的原生接口的,所以很多细节的可自定义性不强。微信开发者工具很烂等。关于这些意见,我有发邮件给微信的联系邮箱,得到的回复是
正在开发规划,逐步满足。虽然,这个小程序还不是很成熟,但是可以预见,这个对微信端网页开发的前端工程师来说,是一个福音。以前有很多的公司有将自己的app专门再做一套
微信网页版,放到微信公众号里面来获取微信端的市场。但当这个小程序真正稳定的发布之后,我想native app开发者或许是会有点压力的。
总的来说,微信小程序还是很有意思的,开发速度也很快,可以预见,当真正的稳定版发布的时候,我想如果在个人简历上加上一条,会微信小程序开发,估计会更有优势。
附上几张测试demo效果图吧
附上几张测试demo效果图吧