美文网首页
914.【前端】Taro集成towxml渲染markdown文档

914.【前端】Taro集成towxml渲染markdown文档

作者: 七镜 | 来源:发表于2024-01-16 00:00 被阅读0次

一、克隆Towxml项目

git clone https://github.com/sbfkcel/towxml.git

二、配置功能特性

  1. 删除不需要的echarts支持


三、安装项目依赖

cd towxml
npm install

四、打包

npm run build

五、集成进 Taro项目

  1. 将打包生成的dist目录重命名为towxml复制到Taro项目的微信dist目录下

  2. 将打包生成的dist目录重命名为towxml 再次复制到Taro项目的根目录下(这样项目不会报错)

  1. 集成代码如下
...your import...
import towxml from '../../../towxml'


interface DimensionWritingProps {

}

export default function DimensionWriting(props: FC<DimensionWritingProps>) {
...your logic
  // towxml data
  const [dataTowxml, setDataTowxml] = useState({})

  const router = useRouter()



  useEffect(() => {

    if(dataDimensionWriting.content.length >0 ) {
      let result = towxml(dataDimensionWriting.content[0].base_dimension.content,'markdown',{

      })
      setDataTowxml(result)

      setIsReady(true)
    }
  },[dataDimensionWriting.content.length])
  if (!isReady) return null


  return <View className='dimension-writing'>
    <BNavTopV2 title={"文章锦集"}/>
    <View className={'article'}>
      <View className={'header'}>{dataDimensionWriting.content[0].base_dimension.name}</View>
      <View className={'section'}>
        {
          // @ts-ignore
<towxml nodes={dataTowxml}/>
        }
      </View>
    </View>
  </View>
}

DimensionWriting.defaultProps = {}

  1. 集成代码配置如下
export default {
  navigationStyle: "custom",
  enableShareAppMessage:true,
  enableShareTimeline: true,
  usingComponents: {
    towxml: '../../towxml/towxml',
  },
}

六、最终效果

ok,已完成

相关文章

网友评论

      本文标题:914.【前端】Taro集成towxml渲染markdown文档

      本文链接:https://www.haomeiwen.com/subject/sjacodtx.html