开发一个微信小程序(2)：编写博客园随笔列表

admin2022-06-09未命名1153 浏览

上一篇介绍了如何通过博客园官方api获取随笔列表，本篇来实现把文章展示到小程序中

先来看一下最终的效果

1、调用获取 access_token 接口

如果想在小程序中成功调用接口，需要在小程序后台配置服务器域名，具体位置如下

开发/开发管理/开发设置/服务器域名

添加接口request合法域名

首先我们需要拿到个人博客园的 access_token，这里我希望不要频繁调用这个接口，当进入小程序时调用一次就够了

所以可以在app.js中写一个方法，调用接口拿到token，把token存储到内存中，后面想用的时候直接从内存中拿即可

打开小程序根目录下的 app.js

在 onLaunch()下编辑如下代码，主要是调用 api 接口

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 获取博客园token
    wx.request({
      url: 'https://oauth.cnblogs.com/connect/token',
      method: 'POST',
      header: {
       'Content-Type': "application/x-www-form-urlencoded"
      },
      data: {
        client_id: '5dd267da-xxx-xxx-xxx-xxx',
        client_secret: 'eK_xxxskexxDet70aBugHCxxxa8-vU4ZWxxxA4ypPxxx2SfE',
        grant_type: 'client_credentials'
      },
      success: (res) => { // 请求成功之后的回调函数
        // console.log(res);
        // wx.setStorage({  // 异步设置缓存
        //   key: 'access_token',
        //   data: res.data.access_token
        // })
        wx.setStorageSync('access_token', res.data.access_token) //同步获取设置缓存
   
        var value = wx.getStorageSync('access_token') // 提取缓存中的access_token
        console.log(value);

      }
    })

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

重新编译程序，即可打印出拿到的 access_token

2、编写文章列表页面

这里要做的有如下几件事：

  • 调用博客园随笔列表接口，拿到个人的随笔数据；
  • 把列表数据渲染到前端；
  • 上拉页面加载下一页数据，下拉页面刷新数据；
  • 调整列表样式；
  • 向随笔详情页传递一些必要参数；

在开始前，先创建2个page，一个是随笔列表，一个是随笔详情

打开小程序根目录下的 app.json，在 pages 中增加如下2个路径，保存后，会在pages目录下自动创建对应的文件夹：一个article，一个article_detial

2.1 调用博客园随笔列表接口，拿到个人的随笔数据

打开 pages/article/article.js，编辑如下代码

// pages/article/article.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    blogApp: 'hanmk',  //博客名称参数
    postCount: 0,  //博客数量
    isNull: false,
    posts: [],  // 博客园数据
    isloading: false,  //定一个标识符，默认为false，表示当前没有发送请求
    page: 1  //获取随笔列表时需要传的页码，默认为第一页
  },

// 获取博客总数
getBlogCount() {
  wx.request({
    url: `https://api.cnblogs.com/api/blogs/${this.data.blogApp}`, 
    //如果想在url中拼接字段，需要使用``包裹url
    header: {
      'Authorization': 'bearer ' + wx.getStorageSync('access_token')
    },
    method: 'GET',
    success: (res) => {
      console.log(res);
      this.setData({
        postCount: res.data.postCount
      })
    },
  })
},

// 获取博客园随笔列表
getPosts() {
  //开始发起请求时，将isloading置为true
  this.setData({
    isloading: true  //为true时，表示正在发起请求
  })

  //展示loading效果
  wx.showLoading({
    title: '努力加载中...',
  })

  //发起请求
  wx.request({
    url: `https://api.cnblogs.com/api/blogs/${this.data.blogApp}/posts`,
    header: {
      'Authorization': 'bearer ' + wx.getStorageSync('access_token')
    },
    method: 'GET',
    data: {
      pageIndex: this.data.page
    },
    success: (res) => {
      // console.log(res);
      console.log(res.data);
      this.setData({
        posts: [...this.data.posts, ...res.data] //使用展开运算符，将旧数据取出和这次请求到的新数据拼接到一起再赋给posts（如果直接把res.data赋给posts，则始终只有请求到的数据，不会展示所有请求到的数据）
      })
      if (res.data.length == 0) {
        this.setData({
          isNull: true
        })
      }
    },
    complete: () => {
      wx.hideLoading()  //隐藏loading效果
      //请求发起后，将isloading置为false
      this.setData({
        isloading: false  
      })
    }
    
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getBlogCount()
    this.getPosts()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: '冰霜博客园随笔',  //把这个页面的标题自定义设置一下
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    //请求前，需要重置参数
    this.setData({
      page: 1,
      posts: [],
      postCount: 0
    })
    this.getPosts()  //下拉刷新调用这个函数，重新发起请求
    wx.stopPullDownRefresh()  //真机上，刷新完后，调用这个方法，关闭下拉刷新
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // console.log("上拉触底");
    console.log(this.data.posts.length);
    console.log(this.data.isNull);
    if(this.data.isNull) {  //如果isNull为true则弹出提示，不再发起请求
      return wx.showToast({
        title: '数据加载完毕！',
        icon: 'none'
      })
    }
    if(this.data.isloading) return  //如果isloading为true，则退出onReachBottom这个方法
    this.setData({
      page: this.data.page + 1  //上拉触底时，给页码加1，这样再发起请求时，就请求到了下一页的数据
    })
    this.getPosts()  //调用获取随笔的方法
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

代码说明：

  1. getPosts() 方法中调用博客园随笔列表接口，并把结果赋给posts参数；
  2. 在 onLoad()函数中调用getPosts() 方法，这样一进入这个列表页就会触发请求获取随笔数据；
  3. 在onPullDownRefresh()函数中编写下拉刷新的代码逻辑，在这里面也要调用getPosts()方法，但是在请求前把参数重置了一下；
  4. 在onReachBottom()函数中定义上拉触底的代码逻辑，调用getPosts()方法，每次触发请求前，给page参数+1，也就是请求下一页的数据；

2.2 渲染数据到前端

后端拿到数据后，接下来要把数据渲染到前端

在article.js中，我用 posts 来接收接口返回的随笔数据，在前端可以使用for循环处理数据，同时为了可以点击每条随笔跳转到详情页，使用<navigator>标签，

打开pages/article/article.wxml代码如下

<!--pages/article/article.wxml-->

<!-- 文章列表 -->
<view class="box">
    <navigator wx:for="{{posts}}" wx:key="Id" class="item" 
              url="/pages/article_detail/article_detail?url={{item.Url}}&auther={{item.Author}}" 
              open-type="navigate">
              <view>
                  <text class="title">{{item.Title}}</text>
              </view>
              <view class="bottom-element">
                  <text class="little-text">阅读：({{item.ViewCount}}) 评论：({{item.CommentCount}})</text>
                  <text class="post-date">{{tools.splitDate(item.PostDate)}}</text>
              </view>
    </navigator>
</view>
<!-- <text>123</text> -->
<!-- <view class="box"></view> -->

<wxs src="../../utils/tools.wxs" module="tools"></wxs>

在上述代码中，每篇博客文章都提取了如下4个属性

文章标题Title、阅读量ViewCount、评论数CommentCount、发布日期PostDate

同时在跳转至具体文章详情时，传递了2个参数文章链接Url、文章作者Author

对应的样式代码，打开pages/article/article.wxss

/* pages/article/article.wxss */
/* .box {
  height: 2000rpx;
  background-color: lightblue;
} */

/* 设置整个页面的背景颜色 */
page{
  background-color: rgb(238, 237, 237);
}

.item {
  height: 150rpx;
  border-bottom: 15rpx solid #efefef;
  /* border-radius: 8rpx; */
  line-height: 50rpx;
  /* margin: 10rpx; */
  position: relative;
  padding-top: 20rpx;
  background-color: rgb(255, 255, 255);  /*设置每张小卡片的颜色*/
}
.title{
  margin-left: 20rpx;
  margin-right: 20rpx;
  display: -webkit-box;  /*设置为弹性盒子*/
  overflow:hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*显示省略号*/
  -webkit-line-clamp: 1; /*多少行后显示省略号，这里设置为第一行超出后显示省略号*/
  word-break:break-all; /*强制英文单词自动换行,可要可不要*/
  -webkit-box-orient: vertical; /* 从上到下垂直排列子元素*/
}

.bottom-element{
  font-size: 24rpx;
  display: flex;
  position: relative;
  padding-top: 40rpx;
}

.bottom-element .little-text{
  position: absolute;
  left: 20rpx;
}

.bottom-element .post-date{
  position: absolute;
  right: 16rpx;
}

这样博客园随笔列表的页面就基本完成了

3、文章详情页

完成博客随笔列表页面后，接下来希望点击文章能够跳转到对应的详情页

在上一步中，利用<navigator>标签进行页面导航，在跳转时，设置了要传递的参数

在文章详情页需要接收传递来的参数

打开 pages/article_detail/article_detail.js，编辑代码

在 onLoad()函数中处理传递过来的参数

// pages/article_detail/article_detail.js
//随笔详情
Page({

  /**
   * 页面的初始数据
   */
  data: {
    query: {} // 接收navigator传来的参数
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query: options  //把navigator传来的参数赋给query
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: '随笔详情',  //把这个页面的标题自定义设置一下
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

开始我文章详情的url传到详情页，然后尝试使用<web-view>标签来展示

打开 pages/article_detail/article_detail.wxml

<web-view src="{{query.url}}"></web-view>

结果发现不能显示文章详情

后来查了一下，这是微信小程序的限制，个人类型的小程序不能配置外部业务域名，所以也就无法展示外部链接的内容。。。

所以退而求其次，我只在详情页展示了文章详情链接，后续再想办法如何展示文章内容

合智互联客户成功服务热线：400-1565-661

admin
admin管理员

上一篇:YARN的机架感知功能
下一篇:

留言评论

暂无留言