wxparse使用(富文本插件)

优点:目前已知唯一可以转化HTML到小程序识别的插件

缺点:转换一个HTML标签可能需要大量的微信小程序标签还有样式

配置:第一步,下载

https://github.com/icindy/wxParse

第二步,放入项目中,我选择pages目录下

第三步,配置

wxml加入:

<import src="../wxParse/wxParse.wxml"/>

在需要的地方使用:

<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

其中article是后台html值的变量名

 

js加入:

var WxParse = require('../wxParse/wxParse.js');

这里貌似使用es6的import会有错误

我在onload事件写下了:

WxParse.wxParse('article', 'html', this.data.article, this, 5);

注意的是第三个和第四个参数,前几个可以固定不变但是第一个要和数据变量名一致,第三个是后台数据,第四个是指的小程序标签,可以注册多个wxparse

wxss加入:

@import '../wxParse/wxParse.wxss';

到此完成,但是要注意的是a标签的转化,需要加入一个方法,示例如下:

wxParseTagATap: function (e) {

    var href = e.currentTarget.dataset.src;

    console.log(href);

    wx.redirectTo({

        url: href

    });

}

这个在点击a标签的时候控制台其实是输出了警告信息的

此外url也只能是小程序内部地址,这是个限制,他不能跳到外部,这里我想后台编辑的时候可以用二维码替代,小程序跳转外部地址可以使用web-view标签,详情参考官方文档

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值