In uniapp, there are some native tips to handle interactions, and you can simply share two. One is to click on the picture to view the big picture, which can be saved, etc., and the other is to call an external map.
If you are satisfied, please give Mo Chengchen a star
Click to view the big picture (copy and paste the code to use)
<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>
Additional and useful information that may appear has been annotated
If you have any questions about uniapp or you don’t understand this method, you can leave a message, I will reply as soon as possible and help you solve it.