美文网首页
小程序 将 html 转成 wxml ,并显示

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

作者: 郭的妻 | 来源:发表于2019-11-08 17: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这个有一个问题就是,文件有点大,可能导致小程序页面闪退问题

    相关文章

      网友评论

          本文标题:小程序 将 html 转成 wxml ,并显示

          本文链接:https://www.haomeiwen.com/subject/vqgibctx.html