美文网首页
微信公众号开发——微信 JS 接口搭建

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

作者: 秋玄语道 | 来源:发表于2017-11-30 10:28 被阅读0次

    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 type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    在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签名

    相关文章

      网友评论

          本文标题:微信公众号开发——微信 JS 接口搭建

          本文链接:https://www.haomeiwen.com/subject/vgambxtx.html