微信小程序如何實(shí)現(xiàn)類似今日頭條新聞詳情頁(yè)圖文顯示功能

眾所周知岂傲,微信小程序編譯好后是不能解析HTML標(biāo)簽的,那么問(wèn)題來(lái)了:后臺(tái)中通過(guò)所見(jiàn)即所得編輯器編輯的圖文并茂的文章如何在微信小程序端也能顯示呢?這就是本文要討論的主題江掩。

本文內(nèi)容如下

一、如何解析HTML

二乘瓤、小程序端如何顯示

三环形、總結(jié)

本文所講內(nèi)容是基于PHP和微信小程序端的一起配合的情況下完成的⊙每總體思路是通過(guò)PHP把標(biāo)簽的類型抬吟、樣式和內(nèi)容匹配出來(lái),然后通過(guò)小程序端根據(jù)標(biāo)簽的類型生成小程序自帶的標(biāo)簽统抬。比如P標(biāo)簽轉(zhuǎn)為view標(biāo)簽火本,label標(biāo)簽轉(zhuǎn)為text標(biāo)簽,img標(biāo)簽轉(zhuǎn)為image標(biāo)簽蓄喇。然后附上內(nèi)容和樣式即可发侵。

一、如何解析HTML

通過(guò)所見(jiàn)即所得編輯器編輯的文章是長(zhǎng)這樣的(點(diǎn)擊編輯器的“查看源碼 ”即可查看):

可以看到有p標(biāo)簽妆偏,圖片標(biāo)簽刃鳄,換行標(biāo)簽等,這些標(biāo)簽直接傳給小程序端是原樣顯示钱骂,無(wú)法解析叔锐。這個(gè)時(shí)候需要正則表達(dá)式的幫助了,常用的正則匹配如下:


其它標(biāo)簽類似见秽,不一一舉例愉烙。

PHP的正則匹配函數(shù)使用如下:

上圖中$view[1]為文章內(nèi)容的HTML或者是某段p標(biāo)簽里面的HTML。

其它正則使用類似解取,返回給前端的數(shù)據(jù)格式如下:

二步责、小程序端顯示

小程序邏輯很簡(jiǎn)單,根據(jù)接口傳的類型顯示不同的標(biāo)簽即可禀苦,代碼如下:

三蔓肯、總結(jié)

1、上面給的小程序端樣例沒(méi)有把樣式給顯示上去振乏,PHP端已經(jīng)匹配出樣式的內(nèi)容蔗包,要顯示也很簡(jiǎn)單,只需要在標(biāo)簽上加個(gè)style屬性慧邮,然后設(shè)置后臺(tái)匹配的樣式內(nèi)容即可调限;

2舟陆、如果有人js很牛逼的,也可以通過(guò)js去解析HTML標(biāo)簽耻矮,GitHub上有人開(kāi)源了類似的框架秦躯,有興趣可以去百度下。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末淘钟,一起剝皮案震驚了整個(gè)濱河市宦赠,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌米母,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,214評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件毡琉,死亡現(xiàn)場(chǎng)離奇詭異铁瞒,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)桅滋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門慧耍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人丐谋,你說(shuō)我怎么就攤上這事芍碧。” “怎么了号俐?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,543評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵泌豆,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我吏饿,道長(zhǎng)踪危,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,221評(píng)論 1 279
  • 正文 為了忘掉前任猪落,我火速辦了婚禮贞远,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘笨忌。我一直安慰自己蓝仲,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布官疲。 她就那樣靜靜地躺著袱结,像睡著了一般。 火紅的嫁衣襯著肌膚如雪袁余。 梳的紋絲不亂的頭發(fā)上擎勘,一...
    開(kāi)封第一講書(shū)人閱讀 49,007評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音颖榜,去河邊找鬼棚饵。 笑死煤裙,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的噪漾。 我是一名探鬼主播硼砰,決...
    沈念sama閱讀 38,313評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼欣硼!你這毒婦竟也來(lái)了题翰?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 36,956評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤诈胜,失蹤者是張志新(化名)和其女友劉穎豹障,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體焦匈,經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡血公,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了缓熟。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片累魔。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖够滑,靈堂內(nèi)的尸體忽然破棺而出垦写,到底是詐尸還是另有隱情,我是刑警寧澤彰触,帶...
    沈念sama閱讀 33,685評(píng)論 4 322
  • 正文 年R本政府宣布梯投,位于F島的核電站,受9級(jí)特大地震影響渴析,放射性物質(zhì)發(fā)生泄漏晚伙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3 307
  • 文/蒙蒙 一俭茧、第九天 我趴在偏房一處隱蔽的房頂上張望咆疗。 院中可真熱鬧,春花似錦母债、人聲如沸午磁。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,240評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)迅皇。三九已至,卻和暖如春衙熔,著一層夾襖步出監(jiān)牢的瞬間登颓,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,464評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工红氯, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留框咙,地道東北人咕痛。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2 352
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像喇嘱,于是被迫代替她去往敵國(guó)和親茉贡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理者铜,服務(wù)發(fā)現(xiàn)腔丧,斷路器,智...
    卡卡羅2017閱讀 134,599評(píng)論 18 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,502評(píng)論 25 707
  • 經(jīng)常會(huì)想作烟,如果有這么一天愉粤,我什么都寫(xiě)不出來(lái)了,也許還有很多感觸俗壹,很多心酸科汗,很多無(wú)奈,很多迫不得已绷雏,但是,我寫(xiě)不出...
    吳啟遠(yuǎn)閱讀 321評(píng)論 1 2
  • 你們還記得那個(gè)身穿潑墨大寫(xiě)意袍子的劍神……嗎怖亭?lilys: 三觀碎了涎显,小時(shí)候看的無(wú)花傳奇里,妙僧是歐陽(yáng)震華演的劍無(wú)...
    lilys閱讀 515評(píng)論 0 1
  • 市政項(xiàng)目勘察基礎(chǔ) 美容師們兴猩,上午好期吓,小編4天來(lái)在深圳、珠海倾芝、成都讨勤、合肥之間飛了個(gè)圈回來(lái),導(dǎo)致沒(méi)有繼續(xù)分享【清潔管理...
    清潔環(huán)衛(wèi)管理師閱讀 278評(píng)論 0 0