H5_module/activity/content/content.vue

<template>
	<view v-if="detaile">
		<view class="title">{{ detaile.title }}</view>
		<view class="content">
			<view class="viewMore">
				<rich-text :nodes="detaile.text | formatRichText"></rich-text>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<wx-share ref="wxshare" />
		<!-- #endif -->
	</view>
</template>

<script>
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			detaile: '',
			type: 2, //详情类型：1 普通内容 2 自定义页面内容
		};
	},

	onLoad: function(options) {
		if(options.appId) req.setStorage('appId',options.appId);
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		this.id = options.id;
		this.type = options.type ? options.type : 2;
		this.getDetail();
	},
	onShow(){
	},

	onShareAppMessage() {
		return this.onShareMessage();
	},
	onShareTimeline() {
		return {
			title: this.detaile.title,
			imageUrl: this.detaile.pic,
			path: '/activity/content/content?id=' + this.id+'&appId='+req.getStorage('appId')
		};
	},
	
	onReady() {
		// #ifdef H5
		var that = this;
		//初始化分享内容
		setTimeout(function() {
			var shareContent = that.onShareMessage();
			if (shareContent) {
				shareContent.path = window.location.origin + shareContent.path;
			}
			console.log('分享内容》》》》》', shareContent);
			that.$refs.wxshare.init(shareContent);
		}, 4 * 1000);
		// #endif
	},
	
	methods: {
		
		onShareMessage(){
			let path = '';
			let isSolution = '';
			// #ifndef H5
			isSolution = req.env[req.env.NODE_ENV].isSolution;
			// #endif
			// #ifdef H5
			isSolution = false;
			// #endif
			if(isSolution){
				path = '/share/home/index?appId='+req.getStorage('appId')+'&userId='+userInfo.id;
			}else{
				path = '/activity/content/content?id=' + this.id+ '&appId=' + req.getStorage('appId');
			}
			return {
				title: this.detaile.title,
				imageUrl: this.detaile.pic,
				path: path
			};
		},
		
		getDetail() {
			let apiUrl = '';
			if(this.type == 1){
				apiUrl = '/api/content/detail'
			}else{
				apiUrl = '/api/help/detailV2'
			}
			let param = {}
			if(this.type == 1){
				param.id = this.id;
			}else{
				param.code = this.id;
			}
			req.getRequest(
				apiUrl,
				param,
				res => {
					this.detaile = res;
				}
			);
		},
	},
	filters: {
		/**
		 * 处理富文本里的图片宽度自适应
		 * 1.去掉img标签里的style、width、height属性
		 * 2.img标签添加style属性：max-width:100%;height:auto
		 * 3.修改所有style里的width属性为max-width:100%
		 * 4.去掉<br/>标签
		 * @param html
		 * @returns {void|string|*}
		 */
		formatRichText(html) {
			//控制小程序中图片大小
			let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				return match;
			});
			// newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/<br[^>]*\/>/gi, '<p style="margin: 10px 0;"></p>');
			newContent = newContent.replace(/<br[^>]*\>/gi, '<p style="margin: 10px 0;"></p>');
			newContent = newContent.replace(/font-size:[^;]+;?/g,'');
			newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:12rpx auto;"');
			return newContent;
		}
	}
};
</script>
<style>
@import './content.css';
</style>