【uni-app】UniApp实现微信小程序中拨打手机电话和长按加微信客服好友（完整代码示例）

UniApp实现微信小程序中拨打手机电话和长按加微信客服好友（完整代码示例）

一、service.Vue

<template>

	<view>

		<!-- 标题栏 -->
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="联系客服"></u-navbar>

		<!-- banner图 -->

		<view class="banner">
			<image src="../../../static/images/service/banner.png"></image>
		</view>
		<!-- 电话 -->
		<view class="box" @click="CallPhone">
			<view class="col_1">
				<view class="col_1_1">
					<image src="../../../static/images/service/phone.png"></image>
				</view>
				<view class="col_1_2">
				</view>
			</view>
			<view class="col_2">
				<view class="col_2_1">
					客服电话
				</view>
				<view class="col_2_2">
					{{PhoneNumber}}
				</view>
			</view>
			<view class="col_3">
				<u-icon name="arrow-right" color="#040e1e" size="28"></u-icon>
			</view>
		</view>
		<!-- 微信 -->
		<view class="box" @click="WxCopy">
			<view class="col_1">
				<view class="col_1_1">
					<image src="../../../static/images/service/wx.png"></image>
				</view>
				<view class="col_1_2">
				</view>
			</view>
			<view class="col_2">
				<view class="col_2_1">
					客服微信
				</view>
				<view class="col_2_2">
					{{WxNumber}}
				</view>
			</view>
			<view class="col_3">
				<u-icon name="arrow-right" color="#040e1e" size="28"></u-icon>
			</view>
		</view>
		<!-- 二维码 -->
		<view class="TwoTitle">
			请长按下面的二维码，加客服微信
		</view>

		<view class="TwoCode">
			<image :show-menu-by-longpress="true" src="../../../static/images/service/wx.jpg" @click="previewImage">
			</image>
			<!-- <image src="../../../static/images/service/wx.jpg" mode=""></image> -->
		</view>


	</view>


</template>
<script>
	export default {


		data() {
			return {

				PhoneNumber: "13103101099",
				WxNumber: "wx18531502152"
			}
		},
		methods: {
			previewImage(e) {
				console.log('e', e);
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [],
					// 为当前显示图片的链接/索引值
					current: '/static/mp-weixin/qrCode.jpg',
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					// longPressActions:{
					// 	itemList:[this.l('发送给朋友'),this.l]
					// },
					success: res => {
						console.log('res', res);
					},
					fail: err => {
						onsole.log('err', err);
					}
				});
			},
			CallPhone() {

				uni.showToast({
					title: '标题',
					duration: 2000
				});

				wx.makePhoneCall({
					phoneNumber: '131099', //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})

			},
			WxCopy() {

				uni.showToast({
					title: '标题',
					duration: 2000
				});

				wx.makePhoneCall({
					phoneNumber: '131039', //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})

			}
		} // methods结束
	} // export default 结束
</script>
<style scoped lang="scss">
	@import "service.scss";
</style>

二、service.scss

<template>

	<view>

		<!-- 标题栏 -->
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="联系客服"></u-navbar>

		<!-- banner图 -->

		<view class="banner">
			<image src="../../../static/images/service/banner.png"></image>
		</view>
		<!-- 电话 -->
		<view class="box" @click="CallPhone">
			<view class="col_1">
				<view class="col_1_1">
					<image src="../../../static/images/service/phone.png"></image>
				</view>
				<view class="col_1_2">
				</view>
			</view>
			<view class="col_2">
				<view class="col_2_1">
					客服电话
				</view>
				<view class="col_2_2">
					{{PhoneNumber}}
				</view>
			</view>
			<view class="col_3">
				<u-icon name="arrow-right" color="#040e1e" size="28"></u-icon>
			</view>
		</view>
		<!-- 微信 -->
		<view class="box" @click="WxCopy">
			<view class="col_1">
				<view class="col_1_1">
					<image src="../../../static/images/service/wx.png"></image>
				</view>
				<view class="col_1_2">
				</view>
			</view>
			<view class="col_2">
				<view class="col_2_1">
					客服微信
				</view>
				<view class="col_2_2">
					{{WxNumber}}
				</view>
			</view>
			<view class="col_3">
				<u-icon name="arrow-right" color="#040e1e" size="28"></u-icon>
			</view>
		</view>
		<!-- 二维码 -->
		<view class="TwoTitle">
			请长按下面的二维码，加客服微信
		</view>

		<view class="TwoCode">
			<image :show-menu-by-longpress="true" src="../../../static/images/service/wx.jpg" @click="previewImage">
			</image>
			<!-- <image src="../../../static/images/service/wx.jpg" mode=""></image> -->
		</view>


	</view>


</template>
<script>
	export default {


		data() {
			return {

				PhoneNumber: "13103101099",
				WxNumber: "wx18531502152"
			}
		},
		methods: {
			previewImage(e) {
				console.log('e', e);
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [],
					// 为当前显示图片的链接/索引值
					current: '/static/mp-weixin/qrCode.jpg',
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					// longPressActions:{
					// 	itemList:[this.l('发送给朋友'),this.l]
					// },
					success: res => {
						console.log('res', res);
					},
					fail: err => {
						onsole.log('err', err);
					}
				});
			},
			CallPhone() {

				uni.showToast({
					title: '标题',
					duration: 2000
				});

				wx.makePhoneCall({
					phoneNumber: '13103101099', //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})

			},
			WxCopy() {

				uni.showToast({
					title: '标题',
					duration: 2000
				});

				wx.makePhoneCall({
					phoneNumber: '13103101099', //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})

			}
		} // methods结束
	} // export default 结束
</script>
<style scoped lang="scss">
	@import "service.scss";
</style>