一、克隆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',
},
}
六、最终效果
ok,已完成
网友评论