之前用微信小程序做了个获取wordpress文章列表的实验品，在做到点击小程序的文章列表时打开文章详情，遇到的问题是小程序不能直接解析富文本html里面的图片，显示出来的全是文字。 网上说小程序端用wxParse插件就能解析了图文（ 我没有试过 ）。另外同一个主体的认证订阅号或服务号好像可以直接内嵌H5页面，详情见： https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 。用的是网友提供的另一种思路，就是服务端返回文章详情的时候，以文字及图片数组方式返回，然后小程序端进行判断，遇到图片的就使用image标签进行解析。

服务器查询wordpress数据库的文章并返回前端小程序，getdetail.php

<?php
include('../conn.php');

$id=$_REQUEST['id'];//wordoress中文章的id
$db = new Db('select ID,post_date,post_content,post_title from wp_posts where post_status="publish" and post_type = "post" and ID='.$id);
//var_dump($db->get_res());
$r0=$db->get_res();
$r['post_content']=_setcontenttoarray($r0[0]['post_content']);
$r['post_title']=$r0[0]['post_title'];
echo json_encode($r);//返回结果

function _filtercontent($content){//提取图片数组 
  $content = preg_replace('/<\/?(html|head|meta|link|base|body|title|style|script|form|iframe|frame|frameset|p)[^><]*>/i','',$content);
   $pattern ='<img.*?src="(.*?)">';
   preg_match_all($pattern,$content,$matches);
   return $matches[1];
}

 function _setcontenttoarray($content){//提取文字数组 
   $content = preg_replace('/<\/?(img)[^><]*>/i','#+#',$content);
   $res = preg_replace('/<\/?(html|head|meta|link|base|body|title|style|script|form|iframe|frame|frameset|p|span|strong|sup|figure|article)[^><]*>/i','',$content);
 //  $res = str_replace(' ', "\r\t ", $res);
 //  $res = str_replace('<br/><br/>', "\r\n", $res);
 //  $res = str_replace('<br/>', "\r\n", $res);
 //  $res = str_replace('<br>', "\r\n", $res);
   $res=strip_tags($res);//过滤网页标签
   $res=str_replace("\n\n\n","\n",$res);
   $res=str_replace("\n\n","\n",$res);
   $res=str_replace("<","<",$res);
   $arr = explode('#+#', $res);
   foreach( $arr as $k=>$v){   
     if( !$v )   
       unset( $arr[$k] );   
     }  
    return $arr;
}

微信小程序的文章详情页面的js、wxml文件：

// pages/post-detail/post-detail.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
    wx.request({
      url: 'https://ranjuan.cn/test/getdetail.php',
      data: {
        id:options.id
      },
      success: function (res) {
       //将获取到的json数据，存在名字叫zhihu的这个数组中
        that.setData({
        getdetail: res.data,
        //res代表success函数的事件对，data是固定的，stories是是上面json数据中stories      
        })
        console.log(res)
      }
    })//发起网络请求
  }
})

<!--pages/post-detail/post-detail.wxml-->
<!--
<text>{{getdetail[0].post_title}}</text>
<view>
<text>
{{getdetail[0].post_content}}
</text>
</view>
-->
<view class="main">
<text>{{getdetail.post_title}}</text>

<view class="content">
<block wx:for="{{getdetail.post_content}}">
<text>{{item}}</text>
<view wx:if="{{getdetail['post_img'][index]}}">
<image src="{{getdetail['post_img'][index]}}" mode="widthFix"></image>
</view>
</block>
</view>
</view>

以下为文章标题列表页面部分源码，点击文章标题后出触发onDetial操作js，从该页面携带文章id参数传递到post-detail页面并完成后端请求获取文章详情并显示。

  /*
  传递id参数打开文章详情页面js
  */
  onDetail: function (event) {
    var postId = event.currentTarget.dataset.id;
     console.log("on post id is" + postId);
    wx.navigateTo({
      url: "../post-detail/post-detail?id="+postId
    })
/*
   wx.redirectTo({
      url: '../post-detail/post-detail',
    })  
*/
  },

<!--index.wxml-->
<view class="container">
<view style="algin:center;font-size:20px">文章列表</view>
 <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_date"> {{item.post_date}}</view>
</view>
</view>
 </block>
</view>

备忘：event.currentTarget.dataset.id 获取到的是当前触发操作时wxml文件中 data-id标签属性内容

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

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

本文链接：https://ranjuan.cn/weixin-get-pictures-text/