使用微信JS-SDK 实现 自定义 分享 功能

微信PC端点击页面,转发给朋友。

使用微信JS-SDK 实现 自定义 分享 功能

开发前 ,分享之后 ,链接 样式如下:

使用微信JS-SDK 实现 自定义 分享 功能

 

格式化之后,样式如下:

使用微信JS-SDK 实现 自定义 分享 功能

 

 

页面代码:

<!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>
       &nbsp; &nbsp;&nbsp;电话:<a href="tel:{$:source.LinkPhone}">{$:source.LinkPhone}</a>&nbsp;&nbsp;&nbsp;<a href="tel:{$:source.Phone}">{$:source.Phone}</a><br>
        &nbsp;&nbsp;&nbsp;&nbsp;电子邮箱: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

使用微信JS-SDK 实现 自定义 分享 功能

上一篇:栈的实现实例(C语言)


下一篇:微信公众账号开发入门