頂部導航開始 -->

微信小程序圖文混排不支持的解決方法

自學php博客

微信小程序不支持動態生成頁面,所以當我們將數據庫的文章內容傳到小程序頁面的時候,傳遞的內容會原樣顯示,不進行解析,而是把html代碼直接顯示出來。本文講述如何解決微信小程序的圖文混排問題。

解決的思路是:

在服務端寫接口的時候,從數據庫中讀取文章內容,將獲取到的文章內容用正則表達式進行拆分,拆分成文章文字數組和圖片數組。

然后將這兩個數組返回給小程序。

小程序通過接口獲取到文章數組和圖片數組之后,分別進行遍歷。

將內容數組遍歷,并渲染到view標簽中,同時根據數組的k值獲取到圖片對應的圖片的路徑,并將此地址渲染到image標簽中。


服務端代碼:

將ueditor上傳的content內容中的圖片信息提取出來:

public 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];

}

此方法返回的是content中的所有圖片的url組成的數組。

將ueditor上傳的content內容中的文字信息提取出來:

public 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)[^><]*>/i','',$content);

   $res = str_replace('&nbsp;', "\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);

   $arr = explode('#', $res);

   foreach( $arr as $k=>$v){   

     if( !$v )   

       unset( $arr[$k] );   

     }  

return $arr;

}

此方法返回的是content中的文字切割成的數組

用上面的兩個方法處理之后,文章內容已經被拆分成了兩個部分,一個是圖片數組,一個是文字數組。

然后是小程序端的處理:

<view class="and_image">

<block wx:for="{{infoData.article_content}}">

<text>{{item}}</text>

<image src="{{infoData['img_arr'][index]}}" mode="widthFix"></image>

</block>

</view>



自學php博客
請先登陸后發表評論
  • 最新評論
  • 總共0條評論
  • ? 2014-2016 zixuephp.cn 版權所有
  • ICP證:皖ICP備16012107號
  • 聯系郵箱:[email protected]
  • 交流請加微信:weibobf2899 或掃下方二維碼
双大床红利扑克1手APP