微擎小程序前端显示html富文本内容插件wxParse

用法还是比较简单

第一步,下载插件,插件的下载地址是:

https://github.com/icindy/wxParse

第二步,降插件放到小程序前端根目录,如图

微信图片_20200117212110.png

第三步,微擎后台传递富文本内容,代码如下,需要注意的是内容需要用htmlspecialchars_decode函数

public function doPageSet(){

    global $_GPC, $_W;

        $set=pdo_get("ai_ck_set",array('uniacid'=>$_W['uniacid']));

        $set["wsjc"]=htmlspecialchars_decode($set["wsjc"]);

        $art= $set["wsjc"];

        $errno = 0;

     $message = '返回消息';

     return $this->result($errno, $message, array('art'=>$art));


   }

第四步,小程序前端js映入wxParse.js 同时复制内容

var tt = require("../../../wxParse/wxParse.js");这是引入,记住这里容易路径出问题,必须放在js文件的顶部


微信图片_20200117212614.png

在onload中赋值内容

onLoad (n) {
    var that = this;
    app.util.request({
        'url': 'entry/wxapp/set',
        'cachetime': '30',
        data: {
            m: "ai_ck",
        },
        success(res) {
            console.log(res);
            tt.wxParse("article1", "html", res.data.data.art, that)
        }
    })

}

第五步,xml中引入模板,并渲染数据

<view class="c-minheight wx-view_zHFa0d" >

<import src="../../../wxParse/wxParse.wxml">import>
<view class="c-minheight ">
    <template is="wxParse" data="{{wxParseData:article1.nodes}}">template>
view>
view>


CopyRight © 2017 www.wenoew.cn
赣ICP备17014667号-3