將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 = &#39;<div>我是HTML代码</div>&#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、模版引用

//这里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}}"/>

最終效果如下所示

更多微信小程式開發教程，請追蹤PHP中文網。

以上是將HTML轉為微信小程式的WXML案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！