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

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

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

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

1"window": {
2    "navigationBarTitleText": "染卷",
3    "navigationBarTextStyle": "black",
4    "enablePullDownRefresh": true 
5  },

openapps.js

  1// pages/openapp/openapp.js
  2Page({
  3  /**
  4   * 页面的初始数据
  5   */
  6  data: {
  7    hidden: true,                          //隐藏表单控件
  8    page: 1,                              //当前请求数据是第几页
  9    pageSize: 10,                          //每页数据条数
 10    hasMoreData: true,                      //上拉时是否继续请求数据，即是否还有更多数据
 11    contentlist: [],                        //获取的数据列表，以追加的形式添加进去
 12  },
 13 
 14  /**
 15   * 生命周期函数--监听页面加载
 16   */
 17  onLoad: function (options) {
 18   // 页面初始化 options为页面跳转所带来的参数
 19 wx.setStorageSync('token', '请确保之前已经存放了token')
 20//发起网络请求
 21var that = this//不要漏了这句，很重要
 22that.getInfo('加载中……')
 23  },
 24 
 25  /**
 26   * 生命周期函数--监听页面初次渲染完成
 27   */
 28  onReady: function () {
 29 
 30  },
 31 
 32  /**
 33   * 生命周期函数--监听页面显示
 34   */
 35  onShow: function () {
 36 
 37  },
 38 
 39  /**
 40   * 生命周期函数--监听页面隐藏
 41   */
 42  onHide: function () {
 43 
 44  },
 45 
 46  /**
 47   * 生命周期函数--监听页面卸载
 48   */
 49  onUnload: function () {
 50 
 51  },
 52 
 53  /**
 54   * 页面相关事件处理函数--监听用户下拉动作
 55   */
 56  onPullDownRefresh: function () {
 57    this.data.page = 1
 58    this.getInfo('刷新中……')
 59  },
 60 
 61  /**
 62   * 页面上拉触底事件的处理函数
 63   */
 64  onReachBottom: function () {
 65    if (this.data.hasMoreData) {
 66      this.getInfo('加载更多数据')
 67     
 68  } else {
 69      wx.showToast({
 70          title: '没有更多数据',
 71      })
 72  }
 73  },
 74 
 75  /**
 76   * 用户点击右上角分享
 77   */
 78  onShareAppMessage: function () {
 79 
 80  },
 81 
 82  // 获取分页列表
 83getInfo: function (message) {
 84  var that = this;
 85  wx.showNavigationBarLoading()              //在当前页面显示导航条加载动画
 86  wx.showLoading({                        //显示 loading 提示框
 87      title: message,
 88  })
 89  wx.request({
 90      url: 'https://ranjuan.cn/getdata.php',    //本地设置不校验合法域名
 91      data: { page: that.data.page, count: that.data.pageSize,token: wx.getStorageSync('token') },
 92      method: 'get',
 93      header: { 'content-type': 'application/x-www-form-urlencoded','Access_Token':wx.getStorageSync('token') },
 94      success: function (res) {
 95         // var contentlistTem = that.data.contentlist;
 96          var getdata = that.data.contentlist;
 97          if (res.data.data.length > 0) {
 98              wx.hideNavigationBarLoading()     //在当前页面隐藏导航条加载动画
 99              wx.hideLoading()               //隐藏 loading 提示框
100              if (that.data.page == 1) {
101                  getdata = []
102              }
103              var contentlist = res.data.data;
104              if (contentlist.length < that.data.pageSize) {
105                  that.setData({
106                      contentlist: getdata.concat(contentlist),
107                      hasMoreData: false
108                  })
109              } else {
110                  that.setData({
111                      contentlist: getdata.concat(contentlist),
112                      hasMoreData: true,
113                      page: that.data.page + 1
114                  })
115              }
116          }
117      },
118      fail: function (res) {
119          wx.hideNavigationBarLoading()
120          wx.hideLoading()
121          fail()
122      },
123      complete: function (res) {
124 
125      },
126  })
127},
128})

openapp.wxml

 1/* pages/openapp/openapp.wxml */
 2<view class="container">
 3 <block wx:for="{{contentlist}}">
 4 <!-- <text>{{item.images}}</text> -->
 5 <view class="main"  bindtap="onDetail" data-id='{{item.ID}}'>
 6 <view class="post_left">
 7<image  style="width:100%;height:100%" src="../../images/topp.jpg" ></image>
 8</view>
 9<view class="post_right">
10  <view class="post_title">{{item.post_title}}</view>  
11 <!-- <view class="post_content" bindtap="onDetail" data-id='{{item.ID}}'> {{item.post_content}}</view>-->
12  <view class="post_date"> {{item.post_date}}</view>
13</view>
14</view>
15 </block>
16</view>

openapp.wxss

 1/* pages/openapp/openapp.wxss */
 2.container{ 
 3  width: 100%;
 4  padding:10rpx;
 5 /* display: flex;
 6  flex-wrap: wrap;*/
 7}
 8 
 9.main{
10  margin:10rpx;
11  width:100%;
12  border-radius: 8rpx;
13  background:#FFFFFF;
14 /* border: 3rpx solid  #42A5F5; */
15  display: flex;
16  flex-wrap: wrap;
17}
18.post_left{
19  width:25%;
20}
21 
22.post_right{
23  width:75%;
24}
25.post_title{
26  width:100%;
27 margin-left: 10rpx;
28 height: 40px;
29  font-size:14px;
30  color:#000;
31}
32.post_date{
33  width:100%;
34  font-size:10px;
35  margin-left: 10rpx;
36}
37.post_content{
38  margin-left: 10rpx;
39  font-size:12px;
40 color: lightsteelblue;
41  width:100%;
42  height:40px;
43  overflow: hidden;
44}

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

 1<?php
 2file_put_contents("2.txt","\n\r".$t."  |  ".json_encode($_REQUEST),FILE_APPEND);
 3include('../conn.php');//链接wordpress数据库
 4 
 5if(isset($_REQUEST['token']) && $_REQUEST['token'] !=''){//这里仅演示以get方式获取客户端token
 6 
 7session_id($_REQUEST['token']);
 8session_start();
 9 
10if(empty($_SESSION)){
11   echo '尚未登录'; 
12}else{
13    //echo 'openid='.$_SESSION['openid'];
14  /*  for($i=0;$i<12;$i++){
15        
16        $r['data'][$i]['id']=$i;
17        $r['data'][$i]['msg']=$i+$i*$i.'信息详情';
18        ++$i;
19        }*/
20        $page=$_REQUEST['page'];//页面
21        $count=$_REQUEST['count'];//每页个数
22        $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);
23        //var_dump($db->get_res());
24        $r['data']=$db->get_res();
25        //因为这里将查询结果赋予了数组$r['data'],
26        //所以小程序客户端取的时候多了一级contentlist = res.data.data;
27        //如果这里是$r=$db->get_res();那么小程序取值可以写成contentlist = res.data；
28    
29    echo json_encode($r);
30}
31}

采用模拟数据的getdata.php

 1<?php
 2$page=$_REQUEST['page'];//页面
 3$count=$_REQUEST['count'];//每页个数
 4 
 5for($i=0;$i<$count;$i++){
 6$r['data'][$i]['ID'] = ($page-1)*$count;
 7$r['data'][$i]['post_date'] = '2020-01-02';
 8$r['data'][$i]['post_content'] = 'wenben文本wenben文本wenben文本wenben文本wenben文本wenben文本wenben';
 9$r['data'][$i]['post_title'] = '染卷第'.(($page-1)*$count+$i).'篇文章标题';
10}
11echo json_encode($r);
12 
13die;

染卷不卷'blog

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

染卷

发表评论取消回复

染卷

发表评论 取消回复

发表评论取消回复