小程序展示markdown文件 参考_小程序 markdown

uni-app——在微信小程序中实现markdown文章解析展示 - 简书

1、发请求拿到数据库的内容

onLoad() {
			console.log('资料页面');
			uni.request({
				url: httpUrl + '/getNotice',
				method: 'GET',
				header: {
					"Content-Type": "application/json"
				},
			}).then((res) => {
				res[1].data.filter((item, index) => {
					item.n_time = newDate(item.n_time)
					item.d_title = item.n_title
					item.n_title = truncate(item.n_title, 15)
				})
				res[1].data.sort((a, b) => {
					return new Date(b.n_time).getTime() - new Date(a.n_time).getTime()
				})
				this.$store.state.noticeNoChangeData = res[1].data
				this.$store.state.noticeData = res[1].data
				this.$store.state.totalNum = res[1].data.length
				this.$store.commit('getPageData')
				this.$store.commit('changePageArr')
			}).catch(err => {
				console.log(err)
			})
			this.changePagesize()
 
		},

 2、把数据传到子页面 注意这里markdown里面存在base64和特殊字符 转换的时候要注意

 最后就是小程序端的展示了

这里参考了 uni-app——在微信小程序中实现markdown文章解析展示 - 简书

• 下载  mp-html

<template>
	<view class="newsDetails_app">
		<mp-html :content="html" />
	</view>
</template>
 
<script>
	import showdown from 'showdown';
	import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
	export default {
		data() {
			return {
				itemData: [],
				markdown: '',
				html: "<div>Hello World!</div>",
			}
		},
		components: {
			mpHtml,
		},
		methods: {
 
		},
		onLoad(options) {
			console.log('详情页数据');
			try {
				this.itemData = JSON.parse(decodeURIComponent(options.itemData))
				console.log(this.itemData);
				this.markdown = this.itemData.n_markdown
				let converter = new showdown.Converter()
				this.html = converter.makeHtml(this.markdown)
				// console.log(html);
 
			} catch (err) {
				console.error(err)
			}
		},
	}
</script>
 
<style>
	.newsDetails_app {
		width: calc(100% - 40rpx);
		height: calc(100% - 40rpx);
		position: absolute;
		/* background-color: pink; */
		padding: 0 20rpx;
		padding-bottom: 20rpx;
		overflow: scroll;
	}
 
	.newsDetails_app::-webkit-scrollbar {
		width: 0;
		height: 0;
	}
 
	.newsDetails_title {
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;
		/* background-color: skyblue; */
	}
 
	.newsDetails_time {
		font-size: 24rpx;
		height: 60rpx;
		border-bottom: 1rpx solid #CDD4DD;
	}
 
	.newServer {
		font-size: 32rpx;
		font-weight: bold;
		color: #777986;
		line-height: 50rpx;
		margin-top: 50rpx;
	}
 
	.newServer_red {
		color: red;
	}
 
	.warm_title {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		color: #FF9900;
		margin-bottom: 10rpx;
	}
 
	.warm_title>image {
		width: 30rpx;
		height: 30rpx;
	}
 
	.warm_reminder {
		margin: 20rpx 0;
	}
 
	.warm_content {
		font-size: 26rpx;
		margin-top: 20rpx;
	}
 
	.content_image {
		margin: 24rpx 0;
		display: flex;
		justify-content: center;
	}
 
	.content_image>image {
		width: 90%;
	}
 
	.content_hint {
		font-size: 20rpx;
		color: red;
	}
 
	.activity {
		margin: 20rpx 0;
	}
 
	.activity_title {
		font-size: 28rpx;
		font-weight: bold;
		color: #337FE6;
		margin-bottom: 20rpx;
	}
 
	.activity_content {
		font-size: 26rpx;
		color: #337FE6;
	}
 
	.activity_center {
		font-size: 26rpx;
	}
 
	.center_title {
		color: #337FE6;
	}
 
	.center_content {
		text-indent: 2rem;
	}
 
	.center_image {
		display: flex;
		justify-content: center;
		margin: 20rpx 0;
	}
</style>