微信小程序之今日热搜新闻
需求描述
今天心血来潮，想要知道当前国内的热点新闻想要快速浏览，于是做了个今日热搜新闻，结果如下
API申请和小程序设置
API申请
第一步：完整账号注册
我们需要来到如下网站，注册账号：万维易源
第二步：账号注册完成以后，点击右上角的控制台信息
第三步：在控制台界面选择接口使用者-appKey管理
第四步：在appKey管理界面，点击添加按钮，在应用中输入自己想要的名字，白名单非必填，可调用接口搜索手机可以查询到对应的如下信息，选择以后点击“立即创建”。
第五步：设置以后，我们便可以看到我们常见的appKey了。
小程序设置
在小程序中，我们应用的API不是随便能够使用的，是需要在小程序中进行设置才能够使用。
第一步：登录小程序管理后台：微信小程序
第二步：在小程序后台点击管理-开发管理中的开发设置
第三步：在开发设置中鼠标滚轮往下拉找到服务器域名设置，然后点击右侧修改按钮，在request合法域名中讲我们设置的需要的api加入进去，结果如下
至此，我们的API Key的申请以及小程序的设置已经完成，我们可以正式开发我们的业务。
业务实现
代码框架
我们的业务代码框架如下
代码实现
app.json实现
总体基调设置如下
{"pages": ["pages/index/index","pages/logs/logs" ],"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#FFFFFF","navigationBarTitleText": "今日热搜","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json"
}
index.wxml实现
界面布局实现
<!--pages/index/index.wxml-->
<view class='hot'><view class='button'><button bindtap='bindSearch'>今日热点速览</button></view><view class="news" wx:for="{{arrayResult}}" wx:key="index"><text class="title">{{index + 1}}.{{item.hot_research}}\n</text><text>\n</text></view>
</view>
index.wxss实现
界面样式实现
/* pages/index/index.wxss */
.hot {width: 90%;margin: 0 auto;font-size: 30rpx;overflow: scroll;
}.title{font-size: large;font-weight: bolder;
}.news{border: 1rpx solid #eee;margin: 15prx 0;
}.button button {background-color: #ff0000;color: white;
}
index.js实现
业务实现如下
Page({/*** 页面的初始数据*/data: {//APPIDappid: 'appid',//密钥sign: 'appkey',//结果arrayResult: []},//查询热搜结果bindSearch : function (e) {var that = this;//请求wx.request({url: 'https://route.showapi.com/109-37?appKey=' + that.data.sign,success : function (e) {console.log(e.data);//获取热搜新闻var result = e.data;console.log(result.showapi_res_body.hot);//判断是否返回消息if (result.showapi_res_code == -1004) {that.setData({ret_code: '接口返回错误',});} else {that.setData({arrayResult: result.showapi_res_body.hot,});}}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
我们可以看到通过API调用返回的结果如下
至此我们完成手机归属地的开发内容。