java最新技術,實現一鍵分享朋友圈,下面給大家演示一下
作爲十餘年java老司機,根據多年經驗,自己錄製的學習視頻,我往對你們有所幫助,
有技術問題或者面試方面交流的可以加我微信renlliang2013,隨時歡迎。
相關教程視頻:https://ke.qq.com/course/149432?tuin=57912c43
- 一鍵分享朋友圈
- 第一章:Share.js的使用
- 1. Share.js的介紹
- 第一章:Share.js的使用
說Share.js之前,需要大家先了解CS、BS等網站架構。瞭解html、css和JavaScript等技術。
Share.js的開源網址:https://www.oschina.net/p/share-js
Share.js是一款一鍵轉發工具組件,它可以一鍵分享到微博、QQ空間、QQ好友、微信、騰訊微博、豆瓣、Facebook、Twitter、Linkedin、Google+、點點等社交網站,使用字體圖標。
基於JavaScript語言開發編寫。
- 2. Share.js的入門
需要先下載share.js文件(資料中已經提供),解壓後,demo文件夾是提供的案例,dist文件夾是提供的css、js等文件。
創建web的項目,把dist文件夾下所有資源拷貝到web項目中。創建demo1.html文件。
引入css和js文件
編寫div用來生成一鍵分享按鈕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Share.js入門程序</title>
<!--引入css-->
<link rel="stylesheet" href="css/share.min.css">
<!--引入js-->
<script src="js/social-share.min.js"></script>
</head>
<body>
<!--屬性全部都採用默認值-->
<div class="social-share"></div>
</body>
</html>
自定義屬性配置
所有配置可選, 通常默認就滿足需求。有些時候,需要自己來配置一些信息,可用的配置如下
url : '', // 網址,默認使用 window.location.href
source : '', // 來源(QQ空間會用到), 默認讀取head標籤<meta name="site" content="http://overtrue" />
title : '', // 標題,默認讀取 document.title/>
description : '', // 描述, 默認讀取head標籤:<meta name="description" content="拓薪" />
image : '', // 圖片, 默認取網頁中第一個img標籤
sites : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 啓用的站點
disabled : ['google', 'facebook', 'twitter'], // 禁用的站點
wechatQrcodeTitle : '微信掃一掃:分享', // 微信二維碼提示文字
wechatQrcodeHelper : '<p>微信裏點“發現”,掃一下</p><p>二維碼便可將本文分享至朋友圈。</p>'
以上選項均可通過標籤 data-xxx來設置:
例如url屬性想使用:data-url="http://www.txjava.cn"
駝峯轉爲中橫線,如wechatQrcodeHelper屬性的data標籤爲data-wechat-qrcode-helper
- 3. Share.js的項目應用
在搜索商品的詳情後,可以對商品詳情頁進行一鍵分享
- 第二章:二維碼生成組件
- 1. 二維碼的概述
二維碼又稱二維條碼,常見的二維碼爲QR Code,QR全稱Quick Response,是一個近幾年來移動設備上超流行的一種編碼方式,它比傳統的Bar Code條形碼能存更多的信息,也能表示更多的數據類型。
二維碼是使用若干個與二進制相對應的幾何形體來表示文字數值信息,將信息換算成二進制的幾何形體,並生成一個矩陣圖。
二維碼的優勢:信息容量大, 可以容納多達1850個大寫字母或2710個數字或500多個漢字,應用範圍廣, 支持文字,聲音,圖片,指紋等等,容錯能力強, 即使圖片出現部分破損也能使用,成本低, 容易製作。
- 2. 二維碼的生成
https://cli.im/url可以用來生成二維碼圖片。
Share.js默認生成了二維碼,使用的是QRCode.js開源組件。http://code.ciaoca.com/javascript/qrcode/資料。
生成二維碼的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二維碼</title>
<!--引入js-->
<script type="text/javascript" src="js/qrcode.js"></script>
</head>
<body>
<div id="qrcode"></div>
</body>
<script>
window.onload = function(){
// 生成二維碼
// new QRCode(document.getElementById('qrcode'), 'http://www.txjava.cn');
// 第二種寫法,使用json數據格式
var q = new QRCode('qrcode',{
text: 'your content',
width: 256,
height: 256,
correctLevel : QRCode.CorrectLevel.H
});
}
</script>
</html>
根據本人多年從業以及學習經驗,錄製了一套最新的Java精講視頻教程,如果你現在也在學習Java,在入門學習Java的過程當中缺乏系統的學習教程,你可以加羣654631948領取下學習資料,面試題,開發工具等,羣裏有資深java老師做答疑,每天也會有基礎部分及架構的直播課,也可以加我的微信renlliang2013做深入溝通,只要是真心想學習Java的人都歡迎。
java基礎教程:https://ke.qq.com/course/149432?tuin=57912c43
Java分佈式互聯網架構/微服務/高性能/springboot/springcloud: