小程序 将 html 转成 wxml ,并显示

2019-11-08  本文已影响0人  郭的妻

1.首先我们要知道,我们要使用 wxParse.js 才能将html转为 wxml
2.需要下载wxParse文件https://github.com/BelieveMIN/wxparse 请到这里进行下载
3.下载完成后(请看下列图片的所放的文件路径)

微信截图_20191108165636.png

4.将文件放到项目后,将你需要的转化的xxx.wxml / .js 引入想对应的文件

//xxx.js
var WxParse = require('../../wxParse/wxParse.js');
//生命周期函数--监听页面加载
onLoad: function (options) {
//初始化emoji设置
    WxParse.emojisInit('[]', "/wxParse/emojis/", {
        "00": "00.gif",
        "01": "01.gif",
        "02": "02.gif",
        "03": "03.gif",
        "04": "04.gif",
        "05": "05.gif",
        "06": "06.gif",
        "07": "07.gif",
        "08": "08.gif",
        "09": "09.gif",
        "09": "09.gif",
        "10": "10.gif",
        "11": "11.gif",
        "12": "12.gif",
        "13": "13.gif",
        "14": "14.gif",
        "15": "15.gif",
        "16": "16.gif",
        "17": "17.gif",
        "18": "18.gif",
        "19": "19.gif",
    });
    var content="<div>这是需要转化的内容</div>";
    var view = WxParse.wxParse('article', 'html', content, that, 5);
}

//xxx.wxml
<import src="../../wxParse/wxParse.wxml"/> 
<view class="wxParse" wx:if="{{content==null}}">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

5.app.wxss 需要引入 wxParse.wxss

    //app.wxss
    @import "/wxParse/wxParse.wxss";

6.这样就完成了
7这个有一个问题就是,文件有点大,可能导致小程序页面闪退问题

上一篇下一篇

猜你喜欢

热点阅读