uniapp原生查看图片大图（保存，修改，识别），调用外部地图app

快来打我* 2022-12-27 09:21 65阅读 0赞

## 在uniapp中，有一些原生的小技巧处理交互，简单分享两个，一个是点击图片查看大图，可保存等，一个是调用外部地图。 ##

##### 如您满意请给莫成尘点个star 话不多说，直接上代码 #####

## 点击查看大图（代码均复制粘贴即可使用） ##

<template>
    	<view class="Box-Wrap">
    		<view class="IStitles">
    			<view class="toptitle Names">客服二维码</view>
    			<view class="Image">
    				<image class="image" @click="previewImage" src="https://cdn.uviewui.com/uview/common/logo.png"></image>
    			</view>
    		</view>
    		<view class="IStitles">
    			<view class="toptitle Names" @click="openLocation">点击调用外部地图</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { }
    		},
    		methods: { 
    			previewImage(e) { 
    				wx.previewImage({ 
    					current: 'https://cdn.uviewui.com/uview/common/logo.png',
    					urls: ['https://cdn.uviewui.com/uview/common/logo.png'] //一个数组，可以查看多张图
    				});
    			},
    			openLocation() { 
    				//外部地图
    				const _this = this;
    				let latitude = 39.13; //天津经纬度
    				let longitude = 117.2; //天津经纬度
    				let name = '天津';
    				let address = '可以是一段很长的地址介绍';
    				wx.openLocation({ 
    					name,
    					address,
    					latitude,
    					longitude,
    					scale: 18
    				});
    			},
    		}
    	};
    </script>
    
    <style lang="scss" scoped>
    	// @import "index.css"
    	.IStitles { 
    		width: 92%;
    		margin-left: 4%;
    		min-height: 10rpx;
    
    		.toptitle { 
    			display: inline-block;
    			height: 18rpx;
    			font-size: 36rpx;
    			font-family: PingFangSC-Medium, PingFang SC;
    			font-weight: 550;
    			color: #333333;
    			line-height: 0;
    			background: linear-gradient(270deg, rgba(103, 159, 255, 0) 0%, #679fff 100%);
    			width: auto;
    		}
    
    		.Image { 
    			width: 100%;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    
    			.image { 
    				width: 320rpx;
    				height: 320rpx;
    			}
    		}
    
    	}
    </style>

#### 附加和可能出现的有用信息已添加注释 ####

其他有关uniapp的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。