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

时间: 2019-03-17阅读: 1738标签: 微信

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

此功能,具体的来说,是:

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

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


仅在样式上就已经有很所不同,此外最关键的,是分享的url也可以自定义。

默认分享的话,你当前页面的url是什么,那么分享出去就是什么,而自定义的情况,则可以自己定义url,有了极大的灵活性,当然也是还有一些限制,但至少,链接的参数是可以完全自定义的,这个后面文章继续介绍。

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

基础硬件服务:

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

    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)
  }
})

整体功能实现的步骤和具体代码如上,请酌情参考


来自:https://segmentfault.com/a/1190000018534273


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/2412

微信内打开外部默认浏览器下载app

使用微信打开网址时,对于安卓端而言无法打开常用下载软件,手机APP等。大家常用的方法是,弹出一个遮罩提示用户在新的浏览器窗口打开。 但是我们基于微信接口开发了一款全新的手机端微信中推广助手,用户在微信中点击的话

微信h5 input输入框软键盘关闭后,页面无法回到正常位置

在ios微信里面打开h5页面,当遇到input输入框调出软键盘时候。用户输入完成失去焦点,键盘收回后,会发现input输入框的位置发现变化的情况。这里需要监听失焦事件

用cookie解决新版微信中H5页面底部白条问题

实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。

微信JS支付代码 前端调用微信支付接口

跟大家分享一段微信支付的js代码片段、V3版的微信支付没有paySignKey参数、基本上是直接复制就可以使用了、改一改自己的参数就好了

推荐几款常用的微信公众号排版工具

作为一个新媒体小编,我们常接触的几个工具,莫过于排版、素材、图片这几个了。今天天天主要是想给大家介绍几款我常用的微信排版工具,希望对大家有用。

解决vue在ios微信“复制链接”始终为初始地址的问题

ios因为微信内置浏览器对 history 的支持不够全面 所以对于开启了 History Mode 的 SPA 应用,只会保存第一条 url 只要每个页面都刷新一次,判断环境为iOS的微信环境时候,使用重定向跳转的方式

js判断是否是微信浏览器方法总结【整理4种方式】

在实际开发中,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?以下提示了四种方法,每一种都可以进行判断是否是微信浏览器。

记录一次开发微信网页分享

最近在做一个项目需求,分享领好书活动,获取用户的个人信息以及unionID,并诱导用户分享给好友或朋友圈,达到裂变拉新的目的。在做的过程中遇到了一些坑的地方,所以回过来总结一下

H5解决浏览器,微信背景的上下滑动问题,脱离窗口的js局部滚动解决方法

当我们使用手机浏览器或微信浏览器打开Html网页的时候,如果上下滑动页面,页面就会出现黑色的空白(如图所示)。那么如何解决滑动的时候如何避免出界,出现头部和底部的黑底?

H5微信JS-SDK实现分享朋友、朋友圈以及QQ自定义分享

先登录微信公众平台进入公众号设置的功能设置里填写JS接口域名,支持使用AMD/CMD标准加载方法,通过config接口注入权限验证配置,通过ready接口处理成功验证,通过error接口处理失败验证

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!