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的分享的一些东西，百度也能找到，零零总总的自己总结下，还是能省下不少功夫吧！

posted @ 2016-12-30 14:26  谢幕ゾ华丽  阅读(479)  评论(0)  编辑  收藏  举报