中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序渲染html內容的方法

發布時間:2020-12-21 11:25:58 來源:億速云 閱讀:167 作者:小新 欄目:移動開發

這篇文章主要介紹了微信小程序渲染html內容的方法,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

最近又做了一個新的小程序關于物流訂單查詢

遇到了一個小問題:數據中返回電話號碼的字符串識別出來并且高亮和可以綁定事件。比如數據中包含您的派送員黃xx正在派件,電話:137xxxx41460已經在派送。其中就要識別出137xxxx41460并且綁定點擊事件可以點擊撥打電話號碼。

對于這個功能搜集了不少資料其中包含了3個解決方案但是各有優缺點因此記錄下來

wxParse
小程序剛上線那會兒,是無法直接渲染HTML內容的,于是就誕生了一個叫做「 wxParse 」的庫。它的原理就是把HTML代碼解析成樹結構的數據,再通過小程序的模板把該數據渲染出來。

rich-text
后來,小程序增加了「rich-text」組件用于展示富文本內容。然而,這個組件存在一個極大的限制: 組件內屏蔽了所有節點的事件 。也就是說,在該組件內,連「預覽圖片」這樣一個簡單的功能都無法實現。

web-view
再后來,小程序允許通過「web-view」組件嵌套網頁,通過網頁展示HTML內容是兼容性最好的解決方案了。然而,因為要多加載一個頁面,性能是較差的,個人小程序也是沒法用webview。

因為我這個只是需求只是需要識別出來電話號碼并且不是那種復雜的字符模板。因此參考wxparse 的原理自己寫了一個關于電話號碼識別的功能。

效果如下:

微信小程序渲染html內容的方法

技術重點就是

1、在數據返回后對于字符串用正則(/(1+)|(d{9,14})|(d{3,4}-d{6,10})/g)識別出電話號碼存在一個新的字段并且表示為type:phone ,不是電話號碼的字符就放到另外一個字段并且表示為type:text.數據結構如圖所示

微信小程序渲染html內容的方法

2、新建一個關于字段讀取的模板

<template name="wepyhtml">
  <block wx:for="{{wxmlData}}" wx:key="">
    <template is="wxml" data="{{item}}"></template>
  </block>
</template>
<template name="wxml">
  <block wx:if="{{item.type == 'phone'}}" wx:key="">
    <text class="blue" bindtap="tapTel" data-phone="{{item.acceptStation}}">{{item.acceptStation}}</text>
  </block>
  <block wx:else>{{item.acceptStation}}</block>
</template>

其中,在模板里面綁定點擊事件方便后期做邏輯處理還可以綁定不同的參數方便獲取

3、在需要用到的地方引入模板

  <import src="/components/html.wxml" />   
  <template is="wepyhtml" data="{{wxmlData:item.nodes}}"></template>

那就滿足現在的功能呢需求了。不用復雜的插件也比直接引入原生組件來得方便。關鍵就是思路。。特此記錄

感謝你能夠認真閱讀完這篇文章,希望小編分享微信小程序渲染html內容的方法內容對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,遇到問題就找億速云,詳細的解決方法等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

辽宁省| 鲁甸县| 卓尼县| 阳泉市| 霍山县| 陵川县| 犍为县| 威远县| 历史| 河南省| 富川| 鄄城县| 博湖县| 乌拉特前旗| 新密市| 资中县| 类乌齐县| 泾源县| 内丘县| 东乌珠穆沁旗| 秭归县| 洪洞县| 缙云县| 兰溪市| 东台市| 石楼县| 定边县| 驻马店市| 保靖县| 文成县| 东光县| 贡觉县| 湘潭市| 陇西县| 浮梁县| 青龙| 分宜县| 石泉县| 木兰县| 墨玉县| 乌兰察布市|