微信小程序實現(xiàn)動態(tài)渲染Markdown示例詳解

更新時間：2023年08月10日 09:03:21 作者：LYX6666

這篇文章主要為大家介紹了微信小程序實現(xiàn)動態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

需求

十幾個圖文編排的介紹文章，每個頁面的結構、內容都不相同，
因此沒有辦法通過WXML代碼把文章結構固定下來。

因此筆者想到的解決方案包括：

全部轉成長截圖，好處是代碼超級簡單，壞處是：即使只改一個字，也要重新生成、上傳截圖
全部用原生小程序硬編碼出來，每個介紹文章寫一個組件。雖然后期修改靈活，但過于低效且麻煩。

考慮到對于圖文編排來說，markdown的效率遠高于HTML，如果有辦法把markdown文檔渲染成小程序頁面，以上的需求就能很好的解決。

查了一下，還真有，倉庫地址：Towxml

構建

名字非常簡單粗暴：to wxml，就是把markdown或HTML轉換成WXML。

作者說這個包不建議從NPM上獲取，而應該自己使用源碼構建：

// clone倉庫
git clone https://github.com/sbfkcel/towxml.git
// 進入文件夾
cd towxml
// 安裝依賴
npm install
// 構建
npm run build

構建完成后，把dist文件夾復制到小程序的/miniprogram/路徑下（和app.ts、pages等目錄同級）：

在小程序的app.ts中添加towxml:require('/towxml/index')：

/**
 * app.ts
 * TS小程序的App泛型可能和引入的組件不兼容，可以改成any
 */
App<any>({ 
  globalData: {},
  towxml:require('/towxml/index'),
  onLaunch() {
  },
})

在需要使用的頁面json中添加組件引用：

{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

頁面V層（wxml文件）：

<!--index.wxml-->
<view class="container">
    <towxml nodes="{{article}}"/>
</view>

頁面C層（ts文件）：

//獲取應用實例
const app = getApp();
// data中添加兩個變量
Page({
  data: {
    isLoading: true,                // 判斷是否尚在加載中
    article: {}                        // 內容數(shù)據
  },
})

使用

官方文檔鏈接：鏈接

文檔中寫到，在onload方法中初始化，就可以渲染markdown文本了，最終作用在上文寫的towxml標簽上：

onLoad: function () {
    let result = app.towxml('# Markdown', 'markdown',{
      base:'https://xxx.com',                // 相對資源的base路徑
      theme:'light',                    // 主題，默認`light`
      events:{                    // 為元素綁定的事件方法
        tap:(e)=>{
          console.log('tap',e);
        }
      }
    });
    // 更新解析數(shù)據
    this.setData({
      article:result,
      isLoading: false
    });
  }

towxml方法的三個參數(shù)：

文本型，必填。就是實際需要渲染的文本，上述代碼的#Markdown渲染出來就是一級標題
文本型，必填。表示類型，本文只用到markdown所以寫'markdown'即可
對象，必填。表示渲染時的參數(shù)，具體可以看文檔，比如，主題可以改成亮色或暗色。

接下來需要解決一個問題：

上述代碼的markdown文本是直接寫在代碼里的，實際應用肯定需要從后端獲取

因此先寫一個獲取文本的方法：

// 獲取markdown文本
  getText: (url, callback) => {
    wx.request({
      url: url,
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: (res) => {
        if (typeof callback === 'function') {
          callback(res);
        };
      }
    });
  },

然后改寫一下原來的onload：

onLoad: function () {
    // 獲取文本，第一個參數(shù)指向后端的文件地址（你需要起一個后端）
    this.getText('http://127.0.0.1:8080/test.md', res => {
      // 回調函數(shù)中完成更新數(shù)據的邏輯
      let result = app.towxml(res.data, 'markdown',{
        base:'https://xxx.com',            
        theme:'light',                    
        events:{                    
          tap:(e)=>{
            console.log('tap',e);
          }
        }
      });
      // 更新解析數(shù)據
      this.setData({
        article:result,
        isLoading: false
      });
    })
  }

此時就可以渲染來自HTTP的markdown文件了：