成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

基于 Taro 的微信小程序開發實戰:如何支持高亮代碼塊

開發 前端
因為微信小程序現在已經支持 html 標簽的渲染,因此我們有很多在 web 上能使用的方案也能運用于小程序中,但是由于微信小程序對打包體積有限制,因此,功能驗證成功之后,要多考慮這方面的問題。

如果我們想要開發一款程序員使用的社區小程序,那么對 markdown 格式的解析與渲染是一個非常重要的功能。不過要完善的支持 .md 格式,在微信小程序中并不是一件容易的事情。好在微信小程序目前已經支持 html 標簽渲染,因此我們有許多的 web 方案可以借鑒。

我實現的最終的效果如上圖所示。引入成功,并且在真機測試通過。接下來具體跟大家分享一下實現步驟。

// 我的開發環境
Taro 3.6.6
Node 16.19.1

一、支持引入 .md 文件

正常情況下,我們應該從接口中獲取到當前文件的 markdown 內容,不過偶爾也需要支持本地 .md 文件的渲染,因此首先我們要在工程里支持引入 .md 文件。

首先支持如下操作,引入 raw-loader。

pnpm add raw-loader

然后在工程配置文件中 config/index.ts 新增如下配置。

module.exports = {
  // ...
  mini: {
    // ...
    webpackChain(chain, webpack) {
      chain.merge({
        module: {
          rule: {
            myloader: {
              test: /\.md$/,
              use: [
                {
                  loader: 'raw-loader',
                  options: {},
                },
              ],
            },
          },
        },
      })
    },
  },
}

由于我的項目中使用了 ts,因此直接引入 .md 文件還會報錯。

在 types/global.d.ts 中,新增 md 文件的配置即可解決該問題。

...
declare module '*.scss';
declare module '*.sass';
declare module '*.styl';
+ declare module '*.md';

二、引入 markdown 解析器

我使用了一款名為 wemark 的 Markdown 渲染庫。不過由于年久失修,如果按照該作者的方式直接使用的話會有一些問題。因此請盡量按照我的步驟來在項目中配置。

首先我們需要下載該項目。

git clone https://github.com/TooBug/wemark.git

然后將該項目中的文件 wemark 復制到 Taro 項目中 src 目錄中。

設置編譯時復制 wemark 目錄。修改 config/index.ts,在 copy 設置項中增加 wemark。

copy: {
  patterns: [
    {
      from: 'src/wemark',
      to: 'dist/wemark',
    },
  ],
  options: {}
},

我們可以通過如下方式在頁面中引入 wemark,創建頁面時,我們會創建一個 index.config.ts 的文件,使用 usingComponents 配置好。

export default definePageConfig({
  navigationBarTitleText: '代碼塊高亮',
  navigationStyle: 'default',
  usingComponents: {
    wemark: '../../wemark/wemark'
  }
})

這樣我們可以直接在頁面中使用。

import { View } from '@tarojs/components'
import code from './code.md'
import './index.scss'

function Parse() {
  return (
    <View>
      <wemark md={code} link highlight type='wemark' />
    </View>    
  )
}

export default Parse

我們可以在 src/wemark/wemark.wxss 中,修改渲染之后的樣式。

調整好之后,樣式如下:

目前已基本完成,但是字體有點不好看,因此我們需要引入一個專門用來展示代碼的等寬字體,這里我們引入的是 SF Mono。

三、引入自定義字體

在微信小程序中引入自定義字體也并非易事。

我們可以使用它官方文檔中提供的方案通過網絡地址來引入。

wx.loadFontFace({
  family: 'FZSuXSLSJW',
  source: 'url("https://we7.stuyun.com/FZSuXSLSJW.ttf")',
  success: res => {
    console.log('font load success', res)
  },
  fail: err => {
    console.log('font load fail', err)
  }
})

但是這種方案有一些不太爽的限制,該地址必須與小程序同源,或者設置了可以跨域訪問。并且不支持本地的字體文件。

因此我們只能通過把字體文件轉成 base64 的格式,然后通過 @font-face 來自定義字體。

transfonter.org 可以免費的幫助我們將字體文件轉換成 base64。

拿到對應字體的 base64 之后,然后自定義樣式即可。

@font-face {
  font-family: 'SFMono';
  src: url('data:font/ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYhof28AAoBMAAAAHE....
}

最后,在src/wemark/wemark.wxss 中,給代碼塊設置樣式屬性。

.wemark_block_code{
  font-family: SFMono;
  ...
}

搞定!

四、按需加載

微信小程序對包體積有嚴格的限制。這樣處理之后,包體積可能會有點大。字體文件有接近 200k,remark 也不小。因此我們還需要進一步做優化。

仔細觀察 wemark 文件,我們發現他其實是基于 remark 實現的一個自定義小程序組件。

因此,我們可以把自定義字體的樣式寫在 wemark.wxss 中,然后將該組件設置為按需引入,那么在小程序啟動時,就可以不用加載該組件。

微信小程序目前已經支持了按需引入。在 wemark.json 中,添加如下配置。

{
  "lazyCodeLoading": "requiredComponents"
}

五、總結

因為微信小程序現在已經支持 html 標簽的渲染,因此我們有很多在 web 上能使用的方案也能運用于小程序中,但是由于微信小程序對打包體積有限制,因此,功能驗證成功之后,要多考慮這方面的問題。

責任編輯:姜華 來源: 這波能反殺
相關推薦

2017-05-08 15:03:07

微信小程序開發實戰

2016-11-28 15:52:09

微信小程序開發

2016-09-27 16:38:24

JavaScript微信Web

2016-11-04 10:49:48

微信小程序

2025-04-27 02:25:00

DeepSeekCursor程序

2016-09-28 18:10:59

微信程序MINA

2024-01-22 16:24:10

框架小程序開發

2018-05-11 10:16:41

微信小程序反編譯

2016-09-27 20:36:23

微信HttpWeb

2016-10-13 13:12:43

微信小程序javascript

2021-03-10 09:44:20

微信小程序APP

2018-05-11 10:22:05

小程序源碼分析

2018-09-11 10:32:07

云開發小程序開發者

2016-11-07 10:30:07

微信小程序安裝配置

2023-01-12 17:53:42

2023-06-26 22:18:19

2018-12-25 22:38:12

微信功能系統

2023-03-19 11:47:57

Taro小程序持續集

2020-08-26 13:10:03

微信小程序前端代碼

2017-02-06 13:32:12

微信小程序思想
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 免费在线观看成人 | 精品国产1区2区3区 在线国产视频 | 亚洲劲爆av| 国产精品久久一区二区三区 | 九九在线精品视频 | 久久国产精品一区 | 国产免费av在线 | 综合色导航| 成在线人视频免费视频 | 激情毛片| 国产黄色大片 | 一级看片| 久久久91精品国产一区二区三区 | 精品国产乱码久久久久久图片 | 国产成人精品免费视频大全最热 | 国产最好的av国产大片 | 午夜影院在线视频 | 99在线观看视频 | 色一阁| 色婷婷亚洲| 一区二区三区久久久 | 国产精品视屏 | 久久国产精品免费一区二区三区 | 亚洲精品久久久久久宅男 | 亚洲国产黄色av | 午夜精品久久久久久久久久久久久 | 白浆在线| 免费毛片www com cn | 亚洲精品一区二区三区四区高清 | 国产午夜精品福利 | 国产一卡二卡三卡 | 精品视频导航 | 97碰碰碰| 成人精品毛片国产亚洲av十九禁 | 精品国产一区二区国模嫣然 | 欧洲精品码一区二区三区免费看 | 国产精品日韩一区二区 | 天天摸天天看 | 久久久精品一区 | 一区二区三区四区在线视频 | 国产激情自拍视频 |