小程序渲染html
核心思路:
使用 rich-text
将示例文档更改下就行了;
参考
rich-text | 微信开放文档
微信小程序rich-text富文本图片不展示、宽度超出 - 简书
引入HTML本地文件,以js格式保存
#htmlSnip.js
var html =
`
<div class="div_class">
<h1>Title</h1>
<p class="p">
Life is <i>like</i> a box of
<b> chocolates</b>.
</p>
</div>
`
module.exports={
snip_html:html
}
js进行处理
## mini.js
// pages/irr_desc/irr_desc.js
var local_html = require('htmlSnip');
var htmlSnip =local_html.snip_html.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
Page({
onShareAppMessage() {
return {
title: 'rich-text',
path: 'page/component/pages/rich-text/rich-text'
}
},
/**
* 页面的初始数据
*/
data: {
htmlSnip,
renderedByHtml: false,
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: #1AAD19;'
},
children: [{
type: 'text',
text: 'You never know what you\'re gonna get.'
}]
}]
},
renderHtml() {
this.setData({
renderedByHtml: true
})
},
enterCode(e) {
console.log(e.detail.value)
this.setData({
htmlSnip: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.renderHtml();
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxml 文件
##wxml
<view class="container">
<view class="page-body">
<view class="page-section">
<!-- <view class="page-section-title">通过HTML String渲染</view> -->
<view class="page-content">
<!-- <scroll-view scroll-y>{{htmlSnip}}</scroll-view> -->
<!-- <button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">渲染HTML</button> -->
<block wx:if="{{renderedByHtml}}">
<rich-text nodes="{{htmlSnip}}"></rich-text>
</block>
</view>
</view>
<!-- <view class="page-section">
<view class="page-section-title">通过节点渲染</view>
<view class="page-content">
<scroll-view scroll-y>{{nodeSnip}}</scroll-view>
<button style="margin: 30rpx 0" type="primary" bindtap="renderNode">渲染Node</button>
<block wx:if="{{renderedByNode}}">
<rich-text nodes="{{nodes}}"></rich-text>
</block>
</view>
</view> -->
</view>
</view>