微信小程序 - 渲染HTML

個人博客：柚子青年。

微信小程序現在已經被廣泛應用，開發方式類似 Vue。

閱讀本文需要有小程序基礎。

rich-text

在渲染 DOM 這一塊，小程序沒有 Vue 的 v-html 也沒有 React 的 dangerouslySetInnerHTML，不過小程序提供了自己的渲染方式 rich-text，詳情請看 官方文檔。

不過在展示效果上個人覺得是不太滿意的。在展示代碼的時候，並不會有很好的換行和間隔。網上也有一些第三方組件幫你渲染的，我這邊覺得還是不太行，於是就自己大致造了個輪子。

注：本文只提供解決思路不提供具體實現代碼

渲染原理

首先要先了解小程序官方渲染方式的原理。

WXML

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

JavaScript

data: {
    nodes: [{
        name: 'div',
        attrs: {
            class: 'div_class',
            style: 'line-height: 60px; color: red;'
        },
        children: [{
            type: 'text',
            text: 'Hello World!'
        }]
    }]
}

大致就是 引入 rich-text 組件， 傳入 nodes 格式的 json 然后進行渲染。

所以我們自己實現的時候也可以按照這種方式。

實現

WXML

<view className="content">
    <view wx:for="{{news.wxml}}" wx:key="name" className="{{item.className || ''}}">
        <view wx:if="{{item.name === 'view'}}">{{item.value}}</view>
        <view wx:if="{{item.name === 'image'}}">
            <image src="{{item.value}}" mode="widthFix"></image>
        </view>
        <text className="code" wx:if="{{item.name === 'text'}}">{{item.value}}</text>
    </view>
</view>

WXSS

.content > view { line-height: 48rpx; margin-bottom: 30rpx; }
.content .h1 { font-weight: bold; font-size: 2em; }
....
.content .blockquote { padding: 20rpx 30rpx; color: #777; border-left: 4px solid #ddd; background: #fafafa; }
.content .code { display: block; font-size: 24rpx; color: #f8f8f2; padding: 32rpx; border-radius: 6rpx; white-space: pre; word-wrap: normal; overflow: auto; }

JavaScript

data: {
    nodes: [{
        name: 'view',
        className: 'div_class',
        value: "Hello World!"
    }]
}
// name:  view  普通文本  image 圖片  text 代碼片段 
// className: 需要添加的 class
// value: 值 對應 name 類型 （保留空格換行，建議直接粘貼不用管格式）

后續可能會出具體實現方式，大概。