中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2021-01-06 10:49:22 來源:億速云 閱讀:4575 作者:小新 欄目:移動開發

這篇文章主要介紹如何將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}}"/>

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

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

我的下載板塊是index,點擊進入的詳情板塊是entry。正是因為我點擊進入詳情的時候,我掉的數據是我html格式,詳情里面會帶一些p,div,a這樣的標簽,這不是我們需要的效果,所有我需要轉換成小程序所對應的wxml格式。

一、我把下載好了的wxParse文件夾放到我的項目中,這里只需要放wxParse目錄就行了,看圖片會發現是跟pages同級的目錄。

二、我在我需要展現的頁面引入:var WxParse = require('../../wxParse/wxParse.js');因為我不需要樣式所有,全局的wxParse.wxss我就注釋了。

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

三、這一步是最關鍵也是最重要的一步了,數據綁定。因為我的數據全部是從數據庫取的真實數據,這里就涉及到從列表點擊到詳情事件加載數據,感興趣的可以看下《微信小程序如何加載數據庫真實數據》。所有我的數據綁定其實就是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

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

龙胜| 绥宁县| 大厂| 亳州市| 闽清县| 平度市| 宁海县| 开封市| 青阳县| 通城县| 苍溪县| 团风县| 腾冲县| 利川市| 濮阳县| 保亭| 张家港市| 桓台县| 永修县| 马山县| 渭源县| 息烽县| 昭觉县| 阳泉市| 桓仁| 安岳县| 徐闻县| 南靖县| 彰化市| 当雄县| 万载县| 资讯| 锡林浩特市| 中西区| 沅江市| 寻甸| 昌乐县| 彰武县| 柳州市| 改则县| 句容市|