微信小程序新手教程开发示例体验 _睿知

微信小程序新手教程开发示例体验，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧
微信小程序面世以来受到的关注颇多，直到最近我才动手尝试进行了小程序的开发，总体上感觉还是不错的，有一点不适应的就是要摆脱WebAPP开发对DOM的操作。在这里我就把我是如何利用API开发微信小程序的过程写成教程，教大家快速上手体验一次微信小程序的开发。
准备工作
我们先确定想要开发一款什么样的小程序，首先要符合「小」，因为我们这次是要体验小程序的开发，所以尽量不要弄得太复杂;其次是「快」，小程序里需要的数据啊、资源啊，较好是现成就有的，自己写个API什么的这就太耗时了，就不叫快速上手了。
所以呢，如果能调用现成的API那是极好的，经过一番挑选，我选择了聚合数据的历史上的今天这个API ，调用这个API获取数据，我们只要做2个页面就可以完全展示出来了，又「小」又「快」哈XD
API一枚: 「历史上的今天」
微信小程序开发者工具
注: API需要注册之后获得KEY才能使用，具体请查看聚合数据官方文档，这里默认各位已经注册并拥有相应API所需的KEY
工程结构
微信开发者工具的安装和使用在这里就不多作介绍了，有疑问的话可以看微信官方的简易教程
先创建一个工程，依次点击「添加项目」－－「无AppID」，然后填好「项目名称」并选择「项目目录」，点击「添加项目」

文章插图
添加项目
然后我们来清理一下默认工程的目录结构，删除以下目录和文件
pages/logs/
pages/index/index.wxss
创建以下目录和文件
pages/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"
]
"pages/index/index",
"pages/detail/detail"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "＃3e3e3e",
"navigationBarTitleText": "历史今日",
"navigationBarTextStyle":"white"
}
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "＃3e3e3e",
"navigationBarTitleText": "历史今日",
"navigationBarTextStyle":"white"
},
"debug": true
}
我们这里修改了导航栏的背景颜色(navigationBarBackgroundColor)、标题颜色(navigationBarTextStyle)以及标题内容(navigationBarTitleText) ，为了方便查看调试信息，我还开启了debug模式
全局配置以及搞定啦，接下来正式开始编码
首页布局
前面已经说了我们要做的是「历史上的今天」这样的一个小程序，所以同一个日期会有很多条目，最常见的布局就是做成列表