微信小程序富文本渲染引擎的详解

发布时间:2020-09-24 23:10:47 作者:Rolan
来源:脚本之家 阅读:246

微信小程序富文本渲染引擎的详解

步骤

wxParser.parse(options) 方法的 options 参数说明

参数名 类型 必填 描述
bind String 要绑定的数据名称
html String HTML 内容
target Object 绑定数据的模块对象
enablePreviewImage Boolean 是否启用富文本内的图片预览功能,默认是
tapLink Function 点击超链接时的回调函数

示例

WXML:在需要用到富文本解析的文件夹下的 WXML 中引入 wxParser/index.wxml

// 将 WXML 引入需要富文本解析的文件下
<import src="../../wxParser/index.wxml"/>
<view class="wxParser">
 <template is="wxParser" data="{{wxParserData:richText.nodes}}"/>
</view>

JS:在需要用到富文本解析的文件夹下的 JS 中引入 wxParser 渲染引擎

// 在
const wxParser = require('../../wxParser/index');

Page({
 data: {},
 onLoad: function () {
  let that = this;
  let html = `<div >hello, wxParser!</div>`;

  wxParser.parse({
   bind: 'richText',
   html: html,
   target: that,
   enablePreviewImage: false, // 禁用图片预览功能
   tapLink: (url) => { // 点击超链接时的回调函数
    // url 就是 HTML 富文本中 a 标签的 href 属性值
    // 这里可以自定义点击事件逻辑,比如页面跳转
    wx.navigateTo({
     url
    });
   }
  });

 }
})

WXSS:在根目录的 app.wxss 内引入 wxParser 的默认样式库

@import '../wxParser/index.wxss'

注意

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

推荐阅读:
  1. 微信小程序中怎么解析富文本
  2. 微信小程序API—获取定位的详解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

微信小程序 富文本 渲染引擎

上一篇: Cocos2dx学习笔记8:cocos2dx坐标系

下一篇:CentOS下安装Memcached和PHP Memcached扩展

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》