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

1、需求背景

因项目须要，发布的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框架实现

2、实现步骤

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 service与controller理念，咱们将调用微信接口逻辑部份抽离至单独的service中

5.获取TICKET

6.签名实现

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

timestamp则须要注意单位是 秒,所以须要进行转换

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

3、使用方法

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":"分享标题"                                              // 分享标题 
        }
    }
}
复制代码

4、实现效果

1.PostMan模拟调用

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

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

调用接口，传入分享内容

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

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

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