UniApp实现微信小程序中拨打手机电话和长按加微信客服好友（完整代码示例）文章来源地址https://www.toymoban.com/news/detail-510336.html
一、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>
文章来源：https://www.toymoban.com/news/detail-510336.html
到了这里，关于【uni-app】UniApp实现微信小程序中拨打手机电话和长按加微信客服好友（完整代码示例）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
