yanzong_qianduan/pages/news/article/detail.vue

<template>
	<view class="article">
		<view class="title">{{detail.title}}</view>
		<view class="desc">{{detail.create_time}}</view>
		<view class="content" v-html="detail.content"></view>
	</view>
</template>

<script>
	import * as ArticleApi from '@/api/article'
	export default {
		data() {
			return {
			  // 当前文章ID
			  articleId: null,
			  // 当前文章详情
			  detail: {}
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
		  // 记录文章ID
		  this.articleId = options.articleId
		  // 获取文章详情
		  this.getArticleDetail()
		},
		methods: {
			// 获取文章详情
			async getArticleDetail() {
			  const {status, message, data} = await ArticleApi.detail(this.articleId);
			  if(status == 200){
			  	this.detail = data.detail
			  }
			}
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
		  return {
		    title: this.detail.title,
		    path: "/pages/news/article/detail?articleId=" + this.articleId
		  }
		},
		
		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
		  return {
		    title: this.detail.title,
		    path: "/pages/news/article/detail?articleId=" + this.articleId
		  }
		}
	}
</script>

<style lang="scss" scoped>
.article{
	padding: 40rpx 25rpx;
	overflow: hidden;
	.title{
		font-size: 36rpx;
		color: #000;
	}
	.desc{
		padding: 30rpx 0;
		font-size: 26rpx;
		color: #999;
	}
	.conent{
		font-size: 26rpx;
		color: #212121;
		line-height: 50rpx;
	}
}
</style>