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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了廬陽免費(fèi)建站歡迎大家使用！

將HTML轉(zhuǎn)為微信小程序的WXML案例

微信小程序開發(fā)雖說是比較偏向前端開發(fā)，但是它們的語法結(jié)構(gòu)又不太一樣。例如，wxml跟html就有本質(zhì)的不同，就拿a標(biāo)簽來說吧，wxml是不支持a標(biāo)簽的，還有就是wxml不兼容html，下面小編就針對這個問題來分析一下怎么才能將html轉(zhuǎn)換成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、數(shù)據(jù)綁定

var article = '<div>我是HTML代碼</div>';/** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName綁定的數(shù)據(jù)名(必填) * 2.type可以為html或者md(必填) * 3.data為傳入的具體數(shù)據(jù)(必填) * 4.target為Page對象,一般為this(必填) * 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選) */var that = this; WxParse.wxParse('article', 'html', article, that,5);

4、模版引用

//這里data中article為bindName<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

下面我按照以上步驟，分析一下我的個人博客做的微信小程序案例，這里以下載板塊為例

我的下載板塊是index，點(diǎn)擊進(jìn)入的詳情板塊是entry。正是因?yàn)槲尹c(diǎn)擊進(jìn)入詳情的時候，我掉的數(shù)據(jù)是我html格式，詳情里面會帶一些p,div,a這樣的標(biāo)簽，這不是我們需要的效果，所有我需要轉(zhuǎn)換成小程序所對應(yīng)的wxml格式。

一、我把下載好了的wxParse文件夾放到我的項(xiàng)目中，這里只需要放wxParse目錄就行了，看圖片會發(fā)現(xiàn)是跟pages同級的目錄。

二、我在我需要展現(xiàn)的頁面引入：var WxParse = require('../../wxParse/wxParse.js');因?yàn)槲也恍枰獦邮剿校值膚xParse.wxss我就注釋了。

三、這一步是最關(guān)鍵也是最重要的一步了，數(shù)據(jù)綁定。因?yàn)槲业臄?shù)據(jù)全部是從數(shù)據(jù)庫取的真實(shí)數(shù)據(jù)，這里就涉及到從列表點(diǎn)擊到詳情事件加載數(shù)據(jù)，感興趣的可以看下《微信小程序如何加載數(shù)據(jù)庫真實(shí)數(shù)據(jù)》。所有我的數(shù)據(jù)綁定其實(shí)就是content內(nèi)容。

 var article = res.data.content;//article是取到的數(shù)據(jù)
 var that = this;
 WxParse.wxParse('article', 'html', article, that, 5);

四、在我需要的模板中引用剛剛綁定的數(shù)據(jù)，也就是entry.wxml中

 <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

最終效果如下所示

以上是“如何將HTML轉(zhuǎn)為微信小程序的WXML”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：如何將HTML轉(zhuǎn)為微信小程序的WXML
標(biāo)題URL：http://www.chinadenli.net/article4/ighooe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站營銷、網(wǎng)站改版、企業(yè)建站、App開發(fā)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)