微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
1.设置分享调用的标题、图片、url预览。
2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试)。
3.判断网页是否在微信中被调用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>微信分享功能引入页面-控制分享时候调用的标题、图片和url</title>
<style>
html,body{ font-size: 100%; width:100%; height:100%; overflow:hidden}
</style>
</head>
<body >
<div class="box">
<p><a href="javascript:void(0);" onclick="hideMenu()" id="hideRigUp">隐藏右上角三个点按钮。</a></p>
<p><a href="javascript:void(0);" onclick="showMenu()" id="showRigUp">显示右上角三个点按钮。</a></p>
<!-- <p><a href="javascript:void(0);" onclick="hideTool()" id="hideRigDown">隐藏右下面工具栏</a></p>
<p><a href="javascript:void(0);" onclick="showTool()" id="showRigDown">显示右下面工具栏</a></p> -->
<p id="tdc" style="display:none"><img src=""></p>
</div>
<script type="text/javascript">
//title如果没有设置就会调用页面title标签里面的title
var url = window.location.href;
var imgUrl = "http://i0.cy.com/tl3d_m/main/20141009/home_logo.png";
function sendMessage(){
//按钮一之------发送给好友
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //appid 设置空就好了。
"img_url":imgUrl, //分享时所带的图片路径
"img_width":"120", //图片宽度
"img_height":"120", //图片高度
"link":url, //分享附带链接地址
"desc":"分享给好友描述", //分享内容介绍 --这里会显示在预览里面。
"title":"分享测试-好友"
}, function(res){/*** 回调函数,最好设置为空 ***/
aler("分享给好友");//没有效果
});
setTimeout(function () {alert("点击分享或转发后1.5秒后调用"); }, 1500);//点击分享或转发后1.5秒后调用
});
//按钮一之------发送到朋友圈
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
"appid":"", //appid 设置空就好了。
"img_url":imgUrl, //分享时所带的图片路径
"img_width":"120", //图片宽度
"img_height":"120", //图片高度
"link":url, //分享附带链接地址
"desc":"分享给朋友圈描述", //分享内容介绍 --貌似不显示,没啥用。
"title":"分享测试-朋友圈"
}, function(res){/*** 回调函数,最好设置为空 ***/
aler("分享给朋友圈");//没有效果
});
setTimeout(function () {alert("点击分享或转发后1.5秒后调用"); }, 1500);//点击分享或转发后1.5秒后调用
});
alert("调用成功!现在可以通过右上角按钮分享给朋友或者朋友圈!");
}
//隐藏右上角三个点按钮。
function hideMenu(){
if(window.WeixinJSBridge){
WeixinJSBridge.call('hideOptionMenu');
}
}
//显示右上角三个点按钮。
function showMenu(){
if(window.WeixinJSBridge){
WeixinJSBridge.call('showOptionMenu');
}
}
//隐藏右下面工具栏
function hideTool(){
if(window.WeixinJSBridge){
WeixinJSBridge.call('hideToolbar');
}
}
//显示右下面工具栏
function showTool(){
if(window.WeixinJSBridge){
WeixinJSBridge.call('showToolbar');
}
}
//添加事件监听
//文档的WeixinJSBridgeReady事件触发后绑定微信分享,否则会绑定失败
if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false);
}else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage);
document.attachEvent('onWeixinJSBridgeReady' , sendMessage);
}
//判断网页是否在微信中被调用
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
} else {
alert("调用失败,请用微信扫一扫,扫描下面二维码打开网页!");
document.getElementById("tdc").style.display = "block";
document.getElementById("tdc").getElementsByTagName("img")[0].src="http://zhidongtdc.duapp.com/getpic.php?url="+ window.location.href +"?1&size=4&margin=2";
}
</script>
</body>
</html>
微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制的更多相关文章
- 微信公众号h5页面自定义分享
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序之 页面跳转 及 调用本地json的假数据调试
一.微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: (1)在wxml页面中: <navigator url="../index/index"> ...
- ThinkPHP5集成JS-SDK实现微信自定义分享功能
最近开发一个项目,需要将链接分享给好友时能够自定义标题.简介和logo,现将ThinkPHP5集成JS-SDK实现微信自定义分享功能的过程整理成文. 一.准备工作 1.认证的公众号 不管是订阅号还是服 ...
- Android集成微信分享功能应用签名生成方法及分享不生效的问题
通过友盟sdk集成微博.微信.qq等分享功能时,微博和qq很顺利,但在做微信集成时一直不成功.主要问题还是之前在微信开放平台申请创建移动应用时,对应用签名没有填写对,走了很多弯路现总结出来,加深记忆避 ...
- Android中使用ShareSDK集成分享功能
引言 现在APP开发集成分享功能已经是非常普遍的需求了.其他集成分享技术我没有使用过,今天我就来介绍下使用ShareSDK来进行分享功能开发的一些基本步骤和注意点,帮助朋友们避免一些坑.好了 ...
- android 实现分享功能两种方法
当我想做一个智能的记事本的时候,我就在尝试自己写一组分享功能.后来才知道,原来每个社交软件中都有自己的分享接口. 这就大大减少了我们的代码量了. 第一种方法:特点--简单 package com.ex ...
- Android调用系统分享功能总结
Android分享-调用系统自带的分享功能 实现分享功能的几个办法 1.调用系统的分享功能 2.通过第三方SDK,如ShareSDK,友盟等 3.自行使用各自平台的SDK,比如QQ,微信,微博各自的S ...
- 探秘小程序(10):分享功能+webview
场景: 小程序页面用webview嵌入了h5页面,h5页面需要与小程序进行交互,h5页面内容不同,分享的链接也不一样 分享功能: 小程序的分享功能即用户点击小程序右上角,转发功能页面.可以指定分享卡片 ...
- 【Android】3.15 短串分享功能
分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 短串分享是指,用户搜索查询后得到的每一个地理位置结果将会对应一条短串(短链接),用户可以通过短信.邮 ...
随机推荐
- PAT 1034. Head of a Gang (30)
题目地址:http://pat.zju.edu.cn/contests/pat-a-practise/1034 此题考查并查集的应用,要熟悉在合并的时候存储信息: #include <iostr ...
- C#中只使用Invokerequired来判断是不是UI线程可靠吗?
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:C#中只使用Invokerequired来判断是不是UI线程可靠吗?.
- List 排序
1:sort 这种实现是用朗姆达表达式实现.Comparison<T> 委托详见 http://msdn.microsoft.com/zh-cn/library/tfakywbh.aspx ...
- Oracle VM Virtual 下CentOS不能自动获取IP地址
在CentOS配置网卡开机自动获取IP地址: vi /etc/sysconfig/network-scripts/ifcfg-eth0 将 ONBOOT="no" 改为 ONBOO ...
- [转] React Native Navigator — Navigating Like A Pro in React Native
There is a lot you can do with the React Native Navigator. Here, I will try to go over a few example ...
- list add元素覆盖之前元素问题思考
最近码墙时发现了一个很有意思的问题,定义一个引用对象,如果在循环外面定义对象,在循环里list.add(对象),最后的结果却是所有的对象值都是一样的,即每add一次,都会把之前所有的数据覆盖掉,蛮有趣 ...
- MTU of IPV4 and IPV6
通信术语 最大传输单元(Maximum Transmission Unit,MTU)是指一种通信协议的某一层上面所能通过的最大数据包大小(以字节为单位).最大传输单元这个参数通常与通信接口有关(网络接 ...
- Cisco交换机设置管理IP
需要准备一根CONSOLE线和带串行接口的电脑. (图1) 用CONSOLE线连接好电脑与交换机(交换机的CONSOLE口一般都有表示). 然后按照图1点“开始→程序→超级终端”会弹出来一个窗口(图2 ...
- HDU1016(bfs)
import java.util.Scanner;public class Main1016 { public static void main(String[] args) { Scanner ci ...
- php笔记07:http响应详解(禁用缓存设置和文件下载)
演示如何通过Http响应控制页面缓存,在默认情况下,浏览器是会缓存页面的1.禁用缓存设置 (1).我在...\htdocs\http文件夹,写一个cache.php文件如下: <?php ech ...