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

2024-11-29 18:50:21

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

步骤

把 wxParser 目录放到小程序项目的根目录下
在需要富文本解析的 WXML 内引入 wxParser/index.wxml
在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容
在小程序项目根目录的 app.wxss 内引入 wxParser 的默认样式库

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 style="color: #f00;">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'

注意

JS 中的 richText 可以自定义，但是必须要与 WXML 中的 richText 对应
推荐把 template 放到 <view class="wxParser"></view> 内部，这样可以受 wxParser 控制并具有 wxParser 的一些默认样式
不建议直接修改 wxParser 的默认样式（因为内容库样式会有定期更新），应该新增一个样式补丁文件用来自定义样式

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

微信小程序 for 循环详解

1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu
微信小程序 input输入框控件详解及实例（多种示例）

微信小程序 input输入框控件今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下:  <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添
微信小程序实战小程序实例

微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用跳转传值使用等等等.... app.json全局配置文件 { "pages":[ "page
微信小程序传值取值的几种方法总结

微信小程序传值取值小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%. 列表index下标取值页面传值 form表单取值 1. 列表index下标取值实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1 生成值 <image src="../../../images/icon_delete.png" /><text>删除&l
微信小程序参数传递详解

微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
微信小程序开发（二）图片上传+服务端接收详解

这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口. 看一下页面效果图一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了首先是小程序的wxml代码 <view class="xd-container">
微信小程序富文本渲染引擎的详解

微信小程序富文本渲染引擎的详解步骤把 wxParser 目录放到小程序项目的根目录下在需要富文本解析的 WXML 内引入 wxParser/index.wxml 在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容在小程序项目根目录的 app.wxss 内引入 wxParser 的默认样式库 wxParser.parse(options) 方法的 options 参数说明参数名类型必填描述 bind String 是要绑定的数据名称
微信小程序富文本转文本实例详解

微信小程序-富文本转文本最近小程序这么火,我也来搞搞.发现了一个恶心的问题.小程序没有组件能支持富文本内容的,改接口又不太合适,于是有了这问,没技术含量纯粹记录首先我们看眼没有被格式的富文本显示: *.wxml内代码.content是富文本内容 <view> <text>{{content}}</text> </view> 显示结果: 由以上图片看到,小程序无法解析html文件我们需要处理html富文本内容,让其显示好看点下面直接上代码了,主要功能就
微信小程序全局配置以及页面配置详解

目录全局配置全局配置文件及常用配置项全局配置—window 小程序窗口组成部分了解window节点常用的配置项设置导航栏的标题设置导航栏的背景色设置导航栏的标题颜色全局开启下拉刷新功能设置下拉刷新时窗口的背景色设置下拉刷新时loading的样式设置上拉触底的距离全局配置—tabbar 什么是tabbar tabbar的6个组成部分 tabbar节点的配置项每个tab项的配置选项页面配置页面配置文件的作用页面配置和全局配置的关系页面配置中常用的配置项小结全局配
微信小程序之数据缓存的实例详解

微信小程序之数据缓存的实例详解前言: 在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小.于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说.在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难.下面我们来一起实现一下. 效果图展示: 我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面.具体代码如下: index页面: <span sty
微信小程序开发图片拖拽实例详解

微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi
微信小程序的日期选择器的实例详解

微信小程序的日期选择器的实例详解前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码:  const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,
微信小程序上传头像的实例详解

微信小程序上传头像的实例详解最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src
微信小程序 sha1 实现密码加密实例详解

微信小程序 sha1 实现密码加密实例详解在utils中的util.js 文件中增加函数实现字符串转换为16进制加密后的字符串 function encodeUTF8(s) { var i, r = [], c, x; for (i = 0; i < s.length; i++) if ((c = s.charCodeAt(i)) < 0x80) r.push(c); else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x
微信小程序获取二维码实例详解

微信小程序获取二维码实例详解理论: 接口A: 适用于需要的码数量较少的业务场景接口地址:(永久有效,数量有限,进入path对应的页面) https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN path String 不能为空,最大长度 128 字节 width Int 430(默认) 二维码的宽度 auto_color .. line_color .. 接口B:适用于需要的码数量极多,或仅临时使用的业务场景(永
微信小程序之GET请求的实例详解

微信小程序之GET请求的实例详解学习前端的人应该都会使用ajax的get请求数据,那么在微信小程序里怎样实现get请求呢?下面我就给大家演示一下简单的get请求. 先上代码: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', onLoad: function () { var that = this wx.request({ url: 'http://apis.baidu.com/heweat

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

相关推荐

随机推荐