首先,需要先进行 微信客户端授权登录。
本篇主要讲述,如何在微信中打开自家的页面,在然后在用户分享的时候,能由我们自定义分享出去后,展示的页面卡片中的页面标题、页面描述、页面图片和分享链接。
此功能,具体的来说,是:
仅在样式上就已经有很所不同,此外最关键的,是分享的url也可以自定义。
默认分享的话,你当前页面的url是什么,那么分享出去就是什么,而自定义的情况,则可以自己定义url,有了极大的灵活性,当然也是还有一些限制,但至少,链接的参数是可以完全自定义的,这个后面文章继续介绍。
下面进入代码阶段。
首先,上面证明服务是自己的部分,我们需要实现一个接口,我用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.echostr // 随机字符串
// 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同级即可
上面的操作,是只要想进行微信公页面开发,必须要有的步骤,一切的基础。
首先顺着功能使用流程,顺一下实现此功能的方法:
url
作为参数,请求自己的后台接口。AppID
和AppSecret
,得到一个有效期为7200秒的Access_token
Access_token
,得到一个有效期同样为7200秒的Ticket
(如果前端请求自己的时候,Ticket
没有过期,就不用这么麻烦请求两次微信服务器了,直接使用即可,Access_token
同理)Ticket
,接着,生成如下几个参数,返回给前端:
Ticket
AppID
下面是前端获取微信授权的方法
// 微信初始化 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 + '×tamp=' + timestamp + '&url=' + url)
}
res.send(obj)
}).catch(error => {
res.send(error)
})
} catch (error) {
res.send(error)
}
})
整体功能实现的步骤和具体代码如上,请酌情参考。