微信小程序初体验

近日，微信推出的小程序横空出世，一下引起轩然大波，吃瓜群众纷纷围观。

在这个技术快速更新，牛人辈出的大环境下。作为一名前端爱好者，对于这种刚出炉的东西也是充满好奇。

以前出现了什么新的框架或者新的好玩的东西，都是等到那些身先士卒的勇士搞明白了，然后看他们的教程或心得来决定是否入手。
但这次，初生牛犊也想探探这个小程序的虚实。

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这是用来进行全局配置的文件。具体配置，请看文档。

简单的目录结构.png

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'
}]
}
})

由于篇幅原因，更多特性不再赘述。

微信截图_20160930112058.png 微信截图_20160930112111.png 微信截图_20160930112129.png 微信截图_20160930112142.png
微信截图_20160930112158.png

4.总的来说

经过编写一些测试demo，几天下来。给我的感觉就是，这个微信小程序感觉就是一个应用在微信端的angularjs框架、或者说更像是一个react框架。如果有接触过angular、react
或者是vue等，会上手的特别快。小程序的数据双向绑定，页面的渲染机制，自定义模板，mv*的结构，模块化。这些特性都很符合现在的前端潮流。我想这也是为什么小程序一公布
就在前端圈引起轩然大波的原因之一吧。但是，这个小程序毕竟还只是一个内测版本，还是有几处不足的。例如，标签不足，连<textarea></textarea>这样的标签都没有满足。
由于小程序的底层是通过js去调用微信的原生接口的，所以很多细节的可自定义性不强。微信开发者工具很烂等。关于这些意见，我有发邮件给微信的联系邮箱，得到的回复是
正在开发规划，逐步满足。虽然，这个小程序还不是很成熟，但是可以预见，这个对微信端网页开发的前端工程师来说，是一个福音。以前有很多的公司有将自己的app专门再做一套
微信网页版，放到微信公众号里面来获取微信端的市场。但当这个小程序真正稳定的发布之后，我想native app开发者或许是会有点压力的。
总的来说，微信小程序还是很有意思的，开发速度也很快，可以预见，当真正的稳定版发布的时候，我想如果在个人简历上加上一条，会微信小程序开发，估计会更有优势。

附上几张测试demo效果图吧

附上几张测试demo效果图吧

微信截图_20160930150352.png 微信截图_20160930115139.png 微信截图_20160930115155.png