当前位置：首页 > article >正文

微信小程序之今日热搜新闻

article 2024/12/22 12:12:17

微信小程序之今日热搜新闻

需求描述

今天心血来潮，想要知道当前国内的热点新闻想要快速浏览，于是做了个今日热搜新闻，结果如下
在这里插入图片描述

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: {
        //APPID
        appid: '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 () {

    }
})