【原创】微信公众号小应用第一弹

国庆黄金周已经悄然离去,在假期到来之前微信小应的出现着实引起了不小的反响。虽然目前微信小应用并没有对所有开发者开放,但也有很多开发工程师已经在本地进行了尝试,甚至实战。踩着国庆黄金周的尾巴,我也自己体验了一番——开发微信小应用:你问我答。

新建应用

第一步,当然是要安装微信小应用开发软件(微信web开发者工具)。很多人可能感到很熟悉,因为这就是之前微信团队开放的基于微信APP进行移动网页远程调试的工具。最新版中改成了小应用开发工具,我们可以前往官方网站下载最新版(目前是v0.9.092300)。你还可以在该网站查看有关微信小应用的更多信息,如图所示:

第二步,启动开发工具,创建新应用。由于是第一次创建项目,所以工具启动界面很简单,根据界面提示点击“添加项目”会进入到项目基本信息填写界面。这里需要注意的是,也许是由于目前微信小应用开发并没有向所有开发者开放,从公众号中查看到的appKey并不能正常使用,所以我们在“AppID”栏选择“无AppID”。“项目名称”栏没有特殊要求,根据你自己的情况填写便是。“项目目录”也很简单就是你的小应用代码存放在计算机上的位置,建议填写英文路径。

另外,注意上图底部的“在当前目录中创建 quick start 项目”选项,该项会在选择完项目目录之后出现,开发者可以根据自己的情况选择勾选或不勾选。如果勾选,开发工具会在我们的项目中自动创建一个演示小应用,帮助我们熟悉微信小应用的目录结构及代码结构等信息。所以,我建议初学者可以勾选,熟悉之后就不用勾选了。

填完后点击“添加项目”,如果成功我们的项目变创建完成了。

初识开发工具

进入应用后,如果我们是勾选“创建 quick start 项目”的,进入后会看到一个默认应用,如果未勾选进入会看到一个完全空白的应用。进入我自己的开发的第一个小应用,类似下图:

首页跟“quick start”项目几乎完全一样,只是改了logo和部分页面控件及样式。简单的介绍下开发工具的各个部件:

调试项界面可以简单的分为左中右三个部分。最左面的一小条菜单栏包含一些功能选项及一些应用控制命令,中间部分是我们的应用预览区域,可进行手机模拟操作。最右侧是应用调试区域,熟悉前端开发的开发者应该很熟悉。Console控制台、Sources资源、Network网络,这三项基本和Chrome浏览器开发者工具中的选项功能一样,而Storage类似Resources(最新版中已更名为Application),用于查看应用中通过setStorage方法存储的本地数据,AppData则用于查看每个页面中用到的data数据,该数据为即时数据,会随页面操作改变数据内容,Wxml则与Chrome开发者工具中的Elements雷同,用于查看应用界面中的页面结构及css样式。

编辑界面,很简单,就是我们小应用项目的源代码编辑器,包含目录结构、代码编辑区域。

应用开发

在编写代码之前,我们先说明一个问题:一个微信小应用需要包含一个app.json文件,用于配置一些应用的全局属性及页面路径,如:

我们还可以通过app.js创建一些全局方法,通过app.wxss设置一些公共样式,类似网页开发中常用的reset.css或normalize.css。

完成上面的基础配置之后,我们需要为我们的应用创建页面,通常我们将页面放置在pages目录中,“你问我答”应用很简单,它的目录结构如下:

顺便说一下,每个页面可以拥有自己的样式文件xxx.wxcss,书写方式和css文件写法几乎完全一致,只是部分css属性并没有完全支持,它可以覆盖app.wxss中设置的全局样式。

编码过程不做赘述,该应用主要是使用“图灵机器人平台”的问答接口实现用户输入问题,系统通过机器人回答用户问题的功能,其效果演示如图:

这里面包含了SDK提供的loading组件和toast组件,但是我发现在Mac版的小应用开发工具中这两个组件工作有点小瑕疵,不知为何第一次总是不触发,不知是工具问题,还是我使用问题,尚不得而知。

总结

总体而言,微信小应用开发相对还是比较容易的,特别是对于前端开发工程师而言,和Web开发几乎没有差别,不同之处仅仅在于Api和控件方面的差异。而应用的数据来源可以是小应用AppData中存储的静态数据,也可以是通过wx.request请求的第三方动态数据,可谓非常灵活。简单的设想,结合“聚合数据”平台提供的API,前端开发工程师可以通过微信小应用,实现很多很多无法想象的功能。也许微信小应用真的会成为前端开发工程师的又一个春天。

最后,虽然这个应用很简单,还是附上我的源码~~