9.3.使用mp-html富文本插件渲染公告详情页面

1.编写接口，调用

接口

export const apiNoticeDetail = (data = {}) => {
	return request({
		url: '/wallNewsDetail',
		method: 'GET',
		data
	})
}

接口里有公告，常见问题，更新

调用

方法里面直接使用的动态数据，id来自上一个页面的id，大致的实现过程如下

1.1.url路径传入参数

index.vue公告部分跳转

				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item v-for="item in newsList" :key="item._id">
						<!-- //不同页面直接传递数据使用onLoad -->
						<navigator :url="'/pages/notice/noticedetail?id='+item._id">
							{{item.title}}
						</navigator>
					</swiper-item>

				</swiper>

1.2.本页面onLoad（）方法获取第一步参数id

detailnotice.vue

let noticeId;
	//定义变量改变标题。
	let name;
	//获取上一个页面的id就是使用这个。
	onLoad((e) => {
		noticeId = e.id;
		name = e.name;
		//生命周期原因，方法放在这里
		getNoticeDetail();
		uni.setNavigationBarTitle({
			title: name
		})
	})

1.3.定义变量，从第二部中读取该数据

onLoad()方法中的代码

noticeId = e.id;

1.4.调用接口时，传入第三步变量

	const getNoticeDetail = () => {
		apiNoticeDetail({
			id: noticeId
		}).then(res => {
			detail.value = res.data;
			console.log(detail.value);
		})
	}
getNoticeDetail();

说明：参数能够这样传递，定义接口时使用了解构，使用上述方法读取另一个页面的参数，到本页面，必须定义这种接口

2.渲染数据

<template>
	<view class="noticeLayout">
		<view class="title">
			<view class="tag" v-if="detail.select">
				<uni-tag inverted text="置顶" type="error" />
			</view>
			<view class="font">{{detail.title}}</view>
		</view>

		<view class="info">
			<view class="item">{{detail.author}}</view>
			<view class="item">
				<!-- 这里传入了一个时间戳！！！ -->
				<uni-dateformat :date="detail.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
		</view>


		<view class="content">
			<!-- 第三方插件 -->
			<mp-html :content="detail.content" />
		</view>
		<view class="count">
			阅读量 {{detail.view_count}}
		</view>
	</view>
</template>

说明：我们的content数据，不使用富文本编辑器就会带有html标签，本接口必须使用富文本编辑器。

3.使用富文本编辑器插件

1.uniapp插件市场导入

2.使用

插件市场下拉有使用教程

项目中

		<view class="content">
			<!-- 第三方插件 -->
			<mp-html :content="detail.content" />
		</view>

3.最后

停止运行当前项目，重新启动！！！不然富文本编辑器无法生效。如若还不生效，停止项目，关闭微信开发工具，再次运行。

4.常见问题页面跳转

4.1绑定事件

4.2添加页面跳转事件传入参数

user.vue

	const goProblems = () => {
		uni.navigateTo({
			url: '/pages/notice/noticedetail?id=6536358ce0ec19c8d67fbe82&name=常见问题'
		})
	}

说明：页面已经渲染，调用方法页面可展现数据。

4.3效果