H5页面微信分享和手Q分享设置
RT:
一、 手Q分享：
如下代码所示：设置好 description，name,image,即可，唯一注意的是image最好是200*200，要不然过小不美观，过大加载太慢
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta itemprop="name" content="我邀请您加入">
<meta itemprop="description" content="我们都在用轻松发呗，工资、考核等信息及时送达，方便快捷又安全，赶紧用起来吧。">
<meta itemprop="image" content="http://www.zhidianbao.cn/fbwap-test/wap/images/fblogo.png">
</head>
二、 微信分享：
1. 主要是依赖于微信的JS-JDK，
"http://res.wx.qq.com/open/js/jweixin-1.0.0.js",
判断页面是否是微信内置浏览器
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
if (isWeiXin()) {//升级上去使用此方法 授权地址只能是无端口号的完整域名 本地有端口映射的无法直接调试 微信
$LAB.script([
"http://res.wx.qq.com/open/js/jweixin-1.0.0.js",
"js/wxshareload.js"
]).wait(function () { });
}
2. 引入的 wxshareload.js，如下所示
//需要调用接口
var jsApiList = ['onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]; var linkurl = window.location.href;//分享跳转连接
var fx_title=document.title;//标题
var fx_desc = " 这里输入标书";//描述
var fx_imgUrl="http://www.xxxx.cn//xx.png";//分享图片
//分享内容修改
//这个地方是需要从服务端获取微信的相关配置信息的
wxconfset(ding_conf);
function wxconfset(ding_conf){
wx.config({
debug: false,
appId:ding_conf.appId, //微信公众号的appId
timestamp:ding_conf.timeStamp,//微信公众号的timeStamp
nonceStr:ding_conf.nonceStr,微信公众号nonceStr
signature:ding_conf.signature,微信公众号signature
jsApiList:jsApiList
});
wx.error(function(res){ // alert("验证失败" +JSON.stringify(res));
});
/*--------------------分享定义----------------*/
wx.ready(function () {
var shareData={
title:fx_title,
desc:fx_desc,
link:linkurl,
imgUrl:fx_imgUrl
};
wx.onMenuShareTimeline({
title: shareData.title,
link: shareData.link,
imgUrl: shareData.imgUrl,
trigger: function (res) { },
success: function (){
// alert('分享成功！');
},
cancel: function () {
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
wx.onMenuShareAppMessage({
title: shareData.title,
desc: shareData.desc,
link: shareData.link,
imgUrl: shareData.imgUrl,
trigger: function (res) {
},
success: function (){
// alert('分享成功！');
},
cancel: function () {
// alert('取消分享！');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
wx.onMenuShareQQ({
title: shareData.title,
link: shareData.link,
desc: shareData.desc,
imgUrl: shareData.imgUrl,
trigger: function (res) { },
complete: function (res) {
// alert(JSON.stringify(res));
},
success: function (res) { },
cancel: function (res) {
// alert('已取消');
},
fail: function (res) {
// alert(JSON.stringify(res));
}
}); wx.onMenuShareWeibo({
title: shareData.title,
link: shareData.link,
desc: shareData.desc,
imgUrl: shareData.imgUrl,
trigger: function (res) {
},
success: function (){
// alert('分享成功！');
},
cancel: function () {
// alert('取消分享！');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
})
}
至此完成，这虽然只是H5的分享的一些东西，百度也能找到，零零总总的自己总结下，还是能省下不少功夫吧！
H5页面微信分享和手Q分享设置的更多相关文章
- 自定义页面微信、微博、QQ分享效果
几行简单的分享代码既可以实现,先看下效果: 第一步:页面因为结构代码 <div id="freebtn"> <ul> <li class=" ...
- 移动H5页面微信支付踩坑之旅（微信支付、单页面路由模拟、按钮加锁、轮询等常见功能）
开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...
- iOS 和 H5 页面交互（WKWebview 和 UIWebview cookie 设置）
iOS 和 H5 页面交互(WKWebview 和 UIWebview cookie 设置) 主要记录关于cookie相关的坑 1. UIWebview 1. UIWebview 相对比较简单 直接通 ...
- 如何判断一个 APP页面是否是H5页面
1.无网络断开网络,显示404或则错误页面的是H5 2.页面布局a.在手机设置.开发者选项中开启显示布局边界功能:b.进入应用查看布局边界:c.原生应用可以看到各个控件的布局边界,H5只有整个页面的一 ...
- 如何判断一个 APP页面是否是H5页面（转载）
1.无网络断开网络,显示404或则错误页面的是H5 2.页面布局a.在手机设置.开发者选项中开启显示布局边界功能:b.进入应用查看布局边界:c.原生应用可以看到各个控件的布局边界,H5只有整个页面的一 ...
- robotframework_如何用Chrome模拟手机打开H5页面
由于公司目前的产品大部分都是APP端的H5页面,APP原生页面很少,测试H5页面如果去搭建appium或者macaca这类自动化平台太费时,太重而不能快速落地:与自动化的目标:提高测试效率相悖.但如果 ...
- 微信小程序内联h5页面，实现分享
在小程序内直联h5的页面(pages/webview/webview.js),该页面为<web-view>的容器,使用<web-view>组件 <web-view wx: ...
- H5 页面在微信端的分享
微信分享,咋一看好像很复杂,实则非常简单.只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为: https://mp.weixin.qq.com/wi ...
- js-禁止微信H5页面点击右上角菜单时出现“复制链接”，且分享仅支持微信分享
禁止微信H5页面点击右上角菜单时出现“复制链接”,这个问题已经影响到我很久很久了,起码有2年了, 昨天写H5活动的时候,需求有一个是:可分享,但是禁止复制活动链接, 这一下,就逼我务必好好研究研究了. ...
随机推荐
- ★Kali信息收集★8.Nmap ：端口扫描
★Kali信息收集~ 0.Httrack 网站复制机 http://www.cnblogs.com/dunitian/p/5061954.html ★Kali信息收集~ 1.Google Hackin ...
- ASP.NET MVC系列：Model
1. Model任务 Model负责通过数据库.AD(Active Directory).Web Service及其他方式获取数据,以及将用户输入的数据保存到数据库.AD.Web Service等中. ...
- 生成任意长度的随机数 JS
1.Math.random().toString(36).substr(2); 结果:ywv6cnpkliahj4tep0 2. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- UploadFile控件，提交图片后，页面预览显示刚刚提交的图片
最近在用asp.net来写一个新闻系统后台,然后由于不用用网上的flash插件来上传图片什么的,我就用asp.net的控件来写,但是控件总归有一些用的不够灵活的地方.这次测试提出,文章在修改的时候,需 ...
- geotrellis使用（二十七）栅格数据色彩渲染
目录 前言 复杂原因及思路分析 实现过程 总结 一.前言 今天我们来研究一下这个看似简单的问题,在地理信息系统中颜色渲染应当是最基本的操作和功能,比如我们将一幅Landsat数据拖拽到A ...
- Linux平台oracle 11g单实例 安装部署配置 快速参考
1.重建主机的Oracle用户 组 统一规范 uid gid 以保证共享存储挂接或其他需求的权限规范 userdel -r oracle groupadd -g 7 oinstall groupadd ...
- .net汉字转字母
目前手上有一个需要实现:将用户输入的姓名转换成汉语拼音. 使用枚举,既麻烦又易出错,发现有一个微软拼音转换工具类ChnCharInfo.dll,在此记录下: 首先需要引入此dll, 链接: http: ...
- PyQt4入门学习笔记（一）
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
- 周末惊魂：因struts2 016 017 019漏洞被入侵，修复。
入侵(暴风雨前的宁静) 下午阳光甚好,想趁着安静的周末静下心来写写代码.刚过一个小时,3点左右,客服MM找我,告知客户都在说平台登录不了(我们有专门的客户qq群).看了下数据库连接数,正常.登录阿里云 ...
- HTML5 数据集属性dataset
有时候在HTML元素上绑定一些额外信息,特别是JS选取操作这些元素时特别有帮助.通常我们会使用getAttribute()和setAttribute()来读和写非标题属性的值.但为此付出的代价是文档将 ...