微信小程序?qū)崿F(xiàn)動(dòng)態(tài)渲染Markdown示例詳解

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

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

需求

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

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

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

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

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

構(gòu)建

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

作者說這個(gè)包不建議從NPM上獲取，而應(yīng)該自己使用源碼構(gòu)建：

// clone倉庫
git clone https://github.com/sbfkcel/towxml.git
// 進(jìn)入文件夾
cd towxml
// 安裝依賴
npm install
// 構(gòu)建
npm run build

構(gòu)建完成后，把dist文件夾復(fù)制到小程序的/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文件）：

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

使用

官方文檔鏈接：鏈接

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

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

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

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

接下來需要解決一個(gè)問題：

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

因此先寫一個(gè)獲取文本的方法：

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

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