微信小程式解析H5檔案方法

摘要: 常有網友問怎麼讓微信小程式解析H5檔或類似封裝H5網頁到APP裡面？我一開始覺得這是不可能的，因為官方的解答是這樣的： 每一個小程式頁面是由同路徑下同名的四個不同後綴檔案的組成，如：index.js、index.wxm ...

Copy資料夾wxParse,與pages檔案目錄同級

常有網友問怎麼讓微信小程式解析H5檔或類似封裝H5網頁到APP裡面？我一開始覺得這是不可能的，因為官方的解答是這樣的：

每一個小程式頁面是由同路徑下同名的四個不同後綴檔案的組成，如：index.js、index.wxml、index.wxss、index.json。 .js後綴的文件是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件，.wxml後綴的文件是頁面結構文件。

上面的意思就已經很清楚了。翻譯過來就是：

• .js就是javascript

• #.wxss相當於css

.wxml相當於html

然而，wxml與wxss的語法是微信自己定義，不同於html與css語法。既然語法都不一樣，微信小程式自然無法載入H5頁面。微信只能載入在工程內已經註冊的page頁面，無法開啟外部鏈接，只能從伺服器抓取資料

前段時間,

由於微信的編寫文件不再是html格式,所以也無法解析html代碼,這個著實令人難過. 我在用網上的API接口獲取數據時, 遇到了一個大坑, 那就是API返回的數據竟然是含有標籤的字串, 讓我無從下手, 在嘗試過正則失敗後, 不斷在網上看有沒有可以解析的插件, 終於讓我找到了, 那就是

wxParse-微信小程序富文本解析組件

, 它支援Html及markdown轉wxml視覺化, 下面不多說, 程式碼貢獻上:

API回傳的資料:

注意:
• message 對應的value 值為

#[AppleScript] 

"<h2>材料 </h2><hr>  \n<p>雪梨一个、冰糖适量、牙签几根</p>   <h2>做法 </h2><hr>  \n<p>1、雪梨洗好，用刀切去尾部，用勺子挖出梨核，最好挖干净，不然影响口感。 </p> \n<p>2、放几颗冰糖进去，插几根牙签，隔水蒸30分钟左右就OK了。</p>",
      "name": "冰糖雪梨"

##這個小程式是無法解析的, 所以, 重點來了. wxParse-微信小程式富文本解析元件, 透過這個元件, 小程式就可以解析部分的html檔案還包括表情包哦, 下面是大禮包, 我將示範如何使用:

下載官方demo

######

//wxParse目录
- wxParse/
  -wxParse.js(必须存在)
  -html2json.js(必须存在)
  -htmlparser.js(必须存在)
  -showdown.js(必须存在)
  -wxDiscode.js(必须存在)
  -wxParse.wxml(必须存在)
  -wxParse.wxss(必须存在)
  -emojis(可选)

#########3.引入必要檔案#############3.1 在目標wxml檔案中新增以下程式碼##### #

<import src="../../wxParse/wxParse.wxml"/> 
<view class="wxParse">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

#########3.2 在wxss檔中加入以下程式碼(可以是全域wxss,也可以是目標的wxss檔)######

@import "/wxParse/wxParse.wxss";

########### #####3.3 資料綁定(在目標的js檔案中新增)######

//在 onLoad 函数里添加哦,
var article = &#39;<p>我是HTML代码</p>&#39;;
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse(&#39;article&#39;, &#39;html&#39;, article, that,5);

#########4.你已成功,不信你看模擬器###### ##########################

以上是微信小程式解析H5檔案方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！