基于egg.js微信分享API封装

2,482 阅读3分钟

一、需求背景

因项目需要,发布的H5移动端页面中需要支持微信分享,比如分享到朋友圈,分享到朋友等。在借助node.js全栈技术能力情况下,前端研发人员可利用这一特性来进行依业务实际需求的API接口封装。
主要注意地方是:

1.使用到了cgi-bin/token获取token和签名
2.拿到token再调用cgi-bin/ticket/getticket获取ticket
3.拿到ticket之后再依据传入的[noncestr] [timestamp] [url]生成可以与腾讯服务器匹配校验的签名串
4.参考资料: 微信公从平台签名实现
5.本文所指内容使用egg.js框架实现

二、实现步骤

1.定义接口结构

通过需求分析,我们知道这个接口的请求与返回应该包含:分享标题,分享描述,分享图片,分享链接,返回校验签名等内容。详细描述如下:
请求参数:

参数名 参数说明 举例
link 分享链接 www.yourdomain.com/montage/ind…
imgUrl 分享封面图片 www.yourdomain.com/montage/ima…
title 分享标题 你的分享标题
desc 分享描述 你的分享描述

返回结果:

参数名 参数说明 举例
code 状态码 200
message 状态描述 请求成功
data 返回数据 {}
- wxAccountInfo 签名信息 {}
-- appId 微信公众平台分配ID 'd0ddsldf3542'
-- timestamp 签名时间戳 1519265659
-- nonceStr 加密字符串 M4vhCXM
- wxShareInfo 透传分享信息
-- ... 透传分享信息

2.定义路由

假设我们的接口名字定义为/api/service/getWeChatSignature那么需要进行以下内容的路由配置。

其中:app.controller.api.index.index.getWeChatSignature为控制器路径。

3.公共配置

微信分享签名配置,需要抽离到外部公共配置文件中,对于egg.js框架来说,约定于配置,我们则只需要将相关配置放置于config/config.default.js

4.token获取

接下来便是实现controller与业务相关的功能开发,利用egg.js servicecontroller理念,我们将调用微信接口逻辑部份抽离至单独的service

5.获取TICKET

6.签名实现

获取了token与ticket之后则进入关键一步,签名生成实现步骤。 需要 jsapi_ticket noncestr timestamp url参与签名 这里的noncestr需要注意需要生成随机字符串

timestamp则需要注意单位是,因此需要进行转换

最后,将以上几个参数进行sha1签名

三、使用方法

1.访问地址

http://localhost:7001/api/service/getWeChatSignature

2.调用方式

POST

3.请求参数

{
     link: 'https://www.yourdomain.com/montage/index.html',              // 分享链接
     imgUrl: 'https://www.yourdomain.com/montage/images/cover.jpg',      // 分享封面图片
     title: '你的分享标题',                                               // 分享标题
     desc: '一些描述...'                                                  // 分享描述
}

4.返回结果

{
    "code":200,
    "message":"请求成功",
    "data":{
        "wxAccountInfo":{
            "appId":"your app id",      // appid
            "timestamp":1519265659,     // 时间截
            "nonceStr":"M4vhCXM",       // 加密字符串
            "signature":"your signature no like.. f5617cf42f"    // 比对签名
        },
        "wxShareInfo":{
            "imgUrl":"https://mp.yourdomain.com/montage/images/cover.jpg",  // 分享封面地址
            "link":"https://mp.yourdomain.com/montage/index.html",          // 分享链接地址
            "desc":"一此描述。。。",                                         // 分享描述
            "title":"分享标题"                                              // 分享标题  
        }
    }
}

四、实现效果

1.PostMan模拟调用

2.前端模拟调用(本文以create.js调用网络为例,其它比如ajax, axios使用方式本文不作讨论)

在页面模板中加入微信js-sdk

调用接口,传入分享内容

调用接口返回后注册分享内容

相关的示例源代码已上传到Github:

基于egg.js微信分享API封装