914.【前端】Taro集成towxml渲染markdown文档-阿里云开发者社区

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

2024-03-11 84

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一、克隆Towxml项目

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

二、配置功能特性

删除不需要的echarts支持

三、安装项目依赖

cd towxml
npm install

四、打包

npm run build

五、集成进 Taro项目

将打包生成的dist目录重命名为towxml复制到Taro项目的微信dist目录下
将打包生成的dist目录重命名为towxml 再次复制到Taro项目的根目录下（这样项目不会报错）
集成代码如下

...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 = {}

集成代码配置如下

export default {
  navigationStyle: "custom",
  enableShareAppMessage:true,
  enableShareTimeline: true,
  usingComponents: {
    towxml: '../../towxml/towxml',
  },
}