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

时间  2019-11-08
标签 微信 开发 自定义 分享 卡片 node.js node 实现 栏目 Node.js 繁體版
原文   原文链接

本篇主要讲述，如何在微信中打开自家的页面，在而后在用户分享的时候，能由咱们自定义分享出去后，展现的页面卡片中的页面标题、页面描述、页面图片和分享连接。html

此功能，具体的来讲，是：前端

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

以下如所示左侧是我要分享的页面，右侧就是分享出去的页面的卡片，分别是未自定义分享信息和自定义了分享信息：
node

仅在样式上就已经有很所不一样，此外最关键的，是分享的url也能够自定义。web

默认分享的话，你当前页面的url是什么，那么分享出去就是什么，而自定义的状况，则能够本身定义url，有了极大的灵活性，固然也是还有一些限制，但至少，连接的参数是能够彻底自定义的，这个后面文章继续介绍。ajax

首先说一下，完成自定义分享信息的，从无到有的流程：

基础硬件服务：json

  • 须要一个公网能够访问的有效域名：api

    1. 购买域名，并备案，我是在阿里云购买的，备案须要十几个工做日。
    2. 购买ip，而后设置上面的域名，解析到该ip，这个时间能够快到忽略。

  • 拥有本身的服务器，来存放本身页面项目：缓存

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

综上所述，最终我只购买了域名和一个套餐自带公网ip的服务器，服务器用来放置前端项目和后台项目。安全

阿里云ECS：https://cn.aliyun.com/product/ecs服务器

微信公众平台，开发者认证

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

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

    • 有关服务器端和后台项目的配置：

      首先须要说明，因为订阅号的功能比较少，若是只是进行学习，建议在 开发 => 开发者工具中选择使用 公众平台测试账号进行学习性开发，这样可使用全功能的微信服务，配置也比较少。
      下面的配置步骤均是使用本身的帐号须要进行的配置
      1. 开发 => 基本配置 => 公众号开发信息，在这里记下开发者ID(AppID)，接着开通服务，记下开发者密码(AppSecret)，开发中会须要输入。
      2. 设置IP白名单，这里写的是本身的服务器IP地址，由于功能上线后，须要使用这台服务器，经过开发者ID和密码来向微信服务区获取本身服务的access_token

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

        • url：接口地址，好比http://wx.my.com/forWx
        • Token：彻底自定义的一个字符串，至关于个暗号，你的返回值须要这个字符串参与拼装。
        • EncodingAESKey：随机生成便可
        • 消息加解密方式：自选，这里我使用的是明文模式

    • 有关前端项目的配置：

      1. 设置 => 公众号设置 => 功能设置 => 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)
      }

      res.send(obj)
    }).catch(error => {
      res.send(error)
    })
  } catch (error) {
    res.send(error)
  }
})

总体功能实现的步骤和具体代码如上，请酌情参考。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程