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>

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

微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
微信小程序之图片、音频、视频上传（附前后端代码示例）
最近搞小程序开发,碰到了图片上传和音视频上传的问题,百度了下,网上示例不多,鄙人不才,就用TP3.2.3自己写了一个小程序上传图片.音视频的示例,刚好也是项目所需.能力有限,不喜勿喷,仅供新手参考. ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...
android小程序 socket,能在微信小程序中使用的socket.io客户端
微信小程序版 socket.io和engine.io 可以使用在微信小程序中的socket.io和engine.io 微信小程序的websocket做了一次封装,导致socket.io或者engine ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
在微信小程序中绘制图表（part2）
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part3) 关注我的 github 项目查看完整代码. 确 ...
微信小程序中绘制图表（AntV F2 的使用）
1.安装小程序F2组件 npm i @antv/f2-canvas 2.安装好相关依赖包之后,使用微信开发者工具运行项目,点击开发者工具顶部详情,勾选使用npm模块,再点击菜单栏中工具下的构建npm ...
微信小程序中如何实现省市区街道四级地址级联选择
大家好,我是雄雄. 前言微信小程序中支持省市区地址级联吗? 微信小程序中的地址级联最多支持到几级? 今天,我们就来看看,微信小程序中的地址级联的使用,以及一些坑-希望大家看完之后能避免踩坑啊. 省市 ...
小程序 | 微信小程序中使用位置API打开地图
小程序 | 微信小程序中使用位置API打开地图一.效果展示二.代码实现使用微信内置地图查看位置,调用wx.openLocationAPI,具体内容可以查看微信官方文档. // js let In ...

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

一、service.Vue

二、service.scss

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

最新文章

热门文章