小程序渲染html
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
⼩程序渲染html
核⼼思路：
使⽤ 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>。