feat: 添加 rich-text 页面

app.json

@@ -23,7 +23,8 @@
     "pages/component/picker-view/picker-view",
     "pages/component/input/input",
     "pages/component/textarea/textarea",
-    "pages/component/form/form"
+    "pages/component/form/form",
+    "pages/component/rich-text/rich-text"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/component/index/index.js

@@ -17,7 +17,7 @@ Page({
         id: 'content',
         name: '基础内容',
         open: false,
-        pages: ['text', 'icon', 'progress']
+        pages: ['text', 'icon', 'rich-text', 'progress']
       }, {
         id: 'form',
         name: '表单组件',

pages/component/rich-text/rich-text.js

@@ -0,0 +1,70 @@
+const htmlSnip =
+`<div class="div_class">
+  <h1>Title</h1>
+  <p class="p">
+    Life is&nbsp;<i>like</i>&nbsp;a box of
+    <b>&nbsp;chocolates</b>.
+  </p>
+</div>
+`
+
+const nodeSnip =
+`Page({
+  data: {
+    nodes: [{
+      name: 'div',
+      attrs: {
+        class: 'div_class',
+        style: 'line-height: 60px; color: red;'
+      },
+      children: [{
+        type: 'text',
+        text: 'You never know what you're gonna get.'
+      }]
+    }]
+  }
+})
+`
+
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'rich-text',
+      path: 'page/component/pages/rich-text/rich-text'
+    }
+  },
+
+  data: {
+    htmlSnip,
+    nodeSnip,
+    renderedByHtml: false,
+    renderedByNode: 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
+    })
+  },
+  renderNode() {
+    this.setData({
+      renderedByNode: true
+    })
+  },
+  enterCode(e) {
+    console.log(e.detail.value)
+    this.setData({
+      htmlSnip: e.detail.value
+    })
+  }
+})

pages/component/rich-text/rich-text.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "rich-text"
+}

pages/component/rich-text/rich-text.wxml

@@ -0,0 +1,26 @@
+<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>

pages/component/rich-text/rich-text.wxss

@@ -0,0 +1 @@
+/* pages/component/rich-text/rich-text.wxss */