Приложение uni-app использует highcharts для рисования диаграмм и создания плакатов для сохранения в альбоме мобильного телефона.

После того, как uni-app упаковывает приложение, рисование диаграммы highcharts завершается с ошибкой, и этот метод не поддерживается, поэтому мы рассматриваем возможность встраивания страницы h5 веб-просмотра в приложение для рисования диаграммы.

Сначала установите highcharts по ссылке и инкапсулируйте его в компонент.

npm install highcharts --save

<template>
	<view class="highcharts-container" style="min-width: 250px;" :style="{height:height}"></view>
</template>

<script>
	import Highcharts from 'highcharts'
	import HighchartsMore from 'highcharts/highcharts-more'
	import Highcharts3D from 'highcharts/highcharts-3d'
	import highchartsolidgauge from 'highcharts/modules/solid-gauge'
	import hightchartVariablepie from 'highcharts/modules/variable-pie'
	HighchartsMore(Highcharts)
	highchartsolidgauge(Highcharts)
	Highcharts3D(Highcharts) // 3d模块
	hightchartVariablepie(Highcharts)   // 扇形饼图
	Highcharts.setOptions({
		lang: {
			noData: '暂无数据'
		}
	});
	export default {
		props: {
			options: {
				type: Object
			},
			height: {
				type: String
				
			},
			chartData: {
				type: Array
			},
			title: {
				
			}
			
		},
		data() {
			return {
				chart: null
			}
		},
		watch: {
			chartData:{
				handler(val) {
					this.update(val)
				},
				deep:true
			}
		},
		mounted() {
			this.initChart()
	
		},
		methods: {
			
			initChart() {
				this.chart = new Highcharts.Chart(this.$el, this.options);
			},
			update(chartData) {
				this.chart.update({series:[{data:chartData}]})
				if (this.title) {
					this.chart.update({title:{text:'<view><span style="color:#FF686C;font-size:16px;font-weight:bold">'+this.title+'</span><p style="color:#666;font-size:12px">月流通（吨）</p></view>'}})
				}
				this.chart.legend.update()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.highcharts-container {
	// width: 600px;
	height: 300px;
}
.highcharts-pie-series .highcharts-point {
	stroke: #EDE;
	stroke-width: 2px;
}
</style>

Создайте ссылку на компонент на странице и передайте элементы конфигурации диаграммы реквизита.

<view class="chart_box uni-collapse-cell--animation" >
				<highcharts-components :options="pieOption" height="220px" :chartData="pieData" :title="monthlyCirculationTotal"></highcharts-components>
</view>

Плагин «html2canvas» использовался для создания плаката , затем была создана новая страница и страница h5 была открыта с помощью WebView.

<template>
	<view>
		<web-view :src="url"></web-view>
	</view>
</template>

URL-адрес h5 упаковывается uni-app и затем размещается на сервере.Поскольку сгенерированный плакат также генерируется на странице h5, есть функция сохранения его в альбом мобильного телефона после генерации. Поскольку мобильный телефон h5 не поддерживает сохранение в системный альбом, я испробовал множество методов и, наконец, решил, что когда пользователь нажимает, чтобы сохранить плакат, он переходит на внутреннюю страницу приложения, и можно вызвать функцию сохранения изображения приложения. . Чтобы перейти со встроенного h5 на страницу приложения, которая обеспечивает связь между двумя концами, вам нужно заключить SDK в кавычки после тега тела index.html и распечатать информацию, указывающую, что вызов успешен, и общение возможно.

<!-- uni 的 SDK，必须引用。 -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script>
		document.addEventListener('UniAppJSBridgeReady', function() {  
		    uni.webView.getEnv(function(res) {
		            console.log('当前环境：' + JSON.stringify(res));
		    }); 
		});
	</script>

Наконец, используйте  метод uni.webView.navigateTo , чтобы перейти на внутреннюю страницу приложения.

Также в проекте есть функция копирования ссылок, используя маркет плагинов uni-app  https://ext.dcloud.net.cn/plugin?id=1163 .