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>