准备
我们首先确定我们要开发什么样的小程序。我们首先要遵守“小程序”，因为我们这次要体验小程序的开发，所以尽量不要弄的太复杂；二是“快”。小程序所需的数据和资源现在是最好的。自己写一个API太费时间，不叫快速上手。
所以，如果能调用现成的 API 就好了。经过一番选择，我选择了聚合数据的方法今天的历史API，调用这个API来获取数据。我们只需要制作两个page 就可以完全显示出来。它“小”和“快”哈XD
API海贼王：历史上的今天」
微信小应用程序开发工具
注：该API可以为您已经注册并获得了按键后方可使用。详情请参考汇总数据官方文档。这里默认你已经注册并拥有对应API所需的key
工程结构
微信开发者工具的安装和使用这里不做介绍。有问题可以看官网微信API教程
首先创建一个项目，点击Add Item-no 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文件来改变全局配置。具体可配置项请参考小程序文档进行配置A部分
打开 app.json 并将其更改为
{
"pages":[ "pages/index/index", "pages/detail/detail" ],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#3e3e3e",
"Navigationbartitletext": "history today",
"navigationBarTextStyle":"white" },
"debug": true }
在这里，我们修改了导航栏的背景颜色（navigationbarbackgroundcolor）、标题颜色（navigationbartextstyle）和标题内容（navigationbartitletext）。为了方便查看调试信息，我也开启了调试模式
全局配置完成。接下来，我们正式开始编码
主页布局
前面提到过，我们需要做的是一个像“历史上的今天”这样的小程序，所以同一天会有很多项目。最常见的布局是做一个列表
列表中的项目会很多，数量不确定，所以我们无法在页面中写布局。这时候就需要用到模板了。我们可以在模板中定义代码片段，并在不同的地方调用它们
让我们定义一个模板，打开 pages/templates/item.wxml 并添加代码
<template name="tItem"> <navigator url="../detail/detail?id={{item.e_id}}"> <view class="ui-list-item ui-pure-item ui-border-b"> <view class="ui-item-span"><text>{{item.date}}</text></view> <view class="ui-item-content ui-nowrap"><text>{{item.title}}</text></view> </view> </navigator> </template>
注：模板模板A部分详情请参考官方文档
接下来，打开 pages/index/index.wxml 并删除内容。我们将在这里写一个列表页面并使用上面定义的模板
< import / > < scroll view scroll-y = "true" class = "flex row UI list UI border-t" > < template is = "TItem" data = "{item}" Wx: for = "{events}" / > < view class = "UI tips" > < view Wx: if = "{hidden}" > < text > there is no more content < / text > < / View > < view Wx: else > < text > content loading... < / text > < / View > < / View > < / scroll View > < loading hidden = "{hidden}" >Loading...</loading>
可以注意到，第一行使用import将模板导入页面，然后使用is属性声明要使用的模板，并使用data属性传入数据供模板使用
注意：模板有自己的作用域，只能使用data传入的数据
为了测试和查看布局效果，我们打开pages/index/index.js，删除里面的代码，然后添加如下代码，手动创建数据，转入页面渲染
Page({
data: {
hidden: true,
events: [
{
date: "2016-10-14",
Title: "today on history"},
{
date: "2016-10-14",
Title: "today on history"},
{
date: "2016-10-14",
Title: "today on history"},
{
date: "2016-10-14",
Title: "today on history"},
{
date: "2016-10-14",
Title: "today on history"},
{
date: "2016-10-14",
Title: "today on history"}
]
}
})
保存后点击开发工具左侧的compile查看效果
注意：布局会使用图标字体，导入到RES/中，样式写在app.wxss全局样式表中。请从源代码中获取图标字体文件和样式。本教程不解释样式
详情页
主页的布局已经完成。暂时放下首页列表，然后开始写详细内容的页面
打开 pages/detail/detail.wxml 并添加以下内容
<view class="container"> <view class="ui-title ui-border-b"><text>{{detail.title}}</text></view> <view class="ui-content"><text>{{detail.content}}</text></view> <block wx:for="{{detail.picUrl}}"> <view> <view><image mode="aspectFit"/></view> <view class="ui-pic-title"><text>{{item.pic_title}}</text></view> </view> </block> </view> <loading hidden="{{hidden}}">Loading...</loading>
好的，这个页面就是这么简单。现在我们打开pages/detail/detail.js，手动添加数据到这个页面看看效果
Page({
data:{
hidden: true,
detail: {
Title: "today in history",
Content: "today in history, today in history, today in history, today in history, today in history, today in history, today in history, today in history, today in history, today in history,
picUrl: [
{
url: "http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/ChMkJlfJWJCIYePaAAPdCld59MEAAU-KAP0U3gAA90i450.jpg",
pic_ Title: "this is the picture title"}
]
}
}
})
填写资料
现在页面布局已经完成，是时候调用API编写逻辑层代码来填充页面上的数据了。在开始之前，让我们清理一下无用的代码
打开 app.js 删除无用的函数和属性
App({
})
上面的步骤是一个额外的步骤，不影响我们接下来需要做什么
打开 utils / util.js 并清空里面的代码。添加以下内容
//Base URL const API for querying event list_ URL_ L = " http://v.juhe.cn/todayOnhistory/queryEvent.php "// base URL const API for querying details_ URL_ D = " http://v.juhe.cn/todayOnhistory/queryDetail.php "// key const API obtained from API Application_ Key = "your API key" // get the event list function fetchevents (today) {var promise = new promise (function (resolve, reject){
wx.request({
url: API_URL_L,
data: {
key: API_KEY,
date: today
},
header: { 'Content-Type': 'application/json' },
success: resolve,
fail: reject
})
}) return promise
} function getEvents() { var tmpDate = new Date() var today = tmpDate.getMonth() + 1 today = today + '/' + tmpDate.getDate() return fetchEvents(today)
.then(function(res) { // console.log(res.data.result) return res.data.result
})
.catch(function(err) { console.log(err) return []
})
}// get details function fetchdetail (e_id) {var promise = new promise (function (resolve, reject){
wx.request({
url: API_URL_D,
data: {
key: API_KEY,
e_id: e_id
},
header: { 'Content-Type': 'application/json' },
success: resolve,
fail: reject
})
}) return promise
} function getDetail(e_id) { return fetchDetail(e_id)
.then(function(res) { // console.log(res.data.result) return res.data.result
})
.catch(function(err) { console.log(err) return []
})
} module.exports = {
getEvents: getEvents,
getDetail: getDetail
}
注意：请参考API_用你申请的key替换key的值
我们要通过API获取的数据有两种：一种是“事件列表”，另一种是事件对应的“详情”。上面使用了 ES6 提供的 promise 对象。详情请参考阮一峰的JavaScript标准参考教程（alpha）Promise对象“部分”中的“事件列表”
最后，模块。Exports 用于将两个函数暴露给外部，以便它们可以被外部调用
我们继续打开pages/index/index.js文件，修改如下
const util = require('../../utils/util.js')
Page({
data: {
hidden: false,
events: []
},
Onload: function (options) {// page initialization options is the parameter var self = this brought by page Jump
util.getEvents().then(function(data) { self.setData({
hidden: true,
events: data
})
})
}
})
然后打开pages/detail/detail.js，修改如下
const util = require('../../utils/util.js')
Page({
data:{
hidden: false,
detail: {}
},
Onload: function (param) {// page initialization parameter var self = this util.getdetail (param. ID). Then (function (result) brought by param for page Jump{
self.setData({
detail: result[0]
})
})
},
Onready: function() {// page rendering is complete wx.setnavigationbartitle ({
title: this.data.detail.title
}) this.setData({
hidden: true })
}
})
这里我们调用 wx.setnavigationbartitle 方法来动态设置导航栏的标题内容。需要注意的是，只有页面渲染完成后才能调用该方法修改导航栏的标题，即onready
