微信小程序之历史上的今天
需求描述
今天我们再来做一个小程序，主要是搜索历史上的今天发生了哪些大事，结果如下
当天的历史事件或者根据事件选择的历史事件的列表：
点击某个详细的历史事件以后看到详细信息：
API申请和小程序设置
API申请
第一步：完整账号注册
我们需要来到如下网站，注册账号：万维易源
第二步：账号注册完成以后，点击右上角的控制台信息。
第三步：在控制台界面选择接口使用者-appKey管理
第四步：在appKey管理界面，点击添加按钮，在应用中输入自己想要的名字，白名单非必填，可调用接口搜索手机可以查询到对应的如下信息，选择以后点击"立即创建"。
第五步：设置以后，我们便可以看到我们常见的appKey了。
小程序设置
在小程序中，我们应用的API不是随便能够使用的，是需要在小程序中进行设置才能够使用。
第一步：登录小程序管理后台
第二步：在小程序后台点击管理-开发管理中的开发设置
第三步：在开发设置中鼠标滚轮往下拉找到服务器域名设置，然后点击右侧修改按钮，在request合法域名中讲我们设置的需要的api加入进去，结果如下
至此，我们的API Key的申请以及小程序的设置已经完成，我们可以正式开发我们的业务。
业务实现
代码框架
我们的业务代码框架如下
代码实现
app.json实现
总体基调设置如下
json
{
"pages": [
"pages/index/index",
"pages/details/details",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTitleText": "历史上的今天",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}util.js实现
js
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const 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实现
界面布局实现
html
<!--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实现
界面样式实现
css
/* 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实现
业务实现如下
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实现
界面布局实现
html
<!--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实现
界面样式实现
css
/* 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实现
业务实现如下
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() {
}
})至此我们完成历史上今天的开发内容。