微信小程序之历史上的今天

需求描述

今天我们再来做一个小程序，主要是搜索历史上的今天发生了哪些大事，结果如下
当天的历史事件或者根据事件选择的历史事件的列表：

点击某个详细的历史事件以后看到详细信息：

API申请和小程序设置
API申请
第一步：完整账号注册
我们需要来到如下网站，注册账号：万维易源
第二步：账号注册完成以后，点击右上角的控制台信息。

第三步：在控制台界面选择接口使用者-appKey管理

第四步：在appKey管理界面，点击添加按钮，在应用中输入自己想要的名字，白名单非必填，可调用接口搜索手机可以查询到对应的如下信息，选择以后点击“立即创建”。

第五步：设置以后，我们便可以看到我们常见的appKey了。

小程序设置

在小程序中，我们应用的API不是随便能够使用的，是需要在小程序中进行设置才能够使用。
第一步：登录小程序管理后台
第二步：在小程序后台点击管理-开发管理中的开发设置

第三步：在开发设置中鼠标滚轮往下拉找到服务器域名设置，然后点击右侧修改按钮，在request合法域名中讲我们设置的需要的api加入进去，结果如下

至此，我们的API Key的申请以及小程序的设置已经完成，我们可以正式开发我们的业务。

业务实现

代码框架

我们的业务代码框架如下

代码实现

app.json实现

总体基调设置如下

{"pages": ["pages/index/index","pages/details/details","pages/logs/logs" ],"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#FFFFFF","navigationBarTitleText": "历史上的今天","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json"
}

util.js实现

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [month, day].map(formatNumber).join('').toString()
}const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n
}module.exports = {formatTime: formatTime
}

index.wxml实现

界面布局实现

<!--pages/index/index.wxml-->
<view class='hot'><view class='button'><button bindtap='bindSearch'>历史上的今天{{timesTamp}}</button></view><view class="dateChoose"><view>时间选择：</view><picker mode="date" value="{{timesTamp}}" bindchange="bindchange"><view><text>{{timesTamp}}</text> </view></picker></view><view class="news" wx:for="{{arrayResult}}" wx:key="index"><navigator url="/pages/details/details?title={{item.title}}&content={{item.content}}&img={{item.img}}"><text class="title">{{index + 1}}.{{item.title}}</text></navigator></view>
</view>

index.wxss实现

界面样式实现

/* pages/index/index.wxss */
.hot {width: 90%;margin: 0 auto;font-size: 30rpx;overflow: scroll;
}
.dateChoose{font-size: large;font-weight: bolder;display: flex;flex-flow: row nowrap;padding: 10rpx;
}.title{font-size: large;font-weight: bolder;
}.news{border: 1rpx solid #eee;padding: 15rpx 0;
}.button button {background-color: #ff0000;color: white;
}

index.js实现

业务实现如下

// pages/index/index.js
const util = require('../../utils/util.js');
Page({/*** 页面的初始数据*/data: {//密钥sign: 'APIKEY',//当前查询的时间timesTamp : util.formatTime(new Date()),//结果arrayResult: []},bindchange: function (e) {var that = this;var data = e.detail.value;var finallDate = data.split('-');console.log(finallDate[1] + finallDate[2]);that.setData({timesTamp: finallDate[1] + finallDate[2],});},//查询历史bindSearch : function (e) {var that = this;console.log(that.data.timesTamp);//请求wx.request({url: 'https://route.showapi.com/119-42?appKey=' + that.data.sign + '&needContent=1&date=' + that.data.timesTamp,success : function (e) {console.log(e.data.showapi_res_body.list);//获取热搜新闻var result = e.data.showapi_res_body.list;console.log(result);//判断是否返回消息if (result.showapi_res_code == -1004) {that.setData({ret_code: '接口返回错误',});} else {that.setData({arrayResult: result,});}}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

details.wxml实现

界面布局实现

<!--pages/details/details.wxml-->
<view><text class="title">{{title}}</text>
</view>
<view><text class="content">{{content}}</text>
</view>
<view><image class="image" src="{{img}}" mode="widthFix"/>
</view>

details.wxss实现

界面样式实现

/* pages/details/details.wxss */
.title{font-size: large;font-weight: bolder;text-align: center;padding: 10rpx;margin: 20rpx;
}
.content{font-size: small;padding: 10rpx;margin: 30rpx;
}
.image{width: 100%;justify-content: center;
}

details.js实现

业务实现如下

// pages/details/details.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.setData({title : options.title,content : options.content,img : options.img});},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

至此我们完成历史上今天的开发内容。