微信开发-自定义分享卡片-node.js实现

0次阅读

共计 6548 个字符，预计需要花费 17 分钟才能阅读完成。

本篇主要讲述，如何在微信中打开自家的页面，在然后在用户分享的时候，能由我们自定义分享出去后，展示的页面卡片中的页面标题、页面描述、页面图片和分享链接。
此功能，具体的来说，是：

在微信打开自家的页面
点击右上角微信的功能按钮，出现功能菜单
点击分享给好友、朋友圈、QQ 好友等
选择对应的好友，发送
打开对应的好友聊天界面，可以看到，被分享的页面卡片，在展示上和默认的样式有所不同。

如下如所示左侧是我要分享的页面，右侧就是分享出去的页面的卡片，分别是未自定义分享信息和自定义了分享信息：
仅在样式上就已经有很所不同，此外最关键的，是分享的 url 也可以自定义。
默认分享的话，你当前页面的 url 是什么，那么分享出去就是什么，而自定义的情况，则可以自己定义 url，有了极大的灵活性，当然也是还有一些限制，但至少，链接的参数是可以完全自定义的，这个后面文章继续介绍。
首先说一下，完成自定义分享信息的，从无到有的流程：
基础硬件服务：

需要一个公网可以访问的有效域名：

购买域名，并备案，我是在阿里云购买的，备案需要十几个工作日。
购买 ip，然后设置上面的域名，解析到该 ip，这个时间可以快到忽略。

拥有自己的服务器，来存放自己页面项目：
我还是在阿里云购买购买服务器，这个花费最大，几百元一年的使用权。而且这个服务器，本质就是一台电脑，是电脑就有配置，我目前只是自己学习使用，配置几乎是最低的，而且购买的套餐自带公网 ip，这么一来我连上面购买 ip 的钱也省了。

综上所述，最终我只购买了域名和一个套餐自带公网 ip 的服务器，服务器用来放置前端项目和后台项目。
阿里云 ECS：https://cn.aliyun.com/product/ecs
微信公众平台，开发者认证

打开微信公众平台 https://mp.weixin.qq.com/，使用邮箱注册，注意，一个邮箱只能注册一个微信公众平台账号，一个账号只能选择一种账号分类且不能更改，这里一定要慎重，这里选择订阅号。
可选个人类型、企业类型等等，其中，个人类型是不没有分享定制功能的，但企业类型我又不符合。。。最终我还是选择的个人类型，因为即使我的账号没有权限，但微信公众号里面，提供一个功能全开的测试账号，使用测试账号可以进行学习和测试，还是没问题的。
填写信息，绑定微信，注册完成，登录进去。

为了进行开发，需要在这里和你的后台项目和前端项目进行对应的配置，让微信确认后台项目和前台项目都是你的之后，才会提供服务。

有关服务器端和后台项目的配置：
首先需要说明，由于订阅号的功能比较少，如果只是进行学习，建议在开发 => 开发者工具中选择使用公众平台测试帐号进行学习性开发，这样可以使用全功能的微信服务，配置也比较少。下面的配置步骤均是使用自己的账号需要进行的配置

开发 => 基本配置 => 公众号开发信息，在这里记下开发者 ID(AppID)，接着开通服务，记下开发者密码 (AppSecret)，开发中会需要输入。
设置 IP 白名单，这里写的是自己的服务器 IP 地址，因为功能上线后，需要使用这台服务器，通过开发者 ID 和密码来向微信服务区获取自己服务的 access_token

进行下面的后台项目，目的是让微信确定这个后台项目是你的，检验方法是微信发起一个 get 请求，你返回正确的返回值，启用此配置时调用：

url：接口地址，比如 http://wx.my.com/forWx

Token：完全自定义的一个字符串，相当于个暗号，你的返回值需要这个字符串参与拼装。
EncodingAESKey：随机生成即可
消息加解密方式：自选，这里我使用的是明文模式

有关前端项目的配置：

设置 => 公众号设置 => 功能设置 => JS 接口安全域名在此处添加你的要使用微信 sdk 功能的网站的域名，比如 wx.qq.com 或者 wx.qq.com/user，最多可写三个，且需要验证。

> 验证的方式，就是将一个微信提供的 txt 文件，放在此域名对应的放置于服务器中的 web 项目的访问根目录中，需要和主文件（大部分默认为 “`index.html“`）放在同一级，当提交的时候，微信会进行访问，来获取文件，确认此域名是你的。

配置完成后，就可以进行开发了。

下面进入代码阶段。
证明后台项目和前端项目时我自己的
首先，上面证明服务是自己的部分，我们需要实现一个接口，我用 http://wx.my.com/forWx 打的比方，那么为了启用配置，我需要实现 /forWx 给微信调用，下面是代码：
node 的基础环境搭建省略，这里只写接口内部方法了，关键是参数加密拼装
const crypto = require(‘crypto’) // 引入加密模块
const config = require(‘./config’) // 引入配置文件
// 提供给微信调用
server.get(‘/forWx’, function (req, res) {
res.header(‘Access-Control-Allow-Origin’, ‘*’)
// 1. 获取微信服务器 Get 请求的参数 signature、timestamp、nonce、echostr
let signature = req.query.signature // 微信加密签名
let timestamp = req.query.timestamp // 时间戳
let nonce = req.query.nonce // 随机数
let echostr = req.query.echost // 随机字符串

// 2. 将 token、timestamp、nonce 三个参数进行字典序排序，其中 token 就是设置在微信页面中的那个自定义字符串
let array = [config.token, timestamp, nonce]
array.sort()

// 3. 将三个参数字符串拼接成一个字符串进行 sha1 加密
let tempStr = array.join(”)
const hashCode = crypto.createHash(‘sha1’) // 创建加密类型
let resultCode = hashCode.update(tempStr, ‘utf8’).digest(‘hex’)

//4. 开发者获得加密后的字符串可与 signature 对比，标识该请求来源于微信
if (resultCode === signature) {
res.send(echostr)
} else {
res.send(‘mismatch’)
}
})
完成，上面是证明服务器是我的，后面还需要证明前端项目是我的，这个就跳过了，因为太简单，直接下载那个文件，放到自己服务器中，前端项目的 index.html 同级即可
上面的操作，是只要想进行微信公页面开发，必须要有的步骤，一切的基础。

开始正式开发
首先顺着功能使用流程，顺一下实现此功能的方法：

用户在微信打开页面后，立即或者通过方法触发 ajax，把当前 url 作为参数，请求自己的后台接口。
后台请求微信服务器，发送自己的 AppID 和 AppSecret，得到一个有效期为 7200 秒的 Access_token

后台再次请求微信服务器，发送 Access_token，得到一个有效期同样为 7200 秒的 Ticket（如果前端请求自己的时候，Ticket 没有过期，就不用这么麻烦请求两次微信服务器了，直接使用即可，Access_token 同理）

后台有了可以使用的 Ticket，接着，生成如下几个参数，返回给前端：

timestamp：当前时间戳
url：前端传过来的 url
jsapi_ticket：获取的 Ticket

appId：自己的 AppID

signature：使用 sh1 加密的 noncestr、timestamp、url、jsapi_ticket 的字符串

前端终于拿到了返回值，然后初始下微信服务（当然初始化微信服务之前，需要引入微信 SDK 的 js 文件），初始化服务，需要用到以上参数，同时，可以配置你要监听的用户操作，比如我们的关键 — 分享页面！
微信配置执行后，书写配置完成的回调函数，这个回调函数里，可以定义用户分享页面时的页面参数，当此页面被分享出去之后，展示的分享卡片，就是我们定义的内容啦！
当然，不仅仅是分享页面，发朋友圈和其他一些也是可以配置，还有更多的配置项，都可以开始进行了！

下面是前端获取微信授权的方法
// 微信初始化 sdk
let wxInitSdk = function() {
let myUrl = window.location.href.split(‘#’)[0]
console.log(‘ 我的 url: ‘, myUrl)
$.ajax({
url: BASE_URL + ‘/getsign’,
type: ‘post’,
data: {
url: myUrl,
},
success: function(data) {
console.log(data)
wx.config({
debug: false, // 开启调试模式, 开发时可以开启
appId: data.appId, // 必填，公众号的唯一标识由接口返回
timestamp: data.timestamp, // 必填，生成签名的时间戳由接口返回
nonceStr: data.noncestr, // 必填，生成签名的随机串由接口返回
url: data.url, // 必填，生成签名的随机串由接口返回
signature: data.signature, // 必填，签名由接口返回
jsApiList: [
‘updateAppMessageShareData’, // 分享
] // 此处填你所用到的方法
});
// 方法监听
wx.ready(function () {
console.log(‘ 初始化成功 ’)
wx.updateAppMessageShareData({
title: ‘ 咱的标题 ’, // 分享标题
desc: ‘ 咱的描述 ’, // 分享描述
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: window.location.protocol + ‘//’ + window.location.hostname + ‘/img.jpg’, // 分享图标
type: “link”, // 分享类型,music、video 或 link，不填默认为 link
dataUrl: “”, // 如果 type 是 music 或 video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
console.log(“ 分享配置完成 ”);
},
cancel: function () {
// 用户取消分享后执行的回调函数
console.log(‘ 分享取消 ’)
}
});
})
wx.error(function (res) {
console.log(‘ 初始化失败 ’)
console.log(res)
})
},
error: function(error) {
console.log(‘ 错误 ’)
}
})
}
下面是 node 端的一系列方法
const sha1 = require(‘sha1’)
const config = require(‘./config’) // 引入配置文件

// 临时缓存
const myCache = {
access_token: {
setedTime: 0, // 数据设置的时间
val: undefined, // 数据的值
},
jsapi_ticket: {
setedTime: 0, // 数据设置的时间
val: undefined, // 数据的值
},
}

// 获取 access_token
const getAccess_token = () => {
// access_token 未过期
if (myCache.access_token.val && (Math.floor(Date.now()) – myCache.access_token.setedTime) / 1000 < 7100) {
return Promise.resolve(myCache.access_token.val)
} else {// access_token 过期了
return new Promise((resolve, reject) => {
request(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appId}&secret=${config.appSecret}`, function (error, response, body) {
if (!error && response.statusCode == 200) {
let tokenMap = JSON.parse(body)
// 缓存 access_token
myCache.access_token.setedTime = Math.floor(Date.now())
myCache.access_token.val = tokenMap.access_token
resolve(tokenMap.access_token)
} else {
reject(error)
}
})
})
}
}

// 获取 Ticket
const getJsapi_ticket = () => {
// 缓存的签名尚未过期 — 微信规定过期时间为 7200 秒，这里自己设置 7100 秒，留 100 秒的延迟
if (myCache.jsapi_ticket.val && (Math.floor(Date.now()) – myCache.jsapi_ticket.setedTime) / 1000 < 7100) {
return Promise.resolve(myCache.jsapi_ticket.val)
} else {// 已过期，重新获取
return new Promise((resolve, reject) => {
// 先获取 token
utils.getAccess_token().then(access_token => {
request(‘https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=’ + access_token + ‘&type=jsapi’, function (error, resp, json) {
if (!error && resp.statusCode == 200) {
let ticketMap = JSON.parse(json)
// 缓存 ticket
myCache.jsapi_ticket.setedTime = Math.floor(Date.now())
myCache.jsapi_ticket.val = ticketMap.ticket
resolve(ticketMap.ticket)
} else {
reject(error)
}
})
}).catch(error => reject(error))
})
}
}

// 我自己的前端调用，获取微信签名
server.post(‘/getsign’, (req, res) => {
try {
params = req.body
if (!params && !params.url) return res.send(‘please set url of page’)
let url = params.url
// 获取 ticket
getJsapi_ticket().then(jsapi_ticket => {
let num = Math.random()
let noncestr = num.toString(32).substr(3, 20) // 随机字符串
let timestamp = Math.floor(Date.now() / 1000) // 精确到秒
let obj = {
noncestr,
timestamp,
url,
appId: config.appId,
jsapi_ticket,
signature: sha1(‘jsapi_ticket=’ + jsapi_ticket + ‘&noncestr=’ + noncestr + ‘&timestamp=’ + timestamp + ‘&url=’ + url)
}