微信PC端点击页面,转发给朋友。
开发前 ,分享之后 ,链接 样式如下:
格式化之后,样式如下:
页面代码:
<!DOCTYPE html>
<vt:function var="source" method="GetBySingle" args="$Company" type="Business.BLL.Sys.CompanyService" />
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title>联系我们</title>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" /><!--关闭自动识别号码-->
<meta name="viewport" content="target-densitydpi=get-target-densitydpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="{$:WebRoot}Resource/wzsWeb/css/index.css">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="{$:WebRoot}Resource/wzsWeb/js/jquery-1.9.1.min.js"></script>
<script>
var title = '联系我们';
// 分享图标
var imgUrl = window.location.protocol + "//" + window.location.hostname+'/Images/zj.jpg';
// 分享描述
var desc = '地址:{$:source.Address} 电话:{$:source.LinkPhone}';
// 分享链接
var link = window.location.href;
//初始化JSSDK
function initJSSDK(appId, timestamp, nonceStr, signature, debug) {
//所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用)。A组 B组
wx.config({
debug: debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId,// 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串 nonceStr
signature: signature, // 必填,签名,见附录1
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
}
//config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要 放在ready函数中。
wx.ready(function () {
//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
title: title, // 分享标题
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
assist("transmit");
}
});
//获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
assist("transmit");
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//获取“分享到QQ”按钮点击状态及自定义分享内容接口
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
assist("transmit");
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
wx.onMenuShareWeibo({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
assist("transmit");
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
//config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
wx.error(function (res) {
alert(res.errMsg);
});
$(function(){
$.ajax({
type: 'POST',
data: {companyId:"{$:Company}",url:link},
url: "{$:WebRoot}/Service/ContactUs/GetJssdk",
success: function (data) {
//初始化JSSDK
initJSSDK(data.appId, data.timestamp, data.nonceStr, data.signature, false);
},
error: function () {
//alert("非常抱歉,加入购物车失败!")
}
});
});
function toProduct(productid) {
window.location.href = "{$:WebRoot}PlugIn/Template/Template?id=130819174575087458&bizid=" + productid;
}
function gourl(url) {
window.location.href = "{$:WebRoot}/PlugIn/Template/Template?id=" + url;
}
</script>
</head>
<body style="background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#DDD), to(#DDD));">
<div class="top-but">
<ul>
<li>
<a href="tel:{$:source.LinkPhone}">拨号</a>
</li>
<li>
<a href="http://map.qq.com/m/place/info/pointx={$:source.X}&pointy={$:source.Y}&level=18&word={$:source.Name}&addr={$:source.Address}?from=wap-map1.0&referer=weixinmp_profile">导航</a>
</li>
<li>
<a href="http://weixin.5iyaya.com/PlugIn/Template/Template?id=130888591685512339">客服</a>
</li>
</ul>
</div>
<div class="map-img" style="position: fixed; bottom:40px;">
<p>
诊所地址:{$:source.Address}<br>
电话:<a href="tel:{$:source.LinkPhone}">{$:source.LinkPhone}</a> <a href="tel:{$:source.Phone}">{$:source.Phone}</a><br>
电子邮箱:82094995@qq.com<br>
<!-- 公司网页:<a href="http://www.baidu.com">www.baidu.com</a>-->
</p>
</div>
<iframe src="http://map.qq.com/m/place/info/pointx={$:source.X}&pointy={$:source.Y}&level=18&word={$:source.Name}&addr={$:source.Address}?from=wap-map1.0&referer=weixinmp_profile" frameborder="0" style="width:100%;height:350px;"/>
</body>
</html>
注意: 重写分享事件之后, 测试的时候,要注意微信内置浏览器缓存的问题, 无论是PC端 、还是手机端 微信内置浏览器,本人都没有找到清理缓存的好方法,最后测试是使用笨方法,换手机。发现更好的方法再补上。