cc's web
0%

h5链接微信卡片分享

发表于 更新于

准备工作

参考文档

公众号（非个人）

个人公众号无法微信认证，无法使用分享接口

  • 1 设置JS接口安全域名
    登录公众号
    在侧边栏找到设置与开发>公众号设置>功能设置>JS接口安全域名
    将验证文件上传至填写域名或路径指向的web服务器
    填写域名，不需要http(s)://,如：www.xxx.com 图1
    图2
  • 2 获取appID和appSecret以及配置ip白名单
    在侧边栏找到设置与开发>基本配置>公众号开发信息
    图3

后端操作

说明

语言：go
access_token和jsapi_ticket过期时间都是7200s需要定时获取缓存下来
timestamp 当前时间戳精确到秒
nonceStr 随机字符串
signature 参考后续代码

获取access_token

1
2
url := fmt.Sprintf("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s", appid, appsecret)
// get请求上诉地址即可获取access_token

获取jsapi_ticket

1
2
url := fmt.Sprintf("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi", access_token)
// get请求上诉地址即可获取jsapi_ticket

获取signature

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//1.对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用 URL 键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1    
//2. 对string1进行sha1签名，得到signature

//url 是前端传过来的参数
/*  //js
    let url = encodeURIComponent(location.href.split('#')[0]);  
*/
/* //go
    url, _ := url.QueryUnescape(c.Query("url"))
*/
func Hsa1(str string) string {
    h := sha1.New()
    h.Write([]byte(str))
    tmp := hex.EncodeToString(h.Sum([]byte("")))
    return tmp
}
str := fmt.Sprintf(`jsapi_ticket=%s&noncestr=%s&timestamp=%s&url=%s`, jsapi_ticket, noncestr, timestamp, url)
signature := Hsa1(str)

jsApiList

使用到api名称，eg: [“updateAppMessageShareData”,”updateTimelineShareData”]
文档

收尾工作

将appId，timestamp，nonceStr，signature,jsApiList返回给前端

前端操作

引入js文件

1
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

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

1
2
3
4
5
// data 是后端返回的数据
wx.config({
    debug: true,
    ...data,
});

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
 wx.ready(function () {
            //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
                title: "title", // 分享标题
                desc: "desc", // 分享描述
                link: "https://www.xx.con", // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                imgUrl: "https://xxxx.com/xx.png", // 分享图标
                success: function () {
                    // 设置成功
                },
            });
        });

测试

debug为true，手机端会alert，pc端会log
成功会alert config:ok
其他错误码可以参考文档
test