微信公众号开发——微信 JS 接口搭建

1、注册微信公众号订阅号（用企业账户注册，个人无法认证）
2、在基本配置中获取开发者AppID和AppSecret
3、在设置中的安全中心将自己的ip列为白名单
获取ip的地址：腾讯IP分享计划
4、获取access_token
地址链接：微信公众平台接口调试工具
5、获取jsapi_ticket
生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。
(1)参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html
(2)用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
（链接中ACCESS_TOKEN需要换成自己的）

image.png

6、微信 JS 接口签名校验工具

image.png

7、
微信JS-SDK说明文档
微信JS-SDK Demo

示例代码：

http://demo.open.weixin.qq.com/jssdk/sample.zip

8、前端

在script加入下面代码

      wx.config({

          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

          appId: 'xxxxxxxx', // 必填，公众号的唯一标识

          timestamp:1414587457, // 必填，生成签名的时间戳

          nonceStr: 'Wm3WZYTPz0wzccnW', // 必填，生成签名的随机串

          signature: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',// 必填，签名，见附录1

          jsApiList: [
              'checkJsApi',
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'onMenuShareQZone'
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

      });

 wx.ready(function(){

          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
          wx.onMenuShareTimeline({

              title: 'xxxxx', // 分享标题

              link: 'xxxxxxx', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

              imgUrl: 'xxxxx', // 分享图标

              success: function () {

                  // 用户确认分享后执行的回调函数

              },

              cancel: function () {

                  // 用户取消分享后执行的回调函数

              }

          });
          wx.onMenuShareAppMessage({

              title: 'xxxx', // 分享标题

              desc: 'xxxxxxxx', // 分享描述

              link: 'xxxxxxxxxxxx', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

              imgUrl: 'xxxxxxxxxxxxxxxx', // 分享图标

              type: '', // 分享类型,music、video或link，不填默认为link

              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

              success: function () {

                  // 用户确认分享后执行的回调函数

              },

              cancel: function () {

                  // 用户取消分享后执行的回调函数

              }

          });

          wx.onMenuShareQQ({
              title: 'xxxxxxx', // 分享标题
              desc: 'xxxxxxxxxxxxxxx', // 分享描述
              link: 'xxxxxxxxxxxxxxxxxxxx', // 分享链接
              imgUrl: 'xxxxxxxxxxxxxxxxxxxxx', // 分享图标
              success: function () {
                  // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                  // 用户取消分享后执行的回调函数
              }
          });
          wx.onMenuShareQZone({
              title: 'xxxxxxxxxxxx', // 分享标题
              desc: 'xxxxxxxxxxxxxxxxxxxxxx', // 分享描述
              link: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // 分享链接
              imgUrl: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // 分享图标
              success: function () {
                  // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                  // 用户取消分享后执行的回调函数
              }
          });
      });
      wx.error(function(res){

          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

      });

存在的问题：

分享给好友或分享朋友圈或分享到群的链接再次分享变成如下：
微信分享会根据分享的不同,为原始链接拼接如下参数:

对于IOS系统会自动增加如下参数：

朋友圈 from=timeline&isappinstalled=0
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0

对于安卓系统会自动添加如下参数：

朋友圈 from=timeline
微信群 from=groupmessage
好友分享 from=singlemessage
结果：标题+分享描述+缩略图无法显示

解决方案：
1、由于动态的URL所导致
2、获得对应的URL签名