小程序中列表没有边框问题与列表第三方插件

浩星

已于 2022-10-09 12:05:50 修改

阅读量1.5k

点赞数 1

分类专栏：小程序文章标签：小程序前端

于 2022-10-08 19:30:49 首次发布

本文链接：https://blog.csdn.net/qq_41619796/article/details/127214433

版权

小程序专栏收录该内容

50 篇文章 10 订阅

订阅专栏

前言：

因为小程序官方提供的富文本插件在渲染列表的时候，会出现问题，列表的边框是无法展示的，在查询官方资料后，发现，到目前最新的版本位置，小程序的rich-text组件中还不支持列表的border, 在调研了第三方插件后，整理下资料。

1、官方支持的富文本插件与资料，官方入口

使用源码：

index.wxml
<rich-text nodes="{{content}}"></rich-text>

index.js
 let content = '123'
 this.setData({content:content});

实现效果：

2、官方的富文本插件不支持列表的边框

rich-text 目前支持的table的属性

其他人遇到的相关问题：

rich-text解析table，不显示边框 | 微信开放社区

rich-text 里面的table线条渲染不出来？ | 微信开放社区

3、调研的小程序的列表的第三方插件

这里调研了，目前常用的三个列表插件，分别是：Parser， wxParse，towxml，我这边最终使用的是towxml，

我的使用情况，是用pc的富文本插件，然后输入内容，拿到富文本信息，然后在小程序中渲染数据，所以拿到的富文本数据是一个字符

个人使用数据格式分享：

let clauseText = `<table>\n<tbody>\n<tr>\n<td width=\"63\">\n<p><strong>名称</strong></p>\n</td>\n<td width=\"106\">\n<p><strong>提供目的及场景描述</strong></p>\n</td>\n<td width=\"141\">\n<p><strong>提供的个人信息类型</strong></p>\n</td>\n<td width=\"141\">\n<p><strong>数据接收方的名称及联系方式</strong></p>\n</td>\n</tr>\n<tr>\n<td width=\"63\">\n<p>腾讯有数SDK</p>\n</td>\n<td width=\"106\">\n<p>网站数据统计分析</p>\n</td>\n<td width=\"141\">\n<p>服务日志信息、社交网络ID</p>\n</td>\n<td width=\"141\">\n<p>腾讯有数</p>\n<p>邮箱：youshu@tencent.com</p>\n</td>\n</tr>\n<tr>\n<td width=\"63\">\n<p>上海XX信息科技有限公司</p>\n</td>\n<td width=\"106\">\n<p>识别用户身份，包括用户预约直播、下单购买等作为区分不同用户的依据</p>\n</td>\n<td width=\"141\">\n<p>用户昵称、头像、手机号、openid、unionid、国家、省、市、区、语言；<br />订单数据：包括收件人姓名、手机号、收货地址、下单商品信息、支付金额</p>\n</td>\n<td width=\"141\">\n<p>上海XX信息科技有限公司<br />yonggang.luo@chatail.com</p>\n</td>\n</tr>\n</tbody>\n</table>`

Parser：

（官方测试是有样式边框的，但是他的样式是在css中写的代码，我这边数据的渲染出来，没有边框，无法实现官方效果）

使用步骤：

1、点击码云，克隆项目

Parser: 小程序的富文本插件1https://gitee.com/haoxingyi/parser

2、用微信开发者工具把该项目打开，用测试号就可以了，点击自定义测试，在这里可以输入你的后端数据字符串，然后让他解析看效果，注意: \n 这种格式识别不了

3、具体在项目中使用，把项目里面的 Parser文件夹当一个插件引入到我们的小程序项目中

在你那个页面想使用，就在他的 json中引入，注意地址改成你自己的地址

在你的 .wxml中使用你引入的插件

index.wxml
<parser html='{{content}}'>

index.js 
data:
content: '12344<h1>哈哈哈</h1>'

wxParse：

（官方提供的效果下图，我这边本地使用后，列表无法正常渲染）

使用步骤：

1、点击码云，克隆项目，如果不想用gitee，想找github地址，点我

wxParse: 小程序的富文本插件https://gitee.com/haoxingyi/wx-parse

2、用微信开发者工具把该项目打开，用测试号就可以了

3、具体使用教程

1）将插件导入项目：

　　将wxParse文件夹放在项目目录下，如图：

其中：

　　- wxParse/
　　　　-wxParse.js(必须存在)
　　　　-html2json.js(必须存在)
　　　　-htmlparser.js(必须存在)
　　　　-showdown.js(必须存在)
　　　　-wxDiscode.js(必须存在)
　　　　-wxParse.wxml(必须存在)
　　　　-wxParse.wxss(必须存在)
　　　　-emojis(可选)

2）js文件：引入wxParse：

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

let content = '12344<h1>哈哈哈</h1>'
const that = this
WxParse.wxParse('topicDetail', 'html', content, that);

3）界面上使用

<import src="../../wxParse/wxParse.wxml"/> 
<template is="wxParse" data="{{wxParseData:topicDetail.nodes}}"/>

towxml：

下面是我个人实现的最终效果，样式默认不换行，我本地修改成换行了

实现步骤：

1、点击码云，克隆项目，注意，这个项目无法用开发者工具正常打开

towxml: 小程序富文本的插件https://gitee.com/haoxingyi/towxml

2、解压以后的使用与api

1）克隆下来代码后，npm i 来安装node_modules包依赖，可以看到下面的层级，其中根目录下的config.js是配置根本依赖文件，dist 是我们打包出来的文件，也是我们小程序中要用到的插件文件。

2）config.js文件中的配置，里面注释非常详细，这里根据你的实际需要来，注意echarts是非常大的，audio，数学公式等等，根据你的实际需要来吧，我这里是配合后台管理的富文本功能，是没有这些功能的，所以只保留了图片和列表

3）修改完上面的config.js 后，重新打包

npm run build

4）打包以后的dist里面，修改部分默认的属性，来适应我们的需要

列表的样式修改

打开：dist/style/main.wxss ，找到 .h2w__table, 注释不换行的样式，因为默认不换行会导致列表左右出现很长的滚动条，我这里是不需要的，直接注释掉

.h2w__table {
    width: 99.99%;
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    margin-bottom: 40rpx;
    /* white-space: nowrap; */
}

默认地址的修改（不修改这个无法把项目放到 components 或者其他目录，只能放到根目录，注意这个）

打开： dist/decode.json 修改地址，把绝对路径改成相对路径，

{
  "component": true,
  "usingComponents": {
    "decode": "./decode",
    "table": "./table/table",
    "img": "./img/img"
  }
}

3、具体使用

1）先把上面打包的dist改名towxml, 并放到我们的components 中,你自己想放别的文件也是可以的，改路径

2）app.js

App({
	// 引入`towxml3.0`解析方法
  towxml:require('/components/towxml/index'),
}

3）我们具体使用的页面

index.json中配置

{
  "navigationBarTitleText": "自定义富文本界面",
  "usingComponents": {
    "towxml":"/components/towxml/towxml"
  }
}

index.wxml

<view class="container" style="background: #ccc;margin-top:50px;">
  自定义富文本
  <towxml nodes="{{article || '暂无简介'}}"/>
</view>

index.js 注意，这里使用必须用到了我们在app.js中配置的towxml方法了

//获取应用实例
const app = getApp();
Page({
  data: {
    article: {}						// 内容数据
  },
  onLoad: function () {
    let clauseText = `<table>\n<tbody>\n<tr>\n<td width=\"63\">\n<p><strong>名称</strong></p>\n</td>\n<td width=\"106\">\n<p><strong>提供目的及场景描述</strong></p>\n</td>\n<td width=\"141\">\n<p><strong>提供的个人信息类型</strong></p>\n</td>\n<td width=\"141\">\n<p><strong>数据接收方的名称及联系方式</strong></p>\n</td>\n</tr>\n<tr>\n<td width=\"63\">\n<p>腾讯有数SDK</p>\n</td>\n<td width=\"106\">\n<p>网站数据统计分析</p>\n</td>\n<td width=\"141\">\n<p>服务日志信息、社交网络ID</p>\n</td>\n<td width=\"141\">\n<p>腾讯有数</p>\n<p>邮箱：youshu@tencent.com</p>\n</td>\n</tr>\n<tr>\n<td width=\"63\">\n<p>上海洽太信息科技有限公司</p>\n</td>\n<td width=\"106\">\n<p>识别用户身份，包括用户预约直播、下单购买等作为区分不同用户的依据</p>\n</td>\n<td width=\"141\">\n<p>用户昵称、头像、手机号、openid、unionid、国家、省、市、区、语言；<br />订单数据：包括收件人姓名、手机号、收货地址、下单商品信息、支付金额</p>\n</td>\n<td width=\"141\">\n<p>上海洽太信息科技有限公司<br />yonggang.luo@chatail.com</p>\n</td>\n</tr>\n</tbody>\n</table>`

    let result = app.towxml(clauseText,'html',{
      base:'/',				// 相对资源的base路径
      theme:'light',		// 主题，默认`light`，dark是深色
      events:{				// 为元素绑定的事件方法
        tap:(e)=>{
          //自定义点击事件
          console.log('tap',e);
        }
        //change  其他事件格式和点击一样，根据自己的实际需要使用
      }
    });


    // 更新解析数据
    this.setData({
      article:result
    });

  }
})

4、特殊数据处理- markdown

测试源地址：https://www.vvadd.com/wxml_demo/demo.txt?v=2

只需要修改 index.js 里面的方法就够了

可以先封装一个请求接口的方法，如果有了就不用看这个了

index.js 具体赋值方法：

clauseText必须是请求接口地址，就是上面的测试源地址拿到的



let result = app.towxml(clauseText,'markdown',{
      base:'https://www.vvadd.com',	// 相对资源的base路径,注意，这里需要和你的源地址前缀一致
      theme:'light',		// 主题，默认`light`，dark是深色
      events:{				// 为元素绑定的事件方法
        tap:(e)=>{
          //自定义点击事件
          console.log('tap',e);
        }
        //change  其他事件格式和点击一样，根据自己的实际需要使用
      }
    });


    // 更新解析数据
    this.setData({
      article:result
    });

Wiki - Gitee.com

小程序怎么配置Twoxml，让其完美支持Markdown！-小程序开发-PHP中文网