前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js处理微信分享配置

js处理微信分享配置

作者头像
流眸
发布2021-03-15 21:25:46
6.5K0
发布2021-03-15 21:25:46
举报

整理一下通过h5做微信分享相关配置。

流程介绍

  1. 公众号配置(AppID、IP白名单、JS接口安全域名)
  2. 网页授权
  3. JSSDK配置使用

1. 公众号配置

登录微信公众号,获取AppID配置白名单,然后配置JS接口安全域名

1.1 获取AppID

登录公众号后,左侧菜单栏选择:开发 => 基本配置,直接复制开发者ID(AppID)即可:

AppID

1.2 配置白名单

注意使用公网IP

配置白名单

1.3 配置JS接口安全域名

左侧菜单栏选择:设置 => 公众号设置:

JS接口安全域名

2. 网页授权

网页授权主要是获取微信openId使用,如果只是用分享操作,本步可以略过。

网页授权介绍

大致步骤是:

  1. 跳微信网页授权链接
  2. 获取code值
  3. 传给后端,后端操作,得到用户openId

2.1 网页授权链接

在配置完前面AppId、白名单及安全域名后,开始处理网页授权。网页授权这一块儿内容主要是后端需要处理的内容较多,前端还是很简单的,仅需要跳入微信链接即可。为什么要走这一步呢因为有些操作,例如微信支付、播放微信录音、获取微信地址、微信卡券、商品、小店等等许多功能必须在微信浏览器汇总打开操作才可以,因此需要跳入微信浏览器及微信链接来处理后续操作。当配置后,链接便只有在微信浏览器中打开才会生效了,不然会提示:

提示

链接如下:

https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appId}&redirect_uri=={$URL}&response_type=code&scope=snsapi_base#wechat_redirect

参数分解

参数

备注

appid

appid值

公众号的唯一标识

redirect_uri

urlEncode

授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理,要与1.3中配置的域名对应

response_type

code

应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )

scope

snsapi_base

重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节

#wechat_redirect

后缀

固定填写即可,无论直接打开还是做页面302重定向时候,必须带此参数

可见,上面需要填入的变量有二,一个是前面回去的AppId,另外一个则是url,需要写的是与配置域名所对应域名下的url,并且要进行urlEncode编码处理使用。

2.2 获取code值

在拿到上述完整链接后,通过window.location.href = ${url}进行网页授权即可。在授权成功后,页面会重定向到自己设置的url页面去,然后在该连接上会有code值,取出即可:

code值

代码语言:javascript
复制
// 取出code值
function getCode() {
    let obj = {};
    let url = window.location.search;   // 从问号 (?) 开始的 URL(查询部分
    let str = url.substring(1,url.length);  // 去掉问号
    let arr = str.split('&');   // 以'&'分割为数组
    // 将所有参数搞成键值对形式放入obj对象
    for(let i = 0; i < arr.length; i ++){
        obj[arr[i].split("=")[0]] = unescape(arr[i].split("=")[1]);
    }
    if(obj.code) {
        return obj.code;
    }
}
getCode();

2.3 换取openId

将拿到的code值传给后端即可,看具体需求决定是否前端使用openId,如果非必要则不在前端获取保存或者由后端加密后传给前端使用。

3. JSSDK配置使用

大致分为五个步骤:

  1. 绑定域名
  2. 引入JS文件
  3. 通过config接口注入权限验证配置
  4. 通过ready接口处理成功验证
  5. 通过error接口处理失败验证

3.1 绑定域名

在步骤 1.3 中已经配置。

3.2 引入JS文件

在需要调用JS接口的页面引入如下JS文件:https://res.wx.qq.com/open/js/jweixin-1.6.0.js

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

3.3 通过config接口注入权限验证配置

配置需要如下几个参数:

代码语言:javascript
复制
wx.config({
    debug: true,    // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '',  // 必填,公众号的唯一标识
    timestamp: '',  // 必填,生成签名的时间戳
    nonceStr: '',   // 必填,生成签名的随机串
    signature: '',  // 必填,签名
    jsApiList: [],  // 必填,需要使用的JS接口列表
});

那这些参数从哪儿来呢?依旧不用担心,依然是交给后端处理,后端返回时间戳、随机串及签名,其他的自己配置即可。

通过后端获取需要进行一个小交互,将此时的链接地址(window.location.href)传给后端即可。

于是就有了上述的除了最后一个以外的所有参数。最后一个jsApiList则是写分享接口,如我们想要分享到朋友圈、QQ、腾讯微博这3个,那就写:

代码语言:javascript
复制
wx.config({
    debug: true,    // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: 'xxx',  // 必填,公众号的唯一标识
    timestamp: 'xxx',  // 必填,生成签名的时间戳
    nonceStr: 'xxx',   // 必填,生成签名的随机串
    signature: 'xxx',  // 必填,签名
    jsApiList: ['checkJsApi,''updateTimelineShareData','updateAppMessageShareData','onMenuShareWeibo'],  // 必填,需要使用的JS接口列表
});

可以发现,我们其实多配置了一个checkJsApi,这个是一个判断配置,可以判断当前客户端版本是否支持指定JS接口。

签名算法所有JS接口列表

3.4 通过ready接口处理成功验证

接下来就可以写分享信息配置了。配置信息一般都是通过wx.ready处理的:

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

例如我们要分享到朋友圈,配置则如下:

代码语言:javascript
复制
// 需在用户可能点击分享按钮前就先调用,在不影响资源处理的情况下尽早配置即可
wx.ready(function () {   
    wx.updateAppMessageShareData({ 
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
            // 操作成功后要做的事儿
        }
    })
}); 

注意:不要出现诱导分享

3.5 通过error接口处理失败验证

同样,一般都是通过wx.error处理失败相关信息:

代码语言:javascript
复制
wx.error(function(res){
  // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

小结

其实微信分享(地理位置、扫一扫、卡券等微信各类接口)都是通过上述步骤配置的,可举一反三,在面对不同需求时通过微信开发文档来进行更为复杂的操作。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-02-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 流眸 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 流程介绍
  • 1. 公众号配置
    • 1.1 获取AppID
      • 1.2 配置白名单
        • 1.3 配置JS接口安全域名
        • 2. 网页授权
          • 2.1 网页授权链接
            • 2.2 获取code值
              • 2.3 换取openId
              • 3. JSSDK配置使用
                • 3.1 绑定域名
                  • 3.2 引入JS文件
                    • 3.3 通过config接口注入权限验证配置
                      • 3.4 通过ready接口处理成功验证
                        • 3.5 通过error接口处理失败验证
                          • 小结
                          相关产品与服务
                          访问管理
                          访问管理(Cloud Access Management,CAM)可以帮助您安全、便捷地管理对腾讯云服务和资源的访问。您可以使用CAM创建子用户、用户组和角色,并通过策略控制其访问范围。CAM支持用户和角色SSO能力,您可以根据具体管理场景针对性设置企业内用户和腾讯云的互通能力。
                          领券
                          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档