微信开发实践（二）：使用JS-SDK实现自定义分享 Ⅱ

时间  2019-11-06
标签 微信 开发 实践 使用 sdk 实现 自定义 分享 栏目 JavaScript 繁體版
原文   原文链接

为了快速帮你们理解，此次的demo就直接修改公众号官网的示例代码来给你们演示。若是你们不想听我啰嗦，能够直接移步官方文档——https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115。javascript

因为移动设备调试起来不是特别方便，建议你们先去官网下载微信的web开发者工具，直接在PC上测试。具体用法很是简单，我就不赘述了。须要注意的是必须得先在此页面（https://mp.weixin.qq.com/cgi-bin/safecenterstatus?action=devlist&token=711880374&lang=zh_CN）绑定开发者帐号才能使用工具css

上一篇教程我们已经完成JS接口安全域名的绑定，首先，在项目根目录下建立html静态页面html

test.html：java

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>微信JS-SDK Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>

<body ontouchstart="">
	<div class="wxapi_container">
		<div class="lbox_close wxapi_form">
			<span class="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span>
			<button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
		</div>
	</div>
</body>

<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    // 微信配置
</script>
<script src="http://203.195.235.76/jssdk/js/zepto.min.js"></script>

</html>

接下来node

① 在须要调用JS接口的页面引入以下JS文件

http://res.wx.qq.com/open/js/jweixin-1.2.0.js（支持https），若是还不肯定本身网站的协议未来是否支持https，能够直接省略协议（//res.wx.qq.com/open/js/jweixin-1.2.0.js）jquery

② 后端实现签名生成算法

下面这段引用自官网：git

全部须要使用JS-SDK的页面必须先注入配置信息，不然将没法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，因此使用pushState来实现web app的页面会致使签名失败，此问题会在Android6.2中修复）。web

wx.config({
    debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的惟一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，须要使用的JS接口列表，全部JS接口列表见附录2
});

因为这些权限验证配置都是后端生成的，因此咱们须要修改express.js文件，官网提供了生成签名的算法：ajax

附录1-JS-SDK使用权限签名算法

jsapi_ticket
生成签名以前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常状况下，jsapi_ticket的有效期为7200秒，经过access_token来获取。因为获取jsapi_ticket的api调用次数很是有限，频繁刷新jsapi_ticket会致使api调用受限，影响自身业务，开发者必须在本身的服务全局缓存jsapi_ticket 。算法

  1. 参考如下文档获取access_token（有效期7200秒，开发者必须在本身的服务全局缓存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html
  2. 用第一步拿到的access_token 采用http GET方式请求得到jsapi_ticket（有效期7200秒，开发者必须在本身的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功返回以下JSON：

{
    "errcode": 0,
    "errmsg": "ok",
    "ticket": "bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
    "expires_in": 7200
}

得到jsapi_ticket以后，就能够生成JS-SDK权限验证的签名了。


签名算法
签名生成规则以下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对全部待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里须要注意的是全部参数名均为小写字符。对string1做sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

步骤1. 对全部待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名，获得signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事项

  1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
  2. 签名用的url必须是调用JS接口页面的完整URL。
  3. 出于安全考虑，开发者必须在服务器端实现签名的逻辑。

如出现invalid signature 等错误详见附录5常见错误及解决办法。

ps：咱们这里使用是全局基础的access_token，要注意其与关于网页受权access_token的区别

复述了一堆，下面咱们用node来实现上面的算法，由于是基础入门教程，我对代码作了些精简：

① 后端代码中不会使用数据库，经过直接将获取的access_token写到文件系统的方式做为缓存机制（固然你也能够把access_token放到一个全局变量里，不过一旦服务器重启变量就从内存里消失了，对于测试来讲我们仍是珍惜一下有限的调用次数吧）。

② 后端代码不会涉及定时任务，因为access_token和jsapi_ticket的时效时间都是2小时，若是生成签名失败，须要手动清空缓存（这里是指删除文件），由于我会每次生成签名前会从缓存（这里是指文件系统）中取accessToken，若是不存在就会从微信服务器从新获取并刷新缓存（从新生成文件）

修改后的express.js：

const fs = require('fs')
const http = require('http')
const https = require('https')
const crypto = require('crypto')
const express = require('express')
const bodyParser = require('body-parser')
const app = express()

const APP_ID = '测试号的APP_ID'
const APP_SECRET = '测试号的APP_SECRET'
const TOKEN = '手动填写的TOKEN'

/**
 * 加密/校验流程以下：
 * 1）将token、timestamp、nonce三个参数进行字典序排序
 * 2）将三个参数字符串拼接成一个字符串进行sha1加密
 * 3）开发者得到加密后的字符串可与signature对比，标识该请求来源于微信
 */
app.get('/verify', function (req, res) {
  const timestamp = req.query.timestamp
  const nonce = req.query.nonce
  const shasum = crypto.createHash('sha1')
  shasum.update([TOKEN, timestamp, nonce].sort().join(''))
  const generatedSignature = shasum.digest('hex')
  if (generatedSignature === req.query.signature) {  // 来自微信服务器
    res.send(req.query.echostr)
  } else {
    res.send('fail')
  }
})

/**
 * 访问根目录下的静态文件
 */
app.get('/file/:path', function (req, res, next) {
  res.sendFile(req.params.path, { root: __dirname })
})

/**
 * 获取缓存中的accessToken
 * @returns {Promise}
 */
function getAccessToken() {
  if (fs.existsSync('./access-token.txt')) {  // 从文件系统中获取
    const accessToken = fs.readFileSync('./access-token.txt', { flag: 'r', encoding: 'utf8' })
    console.log('get cached accessToken: ', accessToken)
    return Promise.resolve(accessToken)
  } else {  // 从微信服务器中获取
    return new Promise((resolve, reject) => {
      https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + APP_ID + '&secret=' + APP_SECRET, function (req, res) {
        let jsonStr = ''
        req.on('data', function (data) {
          jsonStr += data
        })
        req.on('end', function () {
          const accessToken = JSON.parse(jsonStr)['access_token']
          console.log('refresh access token: ', accessToken)
          fs.writeFileSync('./access-token.txt', accessToken, { flag: 'w', encoding: 'utf8' })
          resolve(accessToken)
        })
      })
    })
  }
}

/**
 * 获取缓存中的ticket
 * @param {boolean} accessToken
 * @returns {Promise}
 */
function getTicket(accessToken) {
  if (fs.existsSync('./ticket.txt')) {  // 从文件系统中获取
    const ticket = fs.readFileSync('./ticket.txt', { flag: 'r', encoding: 'utf8' })
    console.log('get cached ticket: ', ticket)
    return Promise.resolve(ticket)
  } else {  // 从微信服务器中获取
    return new Promise((resolve, reject) => {
      https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + accessToken + '&type=jsapi', function (req, res) {
        let jsonStr = ''
        req.on('data', function (data) {
          jsonStr += data
        })
        req.on('end', function () {
          const ticket = JSON.parse(jsonStr)['ticket']
          console.log('refresh ticket: ', ticket)
          fs.writeFileSync('./ticket.txt', ticket, { flag: 'w', encoding: 'utf8' })
          resolve(ticket)
        })
      })
    })
  }
}

/**
 * H5客户端 获取分享的信息
 */
app.all('/getWXConfig', function (req, res) {
  const url = req.query.url
  // 获取jsapi_ticket
  getAccessToken()
    .then(accessToken => getTicket(accessToken))
    .then(ticket => {
      // 生成签名
      const timestamp = new Date().getTime()  // 时间戳
      const nonceStr = 'niu_bi'  // 随机字符串

      const tempString = 'jsapi_ticket=' + ticket + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' + url
      const shasum = crypto.createHash('sha1')
      shasum.update(tempString)
      const signature = shasum.digest('hex')
      console.log('signature: ', signature)
      res.json({
        appId: APP_ID,
        timestamp: timestamp,
        nonceStr: nonceStr,
        signature: signature
      })
    })
})

// 启动服务器
const server = app.listen(3000, function () {
  const host = server.address().address
  const port = server.address().port
  console.log('server listening at %s:%s', host, port)
})

③ 经过config接口注入权限验证配置

修改咱们根目录下的test.html文件：

<!-- 以上省略 -->
<script>
    // 微信配置

    $.ajax({
        type: 'get',
        url: '/getWXConfig',
        data: {
            url: window.location.href.split('#')[0]
        },
        success: function (config) {
            console.log(config)
            initWechat(config)
        },
        dataType: 'json'
    })

    function initWechat(config) {
        /*
           * 注意：
           * 1. 全部的JS接口只能在公众号绑定的域名下调用，公众号开发者须要先登陆微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
           * 2. 若是发如今 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
           * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
           *
           * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可经过如下渠道反馈：
           * 邮箱地址：weixin-open@qq.com
           * 邮件主题：【微信JS-SDK反馈】具体问题
           * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
           */
        wx.config({
            debug: true,
            appId: config.appId,
            timestamp: config.timestamp,
            nonceStr: config.nonceStr,
            signature: config.signature,
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
            ]
        });
    }

</script>
<script src="http://203.195.235.76/jssdk/js/zepto.min.js"></script>
</html>

在微信web开发者中打开地址http://26s4ag.natappfree.cc/file/test.html（该域名上一个教程经过NATAPP获取的），若是弹出 { errMsg: config:ok }，说明微信配置成功了。

④ 注册分享状态回调事件

经过ready接口处理成功验证

wx.ready(function () {
    /**
     * config信息验证后会执行ready方法，全部接口调用都必须在config接口得到结果以后，
     * config是一个客户端的异步操做，因此若是须要在页面加载时就调用相关接口，则须把
     * 相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则能够
     * 直接调用，不须要放在ready函数中。
     */
});

经过error接口处理失败验证

wx.error(function (res) {
    /**
     * config信息验证失败会执行error函数，如签名过时致使验证失败，具体错误
     * 信息能够打开config的debug模式查看，也能够在返回的res参数中查看，对
     * 于SPA能够在这里更新签名。
     */
});

接口调用说明
全部接口经过wx对象(也可以使用jWeixin对象)来调用，参数是一个对象，除了每一个接口自己须要传的参数以外，还有如下通用参数：
1.success：接口调用成功时执行的回调函数。
2.fail：接口调用失败时执行的回调函数。
3.complete：接口调用完成时执行的回调函数，不管成功或失败都会执行。
4.cancel：用户点击取消时的回调函数，仅部分有用户取消操做的api才会用到。
5.trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
（PS：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，由于客户端分享操做是一个同步操做，这时候使用ajax的回包会尚未返回）
以上几个函数都带有一个参数，类型为对象，其中除了每一个接口自己返回的数据以外，还有一个通用属性errMsg，其值格式以下：
调用成功时："xxx:ok" ，其中xxx为调用的接口名
用户取消时："xxx:cancel"，其中xxx为调用的接口名
调用失败时：其值为具体错误信息

我这里只演示一个接口的使用，继续修改我们的test.html中的 initWechat 函数：

function initWechat(config) {
    /*
        * 注意：
        * 1. 全部的JS接口只能在公众号绑定的域名下调用，公众号开发者须要先登陆微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
        * 2. 若是发如今 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
        * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
        *
        * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可经过如下渠道反馈：
        * 邮箱地址：weixin-open@qq.com
        * 邮件主题：【微信JS-SDK反馈】具体问题
        * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
        */
    wx.config({
        debug: true,
        appId: config.appId,
        timestamp: config.timestamp,
        nonceStr: config.nonceStr,
        signature: config.signature,
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone'
        ]
    })

    wx.ready(function () {

        // 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
        document.querySelector('#onMenuShareAppMessage').onclick = function () {
            wx.onMenuShareAppMessage({
                title: '我平生最佩服四种人',  // 分享标题
                desc: '看黄片不快进的人，看黄片不打飞机的人，看完黄片还没打出来的人，打完了还能把黄片看完的人。 由于这表明了人类最珍贵的四种品质：踏实，正直，坚持，执着',  // 分享描述
                link: window.location.origin + '/file/hentai.html',  // 分享连接，该连接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: window.location.origin + '/file/huaji.png',  // 分享图标
                type: 'link',  // 分享类型,music、video或link，不填默认为link
                dataUrl: '',  // 若是type是music或video，则要提供数据连接，默认为空
                trigger: function (res) {
                    // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，由于客户端分享操做是一个同步操做，这时候使用ajax的回包会尚未返回
                    alert('用户点击发送给朋友')
                },
                success: function (res) {
                    // 用户确认分享后执行的回调函数
                    alert('已分享')
                },
                cancel: function (res) {
                    // 用户取消分享后执行的回调函数
                    alert('已取消')
                },
                fail: function (res) {
                    // 分享失败时执行的回调函数
                    alert(JSON.stringify(res))
                }
            })

            alert('已注册获取“发送给朋友”状态事件')
        }
    })

    wx.error(function (res) {
        alert(res.errMsg)
    })
}

⑤ 测试分享接口是否成功

首先点击右上角，选择“发送给朋友”，而后再点击页面上的“onMenuShareAppMessage”按钮，再次分享给朋友，若是两次的内容不一样，那么恭喜你，微信自定义分享功能已经实现啦！

这里只介绍了“发送给朋友”的功能，其余同理，更多的接口请参阅微信JS-SDK说明文档

完整代码戳这里

 

下一篇来说解一下微信如何进行页面受权以及获取用户的openId。

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