必要条件之注册微信公众号

既然是微信网页分享，肯定首先注册一个微信公众号，而且是可以认证，且已经认证后的公众号。因为只有认证后的公众号才能申请分享功能。

然后要有一个域名，通过公众号后台设置与开发-公众号设置-功能设置来配置JS接口安全域名。微信分享出去的合法链接都是挂载在域名下的，服务器的ip名是不行的，所以要有一个已经备过案的合法域名，当然，一个自然月内最多可修改并保存五次。

进入纯开发阶段

1.引入JS文件依赖

在你需要开发的项目下引入微信js文件

//(支持https）
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
//如需进一步提升服务稳定性，当上述资源不可访问时，可改访问
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.进行分享配置（主要代码）

通过后端接口，获取分享必要字段：timestamp，nonceStr，signature

//当前页面的url地址 
var currUrl = location.href.split('#')[0];
var timestamp;
var nonceStr;
var appId = "1234567899";//第一个阶段我们获取到的AppID
var signature;

$(function(){
   $.ajax({
      cache: true,
      type: "POST",
      url:"", // 后端接口名字
      data:{
        "url":currUrl  //配置当前页面的url地址
      },
      async: false,
      success: function(data) {
         var json=eval(data);
         timestamp = json[0].timestamp;
         signature = json[0].signature;
         nonceStr = json[0].nonceStr;
         wx.config({  //通过config接口注入权限验证配置
            debug: false, //是否开启调试模式
            appId: appId, //必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, //必填，生成签名的随机串
            signature: signature, // 必填，签名
            jsApiList: [ //必填，需要使用的JS接口列表
                'updateAppMessageShareData',  //新版
                'updateTimelineShareData'     //新版
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareQZone',
                'onMenuShareWeibo'
            ]

         })

      }
   })
})

分享内容及格式

下面就是要配置分享的内容及格式目前新版的分享有两种：updateAppMessageShareData（分享给朋友及分享到QQ），updateTimelineShareData（分享到朋友圈及分享到QQ空间）

其中旧版的目前仍然还支持，但官方说即将不支持，旧版的分享划分的比较详细：onMenuShareTimeline（分享到朋友圈），onMenuShareAppMessage（分享给朋友），onMenuShareQQ（分享到QQ），onMenuShareQZone（分享到QQ空间），onMenuShareWeibo（分享到微博）。其中旧版和新版各取所需，去其中一个即可。

新版

wx.ready(function(){
   // 分享给朋友及分享到QQ
   wx.updateAppMessageShareData({
      title: "这是分享标题", // 分享标题
      desc: "分享显示的描述", // 分享描述
      link: "分享显示的链接", // 
      imgUrl:"分享显示的图标", // 
      sucess:function(res){}, //用户点击分享后执行的回调函数
      cancel:function(){}
   })

   // 分享到朋友圈及分享到QQ空间
   wx.updateTimelineShareData({
      title: "这是分享标题", // 分享标题
      desc: "分享显示的描述", // 分享描述
      link: "分享显示的链接", // 
      imgUrl:"分享显示的图标", // 
      sucess:function(res){}, //用户点击分享后执行的回调函数
      cancel:function(){}
   })
})

旧版

wx.ready(function(){
   // 分享到朋友圈
    wx.onMenuShareTimeline({
       title: "这是分享标题", // 分享标题
       desc: "分享显示的描述", // 分享描述
       link: "分享显示的链接", // 
       imgUrl:"分享显示的图标", // 
       sucess:function(res){}, //用户点击分享后执行的回调函数
       cancel:function(){}
    })

   // 分享给朋友
   wx.onMenuShareAppMessage({
      title: "这是分享标题", // 分享标题
      desc: "分享显示的描述", // 分享描述
      link: "分享显示的链接", // 
      imgUrl:"分享显示的图标", // 
      sucess:function(res){}, //用户点击分享后执行的回调函数
      cancel:function(){}
   })

   // 分享到QQ
   wx.onMenuShareQQ({
      title: "这是分享标题", // 分享标题
      desc: "分享显示的描述", // 分享描述
      link: "分享显示的链接", // 
      imgUrl:"分享显示的图标", // 
      sucess:function(res){}, //用户点击分享后执行的回调函数
      cancel:function(){}
   })

   // 分享到QQ空间
   wx.onMenuShareQZone({
      title: "这是分享标题", // 分享标题
      desc: "分享显示的描述", // 分享描述
      link: "分享显示的链接", // 
      imgUrl:"分享显示的图标", // 
      sucess:function(res){}, //用户点击分享后执行的回调函数
      cancel:function(){}
   })

   // 分享到微博
   wx.onMenuShareWeibo({
      title: "这是分享标题", // 分享标题
      desc: "分享显示的描述", // 分享描述
      link: "分享显示的链接", // 
      imgUrl:"分享显示的图标", // 
      sucess:function(res){}, //用户点击分享后执行的回调函数
      cancel:function(){}
   })

})