微信小程序開發雖說是比較偏向前端開發，但是它們的語法結構又不太一樣。例如，wxml跟html就有本質的不同，就拿a標籤來說吧，wxml是不支持a標籤的，還有就是wxml不兼容html，下面小編就針對這個問題來分析一下怎麼才能將html轉換成wxml。具體步驟如下：
1、到https://github.com/icindy/wxParse下載
2.1 在你需要使用的xxx.js文件中引入WxParse模塊
var WxParse = require('../../wxParse/wxParse.js');2.2 在使用的Wxss中引入WxParse.css,可以在app.wxss，注意是全局的app.wxss
@import "/wxParse/wxParse.wxss";
3、數據綁定
var article = '<div>我是HTML代碼</div>';/** * 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('article', 'html', article, that,5);4、模版引用
//這裏data中article爲bindName<template is="wxParse" data="{{wxParseData:article.nodes}}"/>下面我按照以上步驟，分析一下我的個人博客做的微信小程序案例，這裏以下載板塊爲例
我的下載板塊是index，點擊進入的詳情板塊是entry。正是因爲我點擊進入詳情的時候，我掉的數據是我html格式，詳情裏面會帶一些p,div,a這樣的標籤，這不是我們需要的效果，所有我需要轉換成小程序所對應的wxml格式。
一、我把下載好了的wxParse文件夾放到我的項目中，這裏只需要放wxParse目錄就行了，看圖片會發現是跟pages同級的目錄。
二、我在我需要展現的頁面引入：var WxParse = require('../../wxParse/wxParse.js');因爲我不需要樣式所有，全局的wxParse.wxss我就註釋了。
三、這一步是最關鍵也是最重要的一步了，數據綁定。因爲我的數據全部是從數據庫取的真實數據，這裏就涉及到從列表點擊到詳情事件加載數據，感興趣的可以看下《微信小程序如何加載數據庫真實數據》。所有我的數據綁定其實就是content內容。
var article = res.data.content;//article是取到的數據
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);
四、在我需要的模板中引用剛剛綁定的數據，也就是entry.wxml中
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
最終效果如下所示
