移动端h5原生分享到朋友圈、微博等
结合nativeshare
和m-share
两个包生成一个vue移动端的分享组件
需要npm install NativeShare --save
和npm install m-share --save
shareBar.vue
<template><div id="nativeShare"><div class="label">分享到</div><div class="list"><span class="list-item" v-for="(button, index) in shareButtons" :key="index"><img :src="button.src" class="i" @click="call(button)">{{button.text}}</span></div></div>
</template><script>
//https://github.com/fa-ge/NativeShare
const nativeshare = () => import ('nativeshare') //这种引入方式nativeshare是Promise对象
//https://github.com/backToNature/m-share
const m_share = () => import ('m-share')
var NativeShare, mShare
export default {name: 'the-sharebar',data() {return {shareButtons:[{text: '微信好友', nativeshare:'wechatFriend', m_share: 'wx' , src: require('@/assets/weixin_friend.png')},{text: '朋友圈', nativeshare:'wechatTimeline', m_share: 'wxline', src: require('@/assets/weixin.png')},{text: '新浪微博', nativeshare:'weibo', m_share: 'sina', src: require('@/assets/weibo.png')},{text: 'QQ好友', nativeshare:'qqFriend', m_share: 'qq', src: require('@/assets/QQ.png')},{text: 'QQ空间', nativeshare:'qZone', m_share: 'qzone', src: require('@/assets/qqzone.png')},{text: '更多', nativeshare:'', m_share: '', src: require('@/assets/more.png')},]}},computed: {config () {return {title: '分享标题',desc:'描述',img:'图片地址',img_title:'图片标题',link: '当前链接'}}},methods: {call(command) {let shareData = { //nativeShare的参数模型title: this.config.title,desc: this.config.desc,// 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。link: this.config.link,icon: this.config.url,// 不要过于依赖以下两个回调,很多浏览器是不支持的success: function() {alert('success')},fail: function() {alert('fail')}}let mShareData = { //m-share的参数模型title: this.config.title, // 标题,默认读取document.titledesc: this.config.desc, // 描述, 默认读取head标签:<meta name="description" content="desc" />link: this.config.link, // 网址,默认使用window.location.hrefimgUrl: this.config.img, // 图片, 默认取网页中第一个img标签fnDoShare(type) {console.log('success')}}let nativeShare = new NativeShare()nativeShare.setShareData(shareData)try {nativeShare.call(command.nativeshare)} catch(e) {//iphone的qq浏览器调用此api//除iphone的qq浏览器外其他浏览器调用的api//在iphone的qq浏览器中比较奇葩,第一次调用nativeShare.call()会报错,第二次之后不报,这里是让每次调用nativeShare.call()之后都报错,然后统一去调m-share.to()方法mShare.to(command.m_share, mShareData)}}},mounted() {// ES6 标准nativeshare().then(res => {NativeShare = res.default} )// CommonJS 标准m_share().then(res => {mShare = res})//alert(browser)}
}
</script><style scoped>
#nativeShare {font-size: 13px;
}.label {font-size: 18px;}.list-item {width: 30%;display: inline-block;text-align: center;margin: 10px 0;}.i {width: 40px;height: 40px;display: block;margin: 0 auto;margin-bottom: 5px;background-size: cover;}
</style>
config的参数也可以选择用组件间的通信传入、<the-sharebar :config="config" />
注意
现在已经发布npm包vue-native-share
移动端h5原生分享到朋友圈、微博等相关推荐
- uniapp分享微信 朋友圈 微博 qq
封装了一个组件 <template><viewclass="maskBody"v-if="isShow"@click="isShow ...
- H5页面分享到朋友圈,自定义标题描述封面图 前端+php代码
<script type="text/javascript"> console.log('huati') wx.config({ ...
- php微信h5分享到朋友圈,H5页面在微信端的分享(分享到朋友圈,好友)
一.获取基本信息 找到已有公众号的appid,根据这个appid和url向后端发起请求,拿到配置所需要的参数:timestamp.noncestr和signature. 二.实现 1.页面引入JS-S ...
- 微信H5分享到朋友圈,转发朋友功能随记
最近刚做了一个微信公众号H5项目,里面包含一个分享到朋友圈和分享给好友的功能.配置白名单以及公众号js安全域名这些就不赘述了,接下来简单介绍下实现这个功能的几个前端步骤 因为是微信网页开发,项目里如果 ...
- h5分享到朋友圈_微信朋友圈创意招聘广告制作方法 H5模板
微信朋友圈招聘广告发布出去那么久了,为啥还是没有求职者前来应聘呢?那么一定是你的招聘广告不够创意,所以没能吸引求职者的目光.如何才能制作一个有创意更吸引求职者眼球的招聘广告呢?现在你只需通过制作平台的 ...
- H5微信分享 朋友 分享给朋友圈 vue 踩坑实战,附注意事项 及 解决方案
最近有一个微信分享的功能,恰逢疫情期间远程办公,然后家里的笔记本比较拉闸本地环境不完善,然后远程办公只能推代码到测试环境调试,博主也是比较难受,日渐憔悴,一周没对接好的问题,好在到了公司一下午就调试好 ...
- 微信h5实现分享给朋友url改变_h5 微信分享朋友和朋友圈
生成JS-SDK权限验证签名 实现发送给朋友和分享到朋友圈时内容参数自定义 一.微信JS-SDK 1. 获得Access Token access token的获得方法在前面有介绍,详情见 微信公众平 ...
- 【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
转发给好友/群 在对应页面的 js 文件中,添加如下代码 // 点击右上角转发分享给好友/群onShareAppMessage() {let detail = this.data.detailretu ...
- 禁止微信H5页面点击右上角菜单时出现复制链接,但支持转发给好友和分享到朋友圈...
可以使用 JavaScript 来禁止点击右上角菜单时出现复制链接的功能.可以在页面的 JavaScript 代码中添加如下代码: document.addEventListener('context ...
- 微信h5实现分享给朋友url改变_h5网页 微信分享给好友,朋友圈-tp5
控制器 vendor('wechat.jssdk'); $jssdk =new JSSDK("appid", "appsecret"); $signPackag ...
最新文章
- 除了java还学什么_学好Java编程除了努力还需要具备什么?
- 虚幻引擎4:打造街机经典游戏学习教程 Unreal Engine 4: Create an Arcade Classic
- java的4种内部类
- we need to have frequent contact for relationships for transferring from aca to career
- 【Linux系统编程】Linux 线程浅析
- 苹果加入AOM联盟 AV1获全主流生态平台支持
- Window之Fiddler构建请求
- nodejs学习文档(一) 认识node.js
- 一张图学会python高清图-一张图让你学会Python
- 每次开机都要选择Windwos10才能进系统的原因及解决方法--	【亲测有效】
- 英文版一元购源码开发解析
- 网络编程在线英英词典之服务器代码框架搭建(二)
- 利用python脚本将微信聊天信息提取到txt文件
- ffmpeg 为取经而来_孙悟空很早之前就死了,取经的其实是六耳猕猴,这说法是真的吗?...
- 复赛后第一次正经写博客
- 2C领域最后一个资本宠儿,快看成“超新Z世代”娱乐平台
- [GWCTF 2019]枯燥的抽奖 1
- FHE学习笔记 #1 部分抽象代数名词
- android应用商店检查更新,以编程方式检查Play商店中的应用更新
- js输入框的联想功能