微信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>
帮助文档: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html