H5端调起WhatsApp选择联系人以及给固定联系人进行内容分享

封装了一个工具类，如果传入参数phone，则发给指定联系人，不传入phone，则到WhatsApp应用中选择联系人进行分享

util.js

/*** 调起第三方 whatsApp 应用进行内容分享* 如果传入参数phone，则发给指定人，如果不传入参数，则可以选择联系人进行分享* @param {Object} phone*/
export function share(phone) {const curHref = window.location.href;// content是自己定义的一些需要分享的内容;let shareStr = 'I\'ve found a fantastic item on Motovill - the online marketplace for used car trading.You should definitely have a look:';let toSomeoneStr = 'Hi,I\'m interested!';let content = phone ? toSomeoneStr : shareStr;content += '\n'+ curHref;isMobile();if(!isMobile()) {uni.showToast({title: '请在手机上进行操作',icon: 'none'});} else {// 调起 WhatsApp,自己选择联系人进行内容分享let shareLink = 'whatsapp://send?text='+ encodeURIComponent(content);// 调起 WhatsApp 给指定手机号发消息let toSomeoneLink = 'whatsapp://send?phone=' + phone + '&text='+ encodeURIComponent(content);window.location.href = phone ? toSomeoneLink : shareLink;// 如果用户没有安装APP，则提示用户去安装APPsetTimeout(() => {window.location.href = 'https://www.whatsapp.com/';console.log('去安装');}, 2000);}
}// 判断当前设备是否为移动端
function isMobile() {let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);return flag;
}export default {share,
};

使用

<template><button type="default" @click="share()">选择联系人分享</button><button type="default" @click="shareToSomeone()">分享给固定联系人</button>
</template>
<script>import whatsApp from '@/utils/util.js';export default {methods: {share() {whatsApp.share();}，shareToSomeone() {let phone = 'xxxxxxxx';whatsApp.share(phone);}}}
</script>

友情链接
如何从不同的应用程序连结 WhatsApp

H5端调起WhatsApp选择联系人以及给固定联系人进行内容分享相关推荐

JSAPI支付——H5网页端调起支付接口
1 /**2 * JSAPI支付--H5网页端调起支付接口3 */4 class JsApi_pub extends Common_util_pub5 {6 var $code;//code码,用以获 ...
H5手机移动端调起浏览器自带分享功能实例（QQ、UC浏览器微博、微信分享）
H5手机移动端调起浏览器自带分享功能实例(QQ.UC浏览器微博.微信分享) 注:代码需要在服务器或测试服务器上方可看到效果 HTML: <span class="viewshare w ...
uniapp H5端使用高德地图完成路线规划
本项目是H5端,APP端地图的使用方法请参考我的另一篇博客uniapp,map地图组件打包原生APP 首先到高德地图API,申请web端key 参考高德H5端教程开始写代码高德地图JS API 1.准 ...
h5端呼起摄像头扫描二维码并解析
2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...
uniapp项目H5端横屏问题-样式错乱+字体大小+video
项目场景: 项目场景:uniapp项目 H5端,由于用户手机打开了旋转模式,横屏的话H5会变形,之前设计没做这方面的样式兼容. 问题描述: 部分用户手机打开了旋转之后,打开H5会有样式混乱问题. 原因 ...
uniapp+uniCloud实现批量上传图片到云端(解决h5端跨域问题)
批量上传图片到云端流程: 1.uni.chooseImage选择图片,返回图片临时路径 2.根据图片临时路径数量,循环调用uniCloud.uploadFile上传图片到云存储,返回图片线上路径 3 ...
美团饿了么外卖CPS联盟小程序（新增H5端）花小猪，滴滴大车，一键获取Path
美团饿了么外卖CPS联盟小程序(新增H5端)花小猪,滴滴大车,一键获取Path 美团/饿了么外卖CPS联盟返利公众号小程序裂变核心源码源代码地址 https://gitee.com/waimai-c ...
uni-app 滑到一定位置固定某个元素在顶部吸顶解决方案 APP端 H5端
uni-app 滑到一定位置固定某个元素在顶部吸顶实例 APP端吸顶完美吸顶方案 uView uniapp组件库 //通过offset-top参数设置组件在吸顶时与顶部的距离 <u-stic ...
前端如何在H5页面调起微信支付
在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...

H5端调起WhatsApp选择联系人以及给固定联系人进行内容分享

H5端调起WhatsApp选择联系人以及给固定联系人进行内容分享相关推荐

最新文章

热门文章

H5端 调起WhatsApp选择联系人以及给固定联系人进行内容分享

H5端 调起WhatsApp选择联系人以及给固定联系人进行内容分享相关推荐

最新文章

热门文章

H5端调起WhatsApp选择联系人以及给固定联系人进行内容分享

H5端调起WhatsApp选择联系人以及给固定联系人进行内容分享相关推荐