微信JS-SDK分享实践

1,295 阅读7分钟

前题

  • 本篇适用范围: 使用微信JS-SDK接口调用,分享朋友圈、朋友、QQ、QQ空间、腾讯微博等,包括分享链接中带有参数。
  • 说明:在Android和iOS端,分享测试均已通过。

开发准备

  1. 已认证公众号。登录微信公众号确认有相关功能使用权限,参见下图

image

  1. 设置JS接口安全域名。确保分享链接域名和设置的安全域名一致

微信公众号中,在【设置---公众号设置---功能设置】,设置JS接口安全域名,如图

image

  1. 获取AppID和AppSecret。在微信公众号中获取该信息并保存,后面签名算法和config配置中会用到。

实现逻辑

  1. 后台通过AppID和AppSecret请求微信接口获取access-token参数,以此access-token参数再次请求微信接口获取jsapi-ticket,并将获取的jsapi-ticket进行加密、校验与其他的参数封装成json格式的数据传送到前台JS页面

  2. 前台获取json数据后,并提供给参数给微信分享接口调用,具体接口为wx.config,wx.ready; 获取微信分享页面的标题和描述,以及分享地址、缩略图地址

JS-SDK使用步骤--后台

参考官方文档 附录1--JS-SDK使用权限签名算法

  1. 获取access-token

AccessToken需要用CorpID和Secret来换取,不同的Secret会返回不同的AccessToken。此处可使用前面获取的AppID和AppSecret,需使用Https协议、Json数据格式、UTF8编码

请求示例:qyapi.weixin.qq.com/cgi-bin/get…

详细内容请参考官方文档-获取access-token

  1. 获取jsapi-ticket

用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket)。

请求示例:qyapi.weixin.qq.com/cgi-bin/get…

  1. 获取签名(signature)

签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳),url(当前网页的URL,不包含#及其后面部分,即前端发起请求传过来的URL参数)。需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。源代码参考如下: 后台签名源代码下载

  1. 封装json参数,返回给前端

将获取的jsapi-ticket进行加密、校验与其他的参数封装成json格式的数据传送到前台JS页面,返回内容可参考wx.config配置中所需内容。

建议

验证签名是否一致,可以使用微信的验证签名工具;建议使用微信web开发者工具调试JS-SDK

JS-SDK使用步骤--前端

官方参考文档

  1. 引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):res.wx.qq.com/open/js/jwe…

备注:支持使用 AMD/CMD 标准模块加载方法加载

  1. 通过config接口注入权限验证配置
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,企业号的唯一标识,此处填写企业号corpid
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录3
});
  1. 通过ready接口处理成功验证
wx.ready(function(){
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
  1. 通过error接口处理失败验证
wx.error(function(res){
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
  1. 示例代码(基于vue)
  • 在调用页面引入JS,例如index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width,initial-scale=1.0">-->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>Index</title>
    <!-- 必须引入的文件-->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    .....
  </body>
</html>
  • index.js
import Vue from 'vue'
import Router from 'vue-router'
import restoreUrl from '../utils/restoreUrl';

Vue.use(Router)

let router = new Router(yourRouter)
// 路由拦截
router.beforeEach((to, from, next) => {

  // 微信分享时,微信会在地址栏添加额外参数
  if (restoreUrl.isWeChatUrl()) {
    window.location.href = restoreUrl.getProjectUrl();
  }
})

export default router
  • restoreUrl.js

多次分享,去除微信添加参数,

export default {
    // 判断地址栏出现微信自己加的参数问题
    isWeChatUrl () {
      // debugger;
        let url = window.location.href;
        let matchResult = url.match(/\?/g);
        // 如果地址栏中,出现了两个问号的话,那么是微信在分享添加了参数
        // 如果地址栏中,出现了form=,那么就是微信分享添加的参数
        return (matchResult ? matchResult.length >= 2 : false) || (/from=/.test(url));
    },
    // 把地址栏的中微信追加的参数去掉,返回我们自己项目的地址
    getProjectUrl () {
        let location = window.location;
        return location.origin + location.pathname + location.hash;
    }
};

  • 进入分享页面时调用onShare()
      // 分享
      onShare() {
        // 传入后台签名URL,域名+当前分享页面路径
        let _WXurl = window.location.origin + window.location.pathname;
        // 定义分享链接,使用encodeURIComponent对传入参数编码,防止在iOS中传入参数编码问题
        // 此处示例传递单个参数
        let _shareLink = window.location.origin+ '/#?'+encodeURIComponent('key')+"="+ encodeURIComponent('value');
        let params = {
          url:_WXurl
        };
        
        //向后台发起请求获得config配置参数
        this.$post('/v1/system/shareUrl', params,{
          // 请求header中,Content-Type需为以下类型,防止分享出去参数丢失
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
          .then((res) => {
            if (res.data.errCode === 0) {
              // 请求接口成功后,
              // 配置config
              wx.config({
               // 开启调试模式时,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                debug: false,
                // 后台返回之前获取的appId
                appId: res.data.body.appId,
                // 必填,生成签名的时间戳
                timestamp: res.data.body.timestamp, 
                // 必填,生成签名的随机串
                nonceStr: res.data.body.nonceStr, 
                // 必填,签名,见附录1
                signature: res.data.body.signature,
                // 必填,需要使用的JS接口列表,所有JS接口列表见附录3
                jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems' ] 
              });

              // 微信检查接口列表
              wx.checkJsApi({
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems'], // 需要检测的JS接口列表
                success: function (res) {
                  console.log(res);
                  // alert('checkJsApi' + res);
                }
              });

              // 隐藏微信右上角弹出菜单中部分功能按钮
              wx.hideMenuItems({
                menuList: ['menuItem:share:qq','menuItem:share:QZone','menuItem:share:weiboApp','menuItem:copyUrl'], // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录4
                success: function (res) {
                  // alert(res);
                }
              });
              
              // 页面加载完成后用户就有可能调用微信的分享,所以当页面ready 完后就加载
              wx.ready(function () {  
                // alert(_shareLink);
                // 分享到朋友圈
                wx.onMenuShareTimeline({  
                  // 分享标题
                  title: '你的梦想', 
                  // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  link: _shareLink, 
                  // 分享图标
                  imgUrl: 'https://www.baidu.com/images/1.png', 
                  // 用户确认分享后执行的回调函数
                  success: function () {
                    console.log('分享回调函数');
                    console.log('shareLink= '+_shareLink);
                    // alert('分享回成功调函数');
                  },
                  // 用户取消分享后执行的回调函数
                  cancel: function () {
                    console.log('取消分享回调函数');
                    // alert('取消分享回调函数');
                  }
                });

                // 分享好友
                wx.onMenuShareAppMessage({  
                  // 分享标题
                  title: '接你的梦想', 
                  // 分享描述
                  desc: '从来都不是梦', 
                  // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  link: _shareLink, 
                  // 分享图标
                  imgUrl: 'https://www.baidu.com/images/1.png', 
                  // 用户确认分享后执行的回调函数
                  success: function () {
                    console.log('分享好友回调函数');
                    console.log('shareLink= '+_shareLink);
                    // alert('分享回好友调函数');
                  },
                  // 用户取消分享后执行的回调函数
                  cancel: function () {
                    console.log('取消分享好友调函数');
                    // alert('取消分享回调函数');
                    // console.log('分享回好友调函数');
                  }
                });
                // 分享多个地址时,可统一传入参数,如 wx.onMenuShareAppMessage(shareData)
                ...
              });
              // 微信预加载失败回调
              wx.error(function (res) {
                console.log(res);
                // alert('失败');
              });
            }
          }).catch(error => {
            // 请求接口失败回调函数
        })

      }

分享成功截图

image

image

本文实践采坑原创,转载请注明出处

参考