TNK：微信小程序开发尝鲜

微信小程序面世以来受的高度关注颇多，直至最近我才动手尝试展开了小程序的研发，总体上感觉还是极好的，有一点不适应环境的就是必须彻底摆脱Web APP研发对DOM的操作方式。在这里我就把我就是如何利用API研发微信小程序的过程译成教程，教导大家快速上手体验一次微信小程序的研发。

在已经开始之前我们先来看下成品的效果图

准备工作工作

我们先确认想研发一款什么样的小程序，首先必须合乎「大」，因为我们这次就是必须体验小程序的研发，所以尽量不要弄得太繁杂；其次就是「慢」，小程序里须要的数据啊、资源啊，最出色就是非常简单就有的，自己写下个API什么的这就太耗时了，就不叫做快速初学者了。

所以呢，如果能够调用非常简单的API那就是极好的，经过一番挑选出，我挑选了生成数据的 历史上的今天 这个API，调用这个API获取数据，我们只要搞2个页面就可以全然展现出了，又「大」又「慢」哈XD

API一枚: 「历史上的今天」

微信小程序 开发者工具

备注: API须要登记注册之后赢得KEY就可以采用，具体内容恳请查阅 生成数据 官方文档，这里预设各位已经登记注册并具有适当API所需的KEY

工程结构

微信开发者工具的加装和采用在这里就不多并作了解了，存有疑点的话可以看看微信官方的 轻便教程

先建立一个工程，依次页面「嵌入项目」－－「无AppID」，然后寄出「项目名称」并挑选「项目目录」，页面「嵌入项目」

然后我们去清扫一下预设工程的目录结构，删掉以下目录和文件

pages/logs/

pages/index/index.wxss

建立以下目录和文件

pages/logs/

pages/index/index.wxsspages/detail/

pages/detail/detail.js

pages/detail/detail.wxml

pages/templates/

pages/templates/item.wxml

res/

现在你看见的目录结构必须就是这样子的

.

├── app.js

├── app.json

├── app.wxss

├── pages

│ ├── detail

│ │ ├── detail.js

│ │ └── detail.wxml

│ ├── index

│ │ ├── index.js

│ │ └── index.wxml

│ └── templates

│ └── item.wxml

├── res

└── utils

└── util.js

这就是我们工程目录的最终结构了，后面还可以嵌入资源进来，但是整体结构还是这样不能发生改变的

修正布局

微信小程序就是通过修正 app.json 文件发生改变全局布局的，具体内容的可以布局项恳请各位自行查询小程序文档的 布局 一节

关上 app.json ，修正成

{

"pages":[

"pages/index/index",

"pages/detail/detail"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#3e3e3e",

"navigationBarTitleText": "历史今日",

"navigationBarTextStyle":"white"

},

"debug": true

}

我们这里修正了导航系统栏的背景颜色(navigationBarBackgroundColor)、标题颜色(navigationBarTextStyle)以及标题内容(navigationBarTitleText)，为了便利查阅调试信息，我还打开了debug模式

全局布局以及搞掂啦，接下来正式宣布已经开始编码

首页布局

前面已经说道了我们必须搞的就是「历史上的今天」这样的一个小程序，所以同一个日期可以存有很多条目，最常用的布局就是制成列表

列表里可以存有很多的条目，数量就是不确认的，所以我们无法在页面里写下死去了布局，这时候就要使用 模板(template) 了，我们可以在模板中定义代码片段，然后在相同的地方调用

我们去定义一个模板，关上 pages/templates/item.wxml ，嵌入代码

备注: 模板的采用细节恳请参照官方文档 模板 一节

接下来关上 pages/index/index.wxml 删除里面的内容，我们必须在这里撰写列表页，这里可以采用至我们上面定义的模板