微信官方已经开放了微信小程序的官方文档和开发者工具，这两天我一直在看相关新闻，了解如何开发小程序。这两天官方文档出来之后，我快速翻阅了一下，重点看了一下文档里的框架和组件。然后按照简单的教程做了一个常规的todo app。这个app基于微信小程序平台，实现了todo app的常规功能，同时为了让它更贴近实际工作场景，还利用了这两个组件来完成一些交互和反馈的操作。我对这个平台的直观感受是，从技术上来说，它和vue类似，但是功能远不如vue强大；开发思路也不像vue，但是感觉更像。所以如果你用过vue等mvc、mvvm框架，那么上手这个平台会非常容易。本文主要介绍这个todo app实现的一些关键点。

先补充一下本文的相关信息：

官方文档：

官方开发者工具下载：

本文中todo应用的功能演示：

注意：需要长按todo文本才能直接编辑，因为是手机端，不能使用双击事件编辑，所以改用长按事件，小程序平台没有提供双击事件的绑定。

相关源代码：

如果要在本地运行此项目，需要先安装开发者工具，并根据文档中的简单教程搭建项目。

构建完成后，开发者工具会打开此项目；

然后在磁盘上找到创建的项目的文件夹，把里面的内容全部删除，并将上面的源代码文件夹里的文件全部粘贴进去；

然后重新打开开发者工具，先进入编辑选项卡，然后点击编译按钮，就可以直接进入调试界面查看app的功能了：

以下是此应用程序开发的要点：

1.本APP的目录结构和配置就不详细介绍了，在-部分已经详细介绍了。本平台没有HTML和CSS，而是用wxml和wxss代替。wxss和CSS几乎没有区别，缺点是没有CSS强大，支持的选择器也有限。不过优点是因为只有微信这个平台，所以几乎没有兼容性问题，可以使用标准、更新的CSS技术。wxml中只能使用平台提供的组件的标签，不能直接使用HTML标签。wxml中各个组件的用法可以在-部分找到。所以其实写wxml和wxss没什么难度。

2.wxml支持以下功能：

在todo app中，除了模板和引用，其他功能都是用到的。但是并没有去了解每个功能的细节，只是根据app的需求去选择合适的功能。前几天看到一篇文章说微信小程序可能是基于vue框架实现的，于是就看了一下vue的文档，详细看了一下vue对于数据绑定、条件渲染、列表渲染、事件的用法。相比较而言，wxml提供的功能和vue的相关功能比较类似，但是功能没有那么多，所以在小程序中直接使用vue框架的功能并不容易。最佳实践还是以官方文档提供的说明为准，如果功能没有在官方文档中提到，靠猜想去使用肯定不行。我通过打印的方式查看了一些对象的原型，并没有发现比官方文档更多的实例方法，说明小程序的框架功能确实有限。

3.wxss其实可以用less或者sass来写，只要选择器符合框架的要求就可以。由于时间关系，在这个app中没有尝试。

4. 没有双向绑定。在 Vue 中，一个 Vue 实例就是一个视图；视图层对数据的更新会实时反馈给视图；更新也会实时反馈给视图。在小程序中，没有双向绑定，视图的更新不会直接同步到；需要在相关事件回调中直接从视图层获取数据，然后通过方法进行更新，小程序稍后再重新渲染页面。例如对单个待办事项的操作：

+ 查看代码

上述代码中，通过 e..[0] 获取单个 todo 项的值，并根据该值判断该 todo 的状态，最后通过方法刷新内容，只有这样，操作之后，应用底部的统计信息才会更新。

5.绑定事件的时候不能传参数，只能传一个。比如上面的操作，我其实是想把当前的todo id传给回调的，但是怎么努力都做不到。最后只能通过id的方法处理：在wxml中给绑定事件的组件添加一个id，这个id在整个页面中不能重复，所以要给id加前缀，然后在id的末尾加上todo id值；当事件触发的时候，通过e..id可以获取到组件的id，去掉对应的id前缀就可以得到todo id值了。这是目前常用的方法，我觉得不是很优雅，希望以后能找到更好的方法来实现。

6. app中考虑的效果应该利用组件的属性来实现，但是它只是一个样式控件，不会控制按钮是否可以重复点击，所以应该利用的属性来防止重复点击。

其余的实现细节在以下两个文件的源代码中。欢迎指出任何问题。

.wxml源代码：

+ 查看代码

.js源代码：

+ 查看代码

最后需要补充的是，本应用是在微信官方文档的基础上限时开发的，所以不知道这里的实现是否合理，只是借用本应用了解小程序平台的使用方法，希望微信能推出一些更全面更好的基于项目的demo，为我们开发者提供代码层面的良好实践规范。有其他开发思路的朋友也欢迎帮我指出上述实现中存在的问题。

微信小程序

1月9日微信小程序全面上线，很多科技公司已经摩拳擦掌准备入手了，下面就来下载吧。小编给大家推荐一款可以在这个微信小程序上直接DIY自己照片的小程序：。

功能：

1.专题-DIY图片模板，点击生成即可使用，并分享到朋友圈。

2.分享墙——用户上传的DIY作品。

3. 现在就制作 - 您可以用自己的图片进行 DIY。

4. 告诉我 - 告诉我有关产品改进和内容添加的信息。

如果你想体验如何制作属于自己的个性化朋友圈照片，1月9日微信小程序上线后，扫描下方二维码即可体验！还在等什么？快来扫一扫，开启你的之旅吧！