如何將HTML轉為微信小程序的WXML

這篇文章主要介紹如何將HTML轉為微信小程序的WXML，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

將HTML轉為微信小程序的WXML案例

微信小程序開發雖說是比較偏向前端開發，但是它們的語法結構又不太一樣。例如，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}}"/>

最終效果如下所示

以上是“如何將HTML轉為微信小程序的WXML”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！