微信小程序渲染公众号的文章

1.使用wxparse解析h5网页标签

wxml

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

js

var WxParse = require('../../utils/wxParse/wxParse.js');
Page({
	data:{
		content:"<section style="text-align: justify;margin-bottom: 15px;line-height: 1.75em;letter-spacing: 1px;margin-left: 8px;margin-right: 8px;"><strong><span style="font-size: 15px;">骁龙865支持最高HDR品质的游戏体验。</span></strong></section><section style="text-align: justify;margin-bottom: 15px;line-height: 1.75em;letter-spacing: 1px;margin-left: 8px;margin-right: 8px;"><span style="font-size: 15px;">现在很多游戏，采用的是半透明渲染，如果按当前通用的渲染方式，基本要将整个图像进行渲染，所以功耗超级大。</span></section><section style="text-align: justify;margin-bottom: 15px;line-height: 1.75em;letter-spacing: 1px;margin-left: 8px;margin-right: 8px;"><span style="font-size: 15px;">而高通Adreno HDR快速混合的做法，是将画面中固定的部分（右图中彩色的部分）先找出来，再对画面中变动的火焰、烟雾和雪花进行渲染，这可以带来整体渲染速度提升，同时还能降低功耗。</span></section><section style="text-align: center;margin-bottom: 15px;line-height: 1.75em;letter-spacing: 1px;margin-left: 8px;margin-right: 8px;"><img class="" data-ratio="0.5576592082616179" data-src="https://mmbiz.qpic.cn/mmbiz_png/Pn4Sm0RsAujIolbibsroulrun7rebicTT087En7qnLfzQ29ExmnNunCReeNbTc0fxaRxreCS6hRDYHiavC2jEf3GQ/640?wx_fmt=png" data-type="png" data-w="581" height="auto" width="581"  />
 </section>"
	},
	onLoad(){
		WxParse.wxParse('article', 'html', this.data.content, this, 5);
	}
})

2.使用微信提供的rich-text

wxml

<rich-text nodes="{{nodes}}" class="rice-txt"></rich-text> 

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
  	// 示例h5片段
    nodes: "<section style="text-align: justify;margin-bottom: 15px;line-height: 1.75em;letter-spacing: 1px;margin-left: 8px;margin-right: 8px;"><strong><span style="font-size: 15px;">骁龙865支持最高HDR品质的游戏体验。</span></strong></section><section style="text-align: justify;margin-bottom: 15px;line-height: 1.75em;letter-spacing: 1px;margin-left: 8px;margin-right: 8px;"><span style="font-size: 15px;">现在很多游戏，采用的是半透明渲染，如果按当前通用的渲染方式，基本要将整个图像进行渲染，所以功耗超级大。</span></section><section style="text-align: justify;margin-bottom: 15px;line-height: 1.75em;letter-spacing: 1px;margin-left: 8px;margin-right: 8px;"><span style="font-size: 15px;">而高通Adreno HDR快速混合的做法，是将画面中固定的部分（右图中彩色的部分）先找出来，再对画面中变动的火焰、烟雾和雪花进行渲染，这可以带来整体渲染速度提升，同时还能降低功耗。</span></section><section style="text-align: center;margin-bottom: 15px;line-height: 1.75em;letter-spacing: 1px;margin-left: 8px;margin-right: 8px;"><img class="" data-ratio="0.5576592082616179" data-src="https://mmbiz.qpic.cn/mmbiz_png/Pn4Sm0RsAujIolbibsroulrun7rebicTT087En7qnLfzQ29ExmnNunCReeNbTc0fxaRxreCS6hRDYHiavC2jEf3GQ/640?wx_fmt=png" data-type="png" data-w="581" height="auto" width="581"  />
 </section>"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
	//replace对图片处理,为了适应手机屏幕大小
	let detail = this.data.nodes.replace(/\<img/gi, '<img style="max-width:100%;height:auto"');
	this.setData({
		nodes:detail
	})
  },

渲染一般文章时，随意选择其中一个就可以了，wxparse渲染复杂文章相对较慢，二微信提供的rich-text相对来说就快的多了。