小程序富文本页面、H5的用法

一.使用wxParse插件解析html

1.下载wxParse包

github地址: https://github.com/icindy/wxParse/tree/master/wxParse

2.下载后放到自己的小程序项目中 

 

3.app.wxss中全局引入这个wxss

/**app.wxss**/

@import "/wxParse/wxParse.wxss";

4.在需要有富文本的页面中开始写

var WxParse = require('../../wxParse/wxParse.js');//这个是富文本要用的，其他的按需要的引

 .js(调用接口，拿到接口返回的信息)

   // *** WxParse.wxParse(bindName, type, data, target, imagePadding)
  // * 1.bindName绑定的数据名(必填)
  // * 2.type可以为html或者md(必填)
  // * 3.data为传入的具体数据(必填)
  // * 4.target为Page对象, 一般为this(必填)
  // * 5.imagePadding为当图片自适应是左右的单一padding(默认为0, 可选) * / 
 onShow: function () {
//接口放在生命周期前面调，正常onLoad里面就行，我放onShow因为页面带有其他内容同步渲染出来
    my.getAbout().then(res => {

      if (res.data) {
        WxParse.wxParse('article', 'html', res.data, this, 5)
      }
    }).catch(() => {
    })
  
  },

.wxml

<import src="../../wxParse/wxParse.wxml" />  
<view class="top">
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />
  </view>

展示出来就是页面了 

 

 二.使用小程序自带的富文本组件

微信小程序文档：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

 .wxml

<rich-text nodes="{{nodes}}"></rich-text>

.js

   that.setData({ nodes:data })//调用接口数据传值过去

 三.小程序中嵌套H5页面（也算是富文本吧）

微信小程序文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

.wxml

<web-view src="{{link}}"></web-view><!-- src为h5页面链接地址，例：https://www.baidu.com/-->

.js

正常的调用接口，拿到接口数据放到src里面

//调接口是为了拿到参数不同生成的h5页面
getContract: function () {
    order.getContract(this.data.orderId).then(res => {
      this.setData({
        link: res.data.contractUrl
      })
    }).catch(() => { })
  },

注： 小程序中this.setData（{}）里面数据为1024kb以内渲染会正常，超过1024kb会影响渲染，导致渲染过慢，一些内存或网络不好的手机可能无法渲染（文字占用的很小，主要要压缩图片或者图片想办法使用链接图片或base64编码）