java基础教程之实现一键分享朋友圈

 java最新技术,实现一键分享朋友圈,下面给大家演示一下

作为十余年java老司机,根据多年经验,自己录制的学习视频,我往对你们有所帮助,

有技术问题或者面试方面交流的可以加我微信renlliang2013,随时欢迎。

相关教程视频:https://ke.qq.com/course/149432?tuin=57912c43

  1. 一键分享朋友圈 
    1. 第一章:Share.js的使用
      1. 1. 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语言开发编写。

  1. 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

  1. 3. Share.js的项目应用

在搜索商品的详情后,可以对商品详情页进行一键分

  1. 第二章:二维码生成组件
    1. 1. 二维码的概述

二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型。

二维码是使用若干个与二进制相对应的几何形体来表示文字数值信息,将信息换算成二进制的几何形体,并生成一个矩阵图。

二维码的优势:信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字,应用范围广, 支持文字,声音,图片,指纹等等,容错能力强, 即使图片出现部分破损也能使用,成本低, 容易制作。

  1. 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:

https://ke.qq.com/course/179440?tuin=57912c43

发布了87 篇原创文章 · 获赞 63 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/renlianggee/article/details/90232919