用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

:小程序富文本解析的「偽需求」,從wxParse到towxml的坑

巴黎彩票计划 www.hknsi.icu Rolan 2019-5-9 00:48

本文主要談談小程序的富文本解析和目前我的博客小程序用到的兩款開源組件wxParse和towxml富文本「偽需求」在進入正題之前想先聊聊「偽需求」這三個字。其實有很多場景會用到富文本框「通常后臺維護一長串html文本, ...

本文主要談談巴黎彩票计划的富文本解析和目前我的博客小程序用到的兩款開源組件 wxParse 和 towxml

富文本「偽需求」

在進入正題之前想先聊聊「偽需求」這三個字。

其實有很多場景會用到富文本框「通常后臺維護一長串html文本,前臺進行渲染展示」。但由于小程序的一些特殊性,無法直接渲染html,因此類似 wxParse 的開源組件誕生了「原理無非是窮舉標簽進行替換,差異在于覆蓋是否全面和是否更加高效」

在小程序剛出來的時候,富文本的問題也一直被吐槽,直到 web-view 的出現「承載網頁的容器?;嶙遠搪魴〕絳蛞趁妗?。小程序終于可以「直接」渲染網頁了,很多公司也利用這一點,很多頁面都直接采用H5的方式開發,嵌套進小程序中。

然而比較悲催的是 web-view 有個限制:個人類型與海外類型的小程序暫不支持使用。

所以對于個人開發的小程序來說,依舊需要依賴類似 wxParse 的開源組件。

wxParse還是towxml

在基于 ghost 的博客小程序中,我用的是 wxParse ,截止到發文該項目已有6071個star,很多教程也是基于 wxParse 的,但作者似乎已經棄坑了,兩年多沒有再進行迭代了,所以該組件也存在很多問題。

自己的項目也是在 wxParse 基礎之上進行了很多改動。

所以在開發新版的小程序時候果斷找個替換它,可惜的是目前這類的開源組件不多「比較小眾吧,只有個人開發者才會用吧」,比較之后發現還是 towxml 最佳。首先解析比較全面,樣式也比較完美,對于公眾號花哨的排版基本支持「只能是基本,后面會說到坑」。另外一點支持服務端解析「云函數可以利用起來」。

唯一遺憾的是,體積還是比較大的,后面功能完善后打算看下它的源碼進行相應的瘦身。

如何使用towxml

使用 towxml 還是比較簡單的,網上有很多教程,這里簡單說下基于服務端解析、小程序端直接渲染的方式:

首先下載源碼,將 towxml 整個文件夾放到小程序的根目錄下。

然后在 app.js 中引入并初始化:

const Towxml = require('/towxml/main'); 
App({           
  onLaunch: function () {
    ...
  },
  towxml:new Towxml(),
  checkUserInfo: function(cb) {
    ...
  },
  globalData: {
    openid: "",
    userInfo: null
  }
})

接著在需要使用的地方引入模板,比如我的 detail.wxml 下:

<import src="/towxml/entry.wxml" />
//post.content是解析后的文本
<template is="entry" data="{{...post.content}}" />

在云函數端,首先安裝 towxml :

npm install towxml

然后申明后直接進項解析,代碼如下:

/**
 * 獲取文章明細
 * @param {} id 
 */
async function getPostsDetail(event) {
  let post = await db.collection("mini_posts").doc(event.id).get()
  if (post.code) {
    return "";
  }
  if (!post.data) {
    return "";
  }

  let content = await convertPosts(post.data.content, "html");
  //直接賦值towxml解析后的文本
  post.data.content = content;
  console.info(result)
  return post.data
}

/**
 * 轉換下程序文章
 * @param {} isUpdate 
 */
async function convertPosts(content, type) {
  let res
  if (type === 'markdown') {
    res = await towxml.toJson(content || '', 'markdown');
  } else {
    res = await towxml.toJson(content || '', 'html');
  }
  return res;

}

到這里,文章應該可以正常渲染了,使用起來相對還是比較簡單的。

towxml的坑

準確來說是公眾號文章的html一些特殊性和復雜性,導致在解析渲染的時候樣式上存在一些問題。

首先遇到的問題,圖片展示不了,如下截圖:

在查看解析后的文本json后發現, img 的 src 屬性是空的。

再回過頭看公眾號文章原始的 html 的時候發現,原始的 img 標簽下的屬性都是 data-src 開始的,難怪無法解析。

<img class=""
data-ratio="2.1638888888888888" data-src="https://mmbiz.qpic.cn/mmbiz_jpg/ibT18LpyNmXqYXfbcbQ7N4kIeJYWSEzDHMDwmbNMUBvaRP7U2zwib9ladYZ2v5mZ1rLRFP2NnCtEuPzs3ibrsKqGQ/640?wx_fmt=jpeg"
data-type="jpeg" data-w="1080"title="image">

水平不夠無法改 towxml 的源碼,只能在同步文章的時候做下手腳,將 data-src 替換成 src

//替換圖片data-url
content=content.replace(/data-src/g,"src")

然后發現公眾號自帶的代碼片段樣式解析之后也存在問題,截圖如下,在代碼上方多了很多點。

有了圖片不展示的經驗,就比較容易定位問題了,應該是towxml在解析代碼序號的時候生成 ul 和 li 標簽了,但在樣式上沒有做好處理。

<ul class="code-snippet__line-index code-snippet__js"><li></li></ul>

于是在同步文章的時候也進行一些替換:

//移除公眾號代碼片段序號
let content=content.replace(<ul class="code-snippet__line-index code-snippet__js".*?<\/ul>/g,'')

目前解析過程中還有兩個問題不太友好,后期需要嘗試解決:

第一個是部分圖片依舊不會展示,原因已經定位到, img 標簽之外嵌套了以下 span 標簽之后,圖片就不會展示「使用新媒體管家進行排版時會出現」

<span style="color:rgba(0, 0, 0, 0);">
<span style="line-height: inherit;margin-right: auto;margin-left: auto;border-radius: 4px;">

另一個是部分解析出來的代碼片段沒有換行「使用 Md2All 進行樣式轉換的文章」

總結

但愿小程序后期官方出個比較全面的富文本組件吧,這樣可以少繞很多彎路去實現簡單的功能。

分享至 : QQ空間
收藏
原作者: 玄冰 來自: Bug生活2048
海南七星彩7000組直码 上海时时官方网 玩龙虎的个人经验 上海时时开奖时间 网上电子游戏输钱 万人龙虎计划软件 时时彩最新开奖结果96 11选五5开奖结果大连 北京时时每天开多少 pk106码倍投方法算法 内蒙古时时奖金对 二人麻将免费下载 微信夺宝改单号器 北京pk10计划免费 小鱼儿36码论坛 海南七星彩计划软件