0 背景

做微信小程序的时候突然遇到一个问题，想在微信小程序里面显示代码段（类似下面显示的这种效果），显示代码段无非就是空格问题和换行问题，这个过程中遇到很多问题和坑，于是写下这个记录一下。

在这里插入图片描述

1 方式

1.1 总述

简单来说，我把这些方法分为两类，第一类是微信官方自带的text标签。另一个是像wxPrase插件。

1.2 text标签

微信小程序官方文档给了一种方式就是使用text标签，来控制和显示你要操作的文本。

官方链接：

text标签描述

1.3 wxPrase插件

wxPrase是一个富文本插件，通俗来讲就是可以直接渲染html文件，这个感觉是比较好的，你把网页拿过来用这个插件就可以直接渲染了，但是实际操作中也遇到一些问题，后面谈。

github链接:

wxPrase1

github链接：

wxPrase2

文档：

说明文档

1.4 其他

查资料的时候发现，如果想要直接用网页，还可以用微信小程序官网的web-view,但是，请看下图。

在这里插入图片描述

无语。。。。

2 使用方法

2.1 text标签的使用

根据官方文档，使用text显示我们想要的文本。

在这里插入图片描述

首先在data里面定义一段数据：

然后在wxml层写text标签

在wxss层需要导入样式文件：

程序运行后显示如下：

在这里插入图片描述

可以看出，能做到我想要的效果。

缺点

如果用text文档实现换行和空格的效果，那么你的数据看起来就很别扭，也就是你可能要在服务器段好好拼凑数据，这样加载起来才能实现效果。

2.2 wxPrase的使用

首先去github上下载：

wxPrase

在这里插入图片描述

下载后解压到你小程序目录

js层代码如下：

// pages/question/question.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    text:"\n#include<cstdio>\n using namespace std;\n&nbsp; &nbsp; printf( \"hello world!\");\n &nbsp;  &nbsp;return 0;\n}",
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var WxParse = require('../../wxParse/wxParse.js')
    var that = this
    var article = '<div>&nbsp; 我&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 是HTML代码<br><br><p>&nbsp; 我&nbsp;测试</p> 测试 &nbsp; <h5>呵&nbsp;呵</h5> <img src="http://static.e-mallchina.com/pic/product/brand/detail/hgds.jpg"></img></div>' ;
    WxParse.wxParse('article', 'html', article, that, 0); // 实例化对象

})

wxParse参数说明：

WxParse.wxParse(bindName , type, data, target,imagePadding)
1.bindName绑定的数据名(必填)
2.type可以为html或者md(必填)
3.data为传入的具体数据(必填)
4.target为Page对象,一般为this(必填)
5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

wxml层代码如下：（注意要加import ）

<!--pages/question/question.wxml-->
<text>pages/question/question.wxml</text>

<!-- <text decode = "{{true}}">{{text}}</text> -->
<import src="../../wxParse/wxParse.wxml" /> 
<template is="wxParse" data="{{wxParseData:article.nodes}}" />

上面代码执行后效果如下：

在这里插入图片描述

可以看出能渲染部分内容，比如开头的空格就不能渲染。

2.3wxPrase的改进使用

实际上，我要的效果不是原程序中那样使用，因为我更倾向于使用一个完整的文件来保存数据，也就是说我想直接渲染html文件，所以用wxPrase直接渲染html文件试试，过程中发现了一些问题。

①首先，书写一个html文件如下：

在这里插入图片描述

然后这个文件在浏览器里运行是这样的：

可以看出，这个html在浏览器中显示是没有问题的。然后，把上面的html文件用wxPrase加载，这里有两种方法，一种是把图片上传到云存储然后去，另一种是直接本地存储然后取出来加载进去。

现在先测试第一种方式（第二种不测试了）

在js层书写请求图片的代码如下：

// pages/question/question.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var WxParse = require('../../wxParse/wxParse.js')
    var that = this;
    wx.request({
      url: 'https://6d73-g-187.tqc83c&t57810578',   //此处填写你自己的html地址
      method: 'GET',
      data: {
        'id': 13
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res)
        var article = res.data
        WxParse.wxParse('article', 'html', article, that, 5);
      }
    })
  },
})

wxml层和wxss层代码不变，然后渲染后如下图。

在这里插入图片描述

可以看出，wxPrase不能直接渲染原生的HTML文件，需要对原生文件修改下才能用，而且不能实现首行空格问题，也就是不能实现我们想要的功能。

3 后记

不知道是不是自己功力没到家，到目前为止，text标签可以解决部分问题，但是对后台数据要求比较麻烦。wxPrase的兼容性不是很好。

~~我目前的解决方法就是修改后台数据，然后用text标签重新渲染了。~~

本来以为没啥问题了，结果发现从服务器段下载的数据显示起来还是不行。本地的数据渲染起来没啥问题，但是服务器下载的数据就不行。测试如下，分别测试从服务器下载的数据，和本地下载的数据。

后台服务器数据如下：

\n#include<cstdio>\nusingnamespacestd;\n&nbsp;&nbsp;printf(\"hello world\"); \n &nbsp;&nbsp; return 0;}

前台需要渲染的测试如下：

在这里插入图片描述

说明一下，item.question 是从服务器上下载下载下来的数据，text是直接写在data里的数据，text3 是先从服务器下载下来然后再加载到data里，最后在渲染的，最后一个是尝试用view渲染。效果如下：

在这里插入图片描述

可以看到，四种方式中，只有第二种成功渲染，于是我产生一种疑问，是不是从服务器后台下载下的数据不能渲染呢，实际上官方文档中并没有说可以处理“\n”这个操作。于是，这条路在我这里不通。

问题还是要解决的,怎么解决呢？

发现一个新大陆，对于部分人可能不怎么适用，就是我发现，好像数据库中的文本数据可以保留空格和换行的格式，这样你请求的数据是不是应该也可以自动显示空格和换行呢？

于是乎，我继续修改后台数据，修改后如下：

在这里插入图片描述

我在后台数据库里直接使用了回车，然后前台什么都没变，效果如下：

可以看出，这种方式从后台加载的数据可以直接显示出回车，但是空格还是要加“&nbsp”，同时，view标签不论什么方式都不支持。至此，算是能凑合完成这个功能了。

4后后记

总是感觉自己功力不到家，应该有更好的办法来显示空格和回车问题，这个坑前后困扰我三天，今天算是勉强解决了吧。希望大神多提示下，看看有没有更好的解决方式。

原文链接：https://blog.csdn.net/baidu_32523857/article/details/103637900