微信分享图标制作

效果:

代码:

第一步:页面底部放两个浮动层,让指向图标不透明:

<div class="share" style="display:none;filter:alpha(Opacity=30);-moz-opacity:0.9;opacity: 0.5;width:100%;height:90%; background:#4F4348; box-shadow: 0 0 0px rgba(0,0,0,.6);position:absolute;z-index:9000"></div><div class="share" style="display:none;position:absolute; right:3px;top:-12px;z-index:1000020"><img src="http://vms.info.hc360.com/vms/images/fxzf.png" ></div>

第二步设置js:

<script type="text/javascript">function ShareInfo(){if($(".share").is(":hidden")){$(".share").show()}else{$(".share").hide();}}</script>

第三步:在页面底部引用

   <footer id="main_footer">
<a  onclick="ShareInfo()" href="#">我要分享</a>
    </footer>

  

时间: 2024-10-12 16:22:09

微信分享图标制作的相关文章

Bitmap 生成微信分享图标

android开发调用微信分享接口在设置分享图标时,必须对原图进行压缩处理,否则分享出来的图标会不清晰.据本人了解,微信分享的图标大小是132px*132px的. 下面给出方法 1 public static Bitmap crateWeixinShareIcon(Bitmap bmp, int target) { 2 int width = bmp.getWidth(); 3 int height = bmp.getHeight(); 4 5 if (width < target || hei

微信分享图标设置,以及wx.config配置

最近公司要求我做一个关于页面分享微信显示小图和描述的功能,由于之前没有做过,所以说是从零开始,看jssdk说明文档,网上搜索各种资料,甚至连三四年前的内容都搜索出来了,也试过以前的简单方法,包括在页面设置一个隐藏的图片,宽高都是300像素,微信就会抓取这张图片做为分享图片,但经本人测试无法使用,后来查到了原因,是微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来. wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端a

网站链接打开以后左边的小图标添加和微信分享左边图标

网站链接打开以后左边的小图标添加: <link rel="shortcut icon" href="styles/img/Logo.jpg">      <link rel="apple-touch-icon" href="styles/img/Logo.jpg">      <link rel="apple-touch-icon" sizes="72x72"

PHP+微信分享自定义小图标

微信分享以后的小图标如下图: <script>document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {window.shareData = { "imgUrl": "<?php if(stripos('y'.$detail['start_picurl'], 'http://')!=1){echo $Think.config.HTTP_STCDOMIN;}echo $

使用微信JSSDK自定义微信分享标题、描述、和图标

最近做一个项目的时候用到微信的分享 ,实现定义分享标题,图片,了解到微信在发布JSSDK后,把包括自定义分享在内的众多网页服务接口进行了统一.如果要想自定义分享自己的网页信息给好友或朋友圈,就最好使用这个统一的网页服务接口. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 步

一处折腾笔记:Android内嵌html5加入原生微信分享的解决的方法

有一段时间没有瞎折腾了. 这周一刚上班萌主过来反映说:微信里面打开聚客宝.分享功能是能够的(这里是用微信自身的js-sdk实现的).可是在android应用里面打开点击就没反应了:接下来狡猾的丁丁在产品群里AT我说:偶们的产品设计不是一直都被技术给反压制住么?真是气死,呵呵.自己刚好有空又有兴趣,于是研究了下.没曾想竟也研究出来了.事后我对整个操作过程整理了下,方便他人也提升自己. 废话少扯.以下上干货. 我的思路是:在点击h5上的分享图标时.触发js事件,在这里面能够对当前设备的操作系统和浏览

新版微信分享--图片和描述

微信6.5.6更新后,微信H5页面分享出去没有图片.之前微信会默忍抓取页面第一张大于等于300*300的图片,更新微信版本后,分享出去图片没有抓取到.这是微信为了规范自定义分享链接功能在网页上的使用,修改了分享规则,6.5.6版本之后,分享功能必须引入微信SDK.对于未接入微信JSSDK或已接入但JSSDK调用失败的网页,被用户分享时,分享卡片将统一使用默认缩略图和标题简介,不允许自定义. 分享一下接入流程: 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置

Vue单页式应用(Hash模式下)实现微信分享

前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发的都应该清楚. 二.引入js文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js.请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixi

在Unity3D项目中接入ShareSDK实现安卓平台微信分享功能(可使用ShareSDK默认UI或自定义UI)

最近公司的大厅要重做,我协助主程一起制作新大厅和新框架,前面制作的编辑器也派上了用场.等全部功能做完后我会再写一个复盘,这两天主程在忙于写热更新的功能,所以把接入分享SDK功能的任务交给了我,ShareSDK官网的文档比较分散,而且关于Unity的文档比较简略,所以还是有不少的坑.写篇博客分享一下,并加强理解记忆. 第一步,先去ShareSDK的官网下载最新版本的ShareSDK(完全免费).地址:http://www.mob.com/ 我们选择ShareSDK For Unity3D,页面会直