一、需求背景

因项目需要，发布的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	分享链接	https://www.yourdomain.com/montage/index.html
imgUrl	分享封面图片	https://www.yourdomain.com/montage/images/cover.jpg
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签名

三、使用方法

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封装