【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何將HTML轉(zhuǎn)為微信小程序的WXML

這篇文章主要介紹如何將HTML轉(zhuǎn)為微信小程序的WXML，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！將HTML轉(zhuǎn)為微信小程序的WXML案例微信小程序開發(fā)雖說是比較偏向前端開發(fā)，但是它們的語法結(jié)構(gòu)又不太一樣。例如，wxml跟html就有本質(zhì)的不同，就拿a標(biāo)簽來說吧，wxml是不支持a標(biāo)簽的，還有就是wxml不兼容html，下面在下就針對這個(gè)問題來分析一下怎么才能將html轉(zhuǎn)換成wxml。具體步驟如下：1、到/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}}"/>下面我按照以上步驟，分析一下我的個(gè)人博客做的微信小程序案例，這里以下載板塊為例我的下載板塊是index，點(diǎn)擊進(jìn)入的詳情板塊是entry。正是因?yàn)槲尹c(diǎn)擊進(jìn)入詳情的時(shí)候，我掉的數(shù)據(jù)是我html格式，詳情里面會(huì)帶一些p,div,a這樣的標(biāo)簽，這不是我們需要的效果，所有我需要轉(zhuǎn)換成小程序所對應(yīng)的wxml格式。一、我把下載好了的wxParse文件夾放到我的項(xiàng)目中，這里只需要放wxParse目錄就行了，看圖片會(huì)發(fā)現(xiàn)是跟pages同級的目錄。二、我在我需要展現(xiàn)的頁面引入：varWxParse=require('../../wxParse/wxParse.js');因?yàn)槲也恍枰獦邮剿?，全局的wxParse.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.w