微信小程序获取wordpress文章列表（上拉加载更多+token验证）纯源码

在php, 程序源码 标签 ,

最近对微信小程序有点兴趣，就在网上找了一些教程练手，本文主要实现微信小程序获取wordpress数据库中的已发布文章按时间倒序排序；关于token的身份验证，如果不涉及到非公开的内容可以不必验证登录，后面的示例中使用了header头携带token以及 url参数中携带token，另外小程序本身貌似就支持session_id会携带cookie。小程序上获取到的wordpress文章列表最终效果如下图（下拉刷新+上拉加载更多）：

进入页面openapp页面时自动加载列表。下面直接上微信小程序端源码

如果要启用下拉刷新的话app.json需要增加一个配置 "enablePullDownRefresh": true 

"window": {
    "navigationBarTitleText": "染卷",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true 
  },

openapps.js

// pages/openapp/openapp.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    hidden: true,                          //隐藏表单控件
    page: 1,                              //当前请求数据是第几页
    pageSize: 10,                          //每页数据条数
    hasMoreData: true,                      //上拉时是否继续请求数据，即是否还有更多数据
    contentlist: [],                        //获取的数据列表，以追加的形式添加进去
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   // 页面初始化 options为页面跳转所带来的参数
 wx.setStorageSync('token', '请确保之前已经存放了token')
//发起网络请求
var that = this//不要漏了这句，很重要
that.getInfo('加载中……')
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.data.page = 1
    this.getInfo('刷新中……')
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.hasMoreData) {
      this.getInfo('加载更多数据')
     
  } else {
      wx.showToast({
          title: '没有更多数据',
      })
  }
  },

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

  },

  // 获取分页列表
getInfo: function (message) {
  var that = this;
  wx.showNavigationBarLoading()              //在当前页面显示导航条加载动画
  wx.showLoading({                        //显示 loading 提示框
      title: message,
  })
  wx.request({
      url: 'https://ranjuan.cn/getdata.php',    //本地设置不校验合法域名
      data: { page: that.data.page, count: that.data.pageSize,token: wx.getStorageSync('token') },
      method: 'get',
      header: { 'content-type': 'application/x-www-form-urlencoded','Access_Token':wx.getStorageSync('token') },
      success: function (res) {
         // var contentlistTem = that.data.contentlist;
          var getdata = that.data.contentlist;
          if (res.data.data.length > 0) {
              wx.hideNavigationBarLoading()     //在当前页面隐藏导航条加载动画
              wx.hideLoading()               //隐藏 loading 提示框
              if (that.data.page == 1) {
                  getdata = []
              }
              var contentlist = res.data.data;
              if (contentlist.length < that.data.pageSize) {
                  that.setData({
                      contentlist: getdata.concat(contentlist),
                      hasMoreData: false
                  })
              } else {
                  that.setData({
                      contentlist: getdata.concat(contentlist),
                      hasMoreData: true,
                      page: that.data.page + 1
                  })
              }
          }
      },
      fail: function (res) {
          wx.hideNavigationBarLoading()
          wx.hideLoading()
          fail()
      },
      complete: function (res) {

      },
  })
},
})

openapp.wxml

/* pages/openapp/openapp.wxml */
<view class="container">
 <block wx:for="{{contentlist}}">
 <!-- <text>{{item.images}}</text> -->
 <view class="main"  bindtap="onDetail" data-id='{{item.ID}}'>
 <view class="post_left">
<image  style="width:100%;height:100%" src="../../images/topp.jpg" ></image>
</view>
<view class="post_right">
  <view class="post_title">{{item.post_title}}</view>  
 <!-- <view class="post_content" bindtap="onDetail" data-id='{{item.ID}}'> {{item.post_content}}</view>-->
  <view class="post_date"> {{item.post_date}}</view>
</view>
</view>
 </block>
</view>

openapp.wxss

/* pages/openapp/openapp.wxss */
.container{ 
  width: 100%;
  padding:10rpx;
 /* display: flex;
  flex-wrap: wrap;*/
}

.main{
  margin:10rpx;
  width:100%;
  border-radius: 8rpx;
  background:#FFFFFF;
 /* border: 3rpx solid  #42A5F5; */
  display: flex;
  flex-wrap: wrap;
}
.post_left{
  width:25%;
}

.post_right{
  width:75%;
}
.post_title{
  width:100%;
 margin-left: 10rpx;
 height: 40px;
  font-size:14px;
  color:#000;
}
.post_date{
  width:100%;
  font-size:10px;
  margin-left: 10rpx;
}
.post_content{
  margin-left: 10rpx;
  font-size:12px;
 color: lightsteelblue;
  width:100%;
  height:40px;
  overflow: hidden;
}

远程接口getdata.php文件，如果无条件的可以使用后面给出的模拟数据。

<?php
file_put_contents("2.txt","\n\r".$t."  |  ".json_encode($_REQUEST),FILE_APPEND);
include('../conn.php');//链接wordpress数据库

if(isset($_REQUEST['token']) && $_REQUEST['token'] !=''){//这里仅演示以get方式获取客户端token

session_id($_REQUEST['token']);
session_start();

if(empty($_SESSION)){
   echo '尚未登录'; 
}else{
    //echo 'openid='.$_SESSION['openid'];
  /*  for($i=0;$i<12;$i++){
        
        $r['data'][$i]['id']=$i;
        $r['data'][$i]['msg']=$i+$i*$i.'信息详情';
        ++$i;
        }*/
        $page=$_REQUEST['page'];//页面
        $count=$_REQUEST['count'];//每页个数
        $db = new Db('select ID,post_date,post_content,post_title from wp_posts where post_status="publish" and post_type = "post" order by post_date desc limit  '.($page-1)*$count.','.$count);
        //var_dump($db->get_res());
        $r['data']=$db->get_res();
        //因为这里将查询结果赋予了数组$r['data'],
        //所以小程序客户端取的时候多了一级contentlist = res.data.data;
        //如果这里是$r=$db->get_res();那么小程序取值可以写成contentlist = res.data；
    
    echo json_encode($r);
}
}

采用模拟数据的getdata.php

<?php
$page=$_REQUEST['page'];//页面
$count=$_REQUEST['count'];//每页个数

for($i=0;$i<$count;$i++){
$r['data'][$i]['ID'] = ($page-1)*$count;
$r['data'][$i]['post_date'] = '2020-01-02';
$r['data'][$i]['post_content'] = 'wenben文本wenben文本wenben文本wenben文本wenben文本wenben文本wenben';
$r['data'][$i]['post_title'] = '染卷第'.(($page-1)*$count+$i).'篇文章标题';
}
echo json_encode($r);

die;

基于互联网精神，在注明出处的前提下本站文章可自由转载！

本文链接：https://ranjuan.cn/weixin-get-article-list/

赞赏

微信赞赏支付宝赞赏

发表评论