vue 使用 vue-social-share 分享网页
前面写了vue +qrcode生成二维码的 https://blog.csdn.net/lileLife/article/details/103846079
现在用vue-social-share分享到微信 扣扣等功能
share.js github网址: https://github.com/overtrue/share.js
引入:
npm安装:
npm install vue-social-share -S
main.js import:
import Share from 'vue-social-share'import 'vue-social-share/dist/client.css';import '../node_modules/social-share.js/dist/js/social-share.min.js'Vue.use(Share)
vue中使用:
<share :config="config"></share>---js----data() {return {msg: '江南无所有、聊赠一枝春',config:{sites: ['qq','wechat'],wechatQrcodeTitle : '微信扫一扫:分享',wechatQrcodeHelper : '<p>扫一扫</p><p>二维码便可将本文分享至朋友圈。</p>'}
}
config 中内容为定义分享内容
// url : '', // 网址,默认使用 window.location.href
// source : '', // 来源(QQ空间会用到), 默认读取head标签:<meta name="site" content="http://overtrue" />
// title : '', // 标题,默认读取 document.title 或者 <meta name="title" content="share.js" />
// description : '', // 描述, 默认读取head标签:<meta name="description" content="PHP弱类型的实现原理分析" />
// image : '', // 图片, 默认取网页中第一个img标签
// sites : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 启用的站点
// disabled : ['google', 'facebook', 'twitter'], // 禁用的站点
// wechatQrcodeTitle : '微信扫一扫:分享', // 微信二维码提示文字
// wechatQrcodeHelper : '<p>微信里点“发现”,扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
到这里 网页分享的内容成果为:
会发现 分享的按钮 图标没有,console显示 找不到 字体资源。
解决方法:
在项目 node_modules中找到 vue-social-share的static中的字体资源,移动到项目根目录下的static目录下:
刷新页面:
github 项目demo:
https://github.com/lilelife/dosmth_fonted dev_lile分支
plan.vue
vue 使用 vue-social-share 分享网页相关推荐
- vue开发APP使用微信分享和QQ分享功能
条件 微信开放平台申请微信开放平台appid 腾讯开放平台申请腾讯开放平台appid 打包环境Hbuilder manifest.json中plus下的plugins下添加如下代码,并填写你的appi ...
- vue项目中将视频链接分享至推特的解决方法及踩坑记录
vue项目中将视频链接分享至推特的解决方法及踩坑记录 将动态改变的视频链接分享至推特,并希望能直接在推特上播放视频的需求实现方法及踩坑记录 如果只要将文本或链接分享到推特,不需要推特识别图片/视频等媒 ...
- vue微信公众号页面分享
vue微信公众号页面分享 utils=>share.js const wx = require("weixin-js-sdk"); // 这块因为我们业务是必须在公众号里面的 ...
- Vue开发微信H5 微信分享签名失败问题解决方案
Vue开发微信H5 微信分享签名失败问题解决方案 参考文章: (1)Vue开发微信H5 微信分享签名失败问题解决方案 (2)https://www.cnblogs.com/golddemon/p/94 ...
- vue 分享给好友 点击分享按钮_基于vue+leaflet+echart的足迹分享评论平台
系统操作https://www.zhihu.com/video/1160268313283821568 基于vue+leaflet+Cesium的足迹分享评论平台 (其实题目是随便取的,目的只是用来证 ...
- 滴滴 webapp 5.0 Vue 2.0 重构经验分享
项目背景 滴滴的 webapp 是运行在微信.支付宝.手 Q 以及其它第三方渠道的打车软件.借着产品层面的功能和视觉升级,我们用 Vue 2.0 对它进行了一次技术重构. 技术栈 MVVM框架: Vu ...
- 解决vue路由hash模式下,微信网页授权问题
解决vue路由hash模式下,微信网页授权问题 本人开发负责微信公众号端,菜单都是自定义菜单,然后每个菜单路径都是经过授权如:http://xxxx.com/ceshi/wechat/authoriz ...
- vue仿微博评论回复_vue 网页版聊天系统|仿微信、微博网页端
最近一段时间一直在学习vue框架,对比了下react和angular发现vue上手快多了,之前有使用vue开发个vue版仿微信手机端IM聊天,最近想继续加强学习下,就做了一版网页端的vue聊天室. 依 ...
- 【Vue】Vue重写教室管理系统的前端网页V1(前后端分离)--20221222
项目说明 目的 练习并熟悉Vue2 的API,来为Vue项目做准备: 插值语法 插槽 props和data 父子组件通信 Ajax异步请求数据 生命周期函数 methods方法 computed属性 ...
最新文章
- SQL CONVERT在日期转换中的使用示例
- Win2003 安全设置大全
- clion phpstorm 等jetbrains编辑器激活教程
- Hadoop的安装与使用
- e盘是否具有读写权限_轻松搭建MySQL主从复制、读写分离(双机热备)
- 转:比尔·盖茨和理查德·斯托曼
- 第九章:在Spark集群上掌握比较重要的图操作之Structural Operators
- Python——调用shell命令的三种方法
- iOS Swift JSON解析教程
- CentOS7 安装部署k8s
- BZOJ3171:[TJOI2013]循环格
- acer 4741G安装ubuntu10.10显卡成功
- 网页游戏开发秘笈 PDF扫描版
- 输入两个正整数m和n,求其最大公约数和最小公倍数。
- 网易交互设计师微专业C2 设计需求分析与方案选择
- 这个开源的去马赛克神器 修复受损漫画无压力
- VC++开发RTX拨打电话插件
- Python|实验项目八例
- 《区块链:从数字货币到信用社会》电子书下载 -(百度网盘 高清版PDF格式)
- 8个你至少应该参加一次的极客盛会
热门文章
- MySQL知识——基本知识
- 计算机网络术语英文翻译 (部分图片来源于网络,如侵权请通知)
- [含lw+源码等]微信小程序英语学习平台+后台管理系统[包运行成功]适合计算机毕业设计Java毕设程序设计
- Shell脚本,循环语句用于减少程序代码冗余和重复,for语句,while语句,使用let进行变量自增
- 百度排名代发收录怎么上百度
- 常用的二分类损失函数
- 如何将一个数组转成集合?
- 蓝牙耳机怎么选?蓝牙耳机品牌排行榜
- mysql统计出每个姓氏的人数_基于SQL中的数据查询语句汇总
- 2018年计算机等级一级教程,2018年计算机一级考试内容