开发一个微信小程序(3)：编写公众号文章列表

原创

冰霜

修改于 2022-06-10 17:35:22

1.2K0

修改于 2022-06-10 17:35:22

文章被收录于专栏：冰霜的软件测试技术分享冰霜的软件测试技术分享

本篇讲一下如何把微信公众号中发布的文章移植到小程序中

具体展示内容以及列表样式，我参考了订阅号助手中的「历史图文素材」，如下

所以在小程序中需要实现以下功能：

获取已发布的素材；
将数据渲染到前端，每条数据包含标题、概要、图片(这些字段接口都有返回)；
调整列表样式；
点击文章跳转至详情；

1、获取已发布的素材

在之前一篇文章中介绍了如果通过接口获取公众号素材，传送门：开发一个微信小程序(1)：获取文章列表

打开根目录下app.json，先创建2个文件夹 wx_article和 wx_article_detail

最开始我的想法是通过接口来实时拿到微信公众号的文章，但是经过一番操作发现行不通，原因是：微信不允许直接在小程序中调用微信公众号的接口(主要是会暴露一些敏感信息，例如AppID)

然后我把调用公众号接口相关的功能写到了服务端(用flask即可)，本地部署好服务后，尝试在小程序中调用自己定义的接口，结果发现小程序不允许直接调用ip地址，需要配置域名

接着我修改本地host文件，把ip和域名做了一个映射，使用postman通过域名调用flask接口时，提示成功，然后尝试在小程序调用，发现依然不行，这次提示我的域名不安全，不是https

接着我又去阿里云购买了一个域名，同时申请了一个免费的ssl证书，把域名和我本地ip绑定，同时修改flask启动方式，这样就能用https访问接口了，经过postman试验调用成功，然后尝试在小程序调用，发现又失败了，这次提示我的域名没有进行备案

心态快炸了，没想到卡在了这里，微信小程序的限制也太多了

最后我决定先跳过这里，把公众号文章的数据提取到一个js文件中，然后在小程序中，直接去读这个js文件来获取数据，这样我就不必卡在这里，可以继续进行后面的学习了～

1.1 创建一个js文件，存放文章数据

在根目录下创建一个文件夹 data，然后在data下创建一个文件wx_article_data.js

里面的数据，是我通过接口拿到的，都粘贴到了这个文件中

1.2 读取并处理数据

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

// pages/wx_article/wx_article.js

//引入本地数据
var wxArticleData = require("../../data/wx_article_data.js")

Page({

  /**
   * 页面的初始数据
   */
  data: {
    page: 1,
    posts: [],
    isloading: false,  //定一个标识符，默认为false，表示当前没有发送请求
  },

  //提取本地存储的微信公众号数据
  get_wx_article() {

      //开始取数据时，将isloading置为true
      this.setData({
        isloading: true  //为true时，表示正在发起请求
      })

      //展示loading效果
      wx.showLoading({
        title: '努力加载中...',
      })
    if (this.data.page === 1) {
      this.setData({
        posts: [...this.data.posts, ...wxArticleData.wxData.slice(0, 10)]  //第一次取前10个
      })
    }
    else {
      this.setData({
        //后续当page>1时，从下标开始取10个
        posts: [...this.data.posts, ...wxArticleData.wxData.slice(this.data.page*10-10, this.data.page*10)]
      })
    }
    
    //取完数后
    wx.hideLoading()  //隐藏loading效果
    //取数后，将isloading置为false
    this.setData({
      isloading: false  
    })
    
  },

  //通过编程式导航跳转到非tabBar页面
  gotodetail(e) {
    // console.log(e);
    const item = e.currentTarget.dataset['item'];
    // console.log(item);
    const article_url = item.url;
    const jpg_url = item.jpg_url;
    wx.navigateTo({
      url: '/pages/wx_article_detail/wx_article_detail?article_url='+
      encodeURIComponent(article_url)+'&jpg_url='+encodeURIComponent(jpg_url)
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.get_wx_article()
  },

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

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

  },

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

  },

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

  },

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.isloading) return  //如果isloading为true，则退出onReachBottom这个方法
    this.setData({
      page: this.data.page + 1  //上拉触底时，给页码加1，这样再发起请求时，就请求到了下一组的数据
    })
    this.get_wx_article()  //调用获取随笔的方法
  },

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

  }
})

主要是 get_wx_article() 方法，它的作用是读取 wx_article_data.js 中的数据并进行处理

每次提取10个，上拉页面触底时，加载下一组数据

在data中定义了一个参数page，如果page=1，则取前10个数据

if (this.data.page === 1) {
      this.setData({
        posts: [...this.data.posts, ...wxArticleData.wxData.slice(0, 10)]  //第一次取前10个
      })
    }

如果page>1，则从下标开始往后取10个

 else {
      this.setData({
        //后续当page>1时，从下标开始取10个
        posts: [...this.data.posts, ...wxArticleData.wxData.slice(this.data.page*10-10, this.data.page*10)]
      })
    }

在上拉触底事件中，给page+1

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.isloading) return  //如果isloading为true，则退出onReachBottom这个方法
    this.setData({
      page: this.data.page + 1  //上拉触底时，给页码加1，这样再发起请求时，就请求到了下一组的数据
    })
    this.get_wx_article()  //调用提取本地存储的微信公众号数据的方法
  },

2、将数据渲染到前端 & 调整列表样式

打开 /pages/wx_article/wx_article.wxml

<!--pages/wx_article/wx_article.wxml-->
<!-- <text>pages/wx_article/wx_article.wxml</text> -->

<!-- 文章列表 -->
<view class="box">
    <view class="items" wx:for="{{posts}}" wx:key="media_id" bindtap="gotodetail" data-item="{{item}}">
          <view class="father">
            <view class="son1">
              <text class="title">{{item.title}}</text>
              <text class="digest">{{item.digest}}</text>
            </view>
            <view class="son2">
              <image src="{{item.jpg_url}}" mode="aspectFill"></image>
            </view>
          </view>
          <!-- <view class="bottom-element">
              <text class="little-text">阅读：({{item.ViewCount}}) 评论：({{item.CommentCount}})</text>
              <text class="post-date">{{tools.splitDate(item.PostDate)}}</text>
          </view> -->
    </view>
</view>

用for循环渲染数据，同时添加编程式导航，使得点击文章能够跳转至详情，使用bindtap绑定事件gotodetail

同时传递一个参数item，item的值就是for循环的item对象，写法data-item="{{item}}"

gotodetail()方法如下

  //通过编程式导航跳转到非tabBar页面
  gotodetail(e) {
    // console.log(e);
    const item = e.currentTarget.dataset['item']; //接收页面传来的参数item
    // console.log(item);
    const article_url = item.url;  //获取item中的url
    const jpg_url = item.jpg_url; // 获取item中的jpg_url
    wx.navigateTo({
      url: '/pages/wx_article_detail/wx_article_detail?article_url='+
      encodeURIComponent(article_url)+'&jpg_url='+encodeURIComponent(jpg_url)
      //这里对文章url和图片url做了转码处理，因为url中包含很多特殊字符，直接传递会丢失
    })
  },

接下来再调整样式

主要是把标题放上面，概要放下面，图片放右侧

打开/pages/wx_article/wx_article.wxss

/* pages/wx_article/wx_article.wxss */

.items {
  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);  /*设置每张小卡片的颜色*/
}

.father{
  display: flex;
}
.son1{
  width: 80%;
  display: flex;
  flex-direction: column;  /*使元素纵向布局（默认为横向）*/
}
.son2{
  width: 20%;
  display: flex;
}
image{
  height: 90%;
  width: 100%;
  margin-right: 20rpx;
  margin-left: 10rpx;
}

.title{
  font-size:32rpx;
  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; /* 从上到下垂直排列子元素*/
}

.digest {
  font-size: 27rpx;
  color: gray;
  margin-top: 30rpx;
  margin-left: 20rpx;
  display: -webkit-box;  /*设置为弹性盒子*/
  overflow:hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*显示省略号*/
  -webkit-line-clamp: 1; /*多少行后显示省略号，这里设置为第一行超出后显示省略号*/
  word-break:break-all; /*强制英文单词自动换行,可要可不要*/
  -webkit-box-orient: vertical; /* 从上到下垂直排列子元素*/
}

3、文章详情

如果我们拿到公众号文章的url后，可以使用<web-view>标签来展示详情

前提是要把公众号与小程序进行关联，打开微信公众平台，找到如下位置进行关联即可

对应代码如下

/pages/wx_article_detail/wx_article_detail.js

// pages/wx_article_detail/wx_article_detail.js
Page({

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

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

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

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

pages/wx_article_detail/wx_article_detail.wxml

<!--pages/wx_article_detail/wx_article_detail.wxml-->
<web-view src="{{article_url}}"></web-view>
<!-- <text>{{article_url}}</text> -->

OK，这样就完成了公众号文章列表功能页面

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯云开发者社区

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度