vue-cli 引入微信js-sdk使用微信分享

迈不过友情╰ 2022-05-08 03:58 665阅读 0赞

### 安装wx-sdk依赖包： ###

npm install weixin-js-sdk

### 在需要使用的页面进行引入sdk： ###

import wx from 'weixin-js-sdk'

### 引入 sha1.js  （文末放js源码文件） ###

(网上查找的关于sha1的npm包种类繁多。导致编码生成的签名不能使用。此处直接在入口文件 index.html中引入)

![70][]

### 微信分享使用 ###

以上准备工作已经就绪，如何使用呢？ 建议先查看[官网文档][Link 1]

![70 1][]

由官网可见需要以下几个参数：

时间戳timestamp、签名 signature、随机字符串nonceStr、appid、jsApiList，其中appId是公众号所属的，jsApiList 内部去存放需要引入的api分享接口。时间戳和随机字符串直接可以前端本地生成：

jsapi\_ticket参数需要后台配合返回，

url直接通过location.href.split('\#')\[0\] 截图得到当前网页的域名，

nonceStr:

createCode () {
          this.nonceStr = ''
          var codeLength = 16 // 验证码的长度
          // 所有候选组成验证码的字符，当然也可以用中文的
          var selectChar = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'l', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'Y', 'Z']
          for (var i = 0; i < codeLength; i++) {
            var charIndex = Math.floor(Math.random() * 60)
            this.nonceStr += selectChar[charIndex]
          }
        },

签名 signature 通过以下方法生成 （其中的hex\_sha1（）方法在index.html中引入的sha1js）：

var timestamp1 = Date.parse(new Date())
          this.signature = 'jsapi_ticket=' + ticket + '&noncestr=' + this.nonceStr + '&timestamp=' + timestamp1 + '&url=' + this.pageurl
          this.signature = hex_sha1(this.signature)

好了，到此为止，微信分享所需要的配置以及参数已经好了。下面就可以直接进行调用了。

1、直接屏幕右上角三个点进行分享。

2、网页自定义分享按钮，拿到需要分享的数据，通过引导层引导用户通过右上角分享（不支持自定义分享按钮直接分享）

### 自定义分享按钮的小例子： ###

### ![70 2][] ###

### 该例子中途遇到的问题： ###

通过以上步骤，实现了微信分享，在开发工具中测试正常。但是在手机中测试发现，设置的分享标题描述和图片失效了。经过半天的捣鼓发现，应该是因为分享的商品图不符合微信分享图标的规格导致分享图片失效，而我开发时还没有订好分享的链接，因此分享的链接当时设置的也是图片的路径，所以导致了分享的失效。

于是更换了小例子中的最上面的代码对图片路径和分享链接重新定义（见上图中imgUrlWX和linkWX），解决了问题。

附件：sha1.js

/*
     *   A   JavaScript   implementation   of   the   Secure   Hash   Algorithm,   SHA-1,   as   defined
     *   in   FIPS   PUB   180-1
     *   Version   2.1-BETA   Copyright   Paul   Johnston   2000   -   2002.
     *   Other   contributors:   Greg   Holt,   Andrew   Kepert,   Ydnar,   Lostinet
     *   Distributed   under   the   BSD   License
     *   See   http://pajhome.org.uk/crypt/md5   for   details.
     */
    /*
     *   Configurable   variables.   You   may   need   to   tweak   these   to   be   compatible   with
     *   the   server-side,   but   the   defaults   work   in   most   cases.
     */
    var hexcase = 0 /*   hex   output   format.   0   -   lowercase;   1   -   uppercase                 */
    var b64pad = ''; /*   base-64   pad   character.   "="   for   strict   RFC   compliance       */
    var chrsz = 8 /*   bits   per   input   character.   8   -   ASCII;   16   -   Unicode             */
    
    /*   
     *   These   are   the   functions   you'll   usually   want   to   call   
     *   They   take   string   arguments   and   return   either   hex   or   base-64   encoded   strings   
     */
    function hex_sha1 (s) {
      return binb2hex(core_sha1(str2binb(s), s.length * chrsz))
    }
    
    function b64_sha1 (s) {
      return binb2b64(core_sha1(str2binb(s), s.length * chrsz))
    }
    
    function str_sha1 (s) {
      return binb2str(core_sha1(str2binb(s), s.length * chrsz))
    }
    
    function hex_hmac_sha1 (key, data) {
      return binb2hex(core_hmac_sha1(key, data))
    }
    
    function b64_hmac_sha1 (key, data) {
      return binb2b64(core_hmac_sha1(key, data))
    }
    
    function str_hmac_sha1 (key, data) {
      return binb2str(core_hmac_sha1(key, data))
    }
    
    /*
     *   Perform   a   simple   self-test   to   see   if   the   VM   is   working
     */
    function sha1_vm_test () {
      return hex_sha1('abc') == 'a9993e364706816aba3e25717850c26c9cd0d89d';
    }
    
    /*
     *   Calculate   the   SHA-1   of   an   array   of   big-endian   words,   and   a   bit   length
     */
    function core_sha1 (x, len) {
      /*   append   padding   */
      x[len >> 5] |= 0x80 << (24 - len % 32)
        x[((len + 64 >> 9) << 4) + 15] = len
    
        var w = Array(80)
        var a = 1732584193
        var b = -271733879
        var c = -1732584194
        var d = 271733878
        var e = -1009589776
    
        for (var i = 0; i < x.length; i += 16) {
        var olda = a
            var oldb = b
            var oldc = c
            var oldd = d
            var olde = e
    
            for (var j = 0; j < 80; j++) {
          if (j < 16) w[j] = x[i + j]
                else w[j] = rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1)
                var t = safe_add(safe_add(rol(a, 5), sha1_ft(j, b, c, d)), safe_add(safe_add(e, w[j]), sha1_kt(j)))
                e = d
                d = c
                c = rol(b, 30)
                b = a
                a = t
            }
    
        a = safe_add(a, olda)
            b = safe_add(b, oldb)
            c = safe_add(c, oldc)
            d = safe_add(d, oldd)
            e = safe_add(e, olde)
        }
      return Array(a, b, c, d, e)
    
    }
    
    /*
     *   Perform   the   appropriate   triplet   combination   function   for   the   current
     *   iteration
     */
    function sha1_ft (t, b, c, d) {
      if (t < 20) return (b & c) | ((~b) & d)
        if (t < 40) return b ^ c ^ d
        if (t < 60) return (b & c) | (b & d) | (c & d)
        return b ^ c ^ d
    }
    
    /*
     *   Determine   the   appropriate   additive   constant   for   the   current   iteration
     */
    function sha1_kt (t) {
      return (t < 20) ? 1518500249 : (t < 40) ? 1859775393 : (t < 60) ? -1894007588 : -899497514
    }
    
    /*
     *   Calculate   the   HMAC-SHA1   of   a   key   and   some   data
     */
    function core_hmac_sha1 (key, data) {
      var bkey = str2binb(key)
        if (bkey.length > 16) bkey = core_sha1(bkey, key.length * chrsz)
    
        var ipad = Array(16),
        opad = Array(16)
        for (var i = 0; i < 16; i++) {
        ipad[i] = bkey[i] ^ 0x36363636
            opad[i] = bkey[i] ^ 0x5C5C5C5C
        }
    
      var hash = core_sha1(ipad.concat(str2binb(data)), 512 + data.length * chrsz)
        return core_sha1(opad.concat(hash), 512 + 160)
    }
    
    /*
     *   Add   integers,   wrapping   at   2^32.   This   uses   16-bit   operations   internally
     *   to   work   around   bugs   in   some   JS   interpreters.
     */
    function safe_add (x, y) {
      var lsw = (x & 0xFFFF) + (y & 0xFFFF)
        var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
        return (msw << 16) | (lsw & 0xFFFF)
    }
    
    /*
     *   Bitwise   rotate   a   32-bit   number   to   the   left.
     */
    function rol (num, cnt) {
      return (num << cnt) | (num >>> (32 - cnt))
    }
    
    /*
     *   Convert   an   8-bit   or   16-bit   string   to   an   array   of   big-endian   words
     *   In   8-bit   function,   characters   >255   have   their   hi-byte   silently   ignored.
     */
    function str2binb (str) {
      var bin = Array()
        var mask = (1 << chrsz) - 1
        for (var i = 0; i < str.length * chrsz; i += chrsz)
        {bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (24 - i % 32);}
      return bin
    }
    
    /*
     *   Convert   an   array   of   big-endian   words   to   a   string
     */
    function binb2str (bin) {
      var str = '';
      var mask = (1 << chrsz) - 1
        for (var i = 0; i < bin.length * 32; i += chrsz)
        {str += String.fromCharCode((bin[i >> 5] >>> (24 - i % 32)) & mask);}
      return str
    }
    
    /*
     *   Convert   an   array   of   big-endian   words   to   a   hex   string.
     */
    function binb2hex (binarray) {
      var hex_tab = hexcase ? '0123456789ABCDEF' : '0123456789abcdef';
      var str = '';
      for (var i = 0; i < binarray.length * 4; i++) {
        str += hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8 + 4)) & 0xF) + hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8)) & 0xF)
        }
      return str
    }
    
    /*
     *   Convert   an   array   of   big-endian   words   to   a   base-64   string
     */
    function binb2b64 (binarray) {
      var tab = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
      var str = '';
      for (var i = 0; i < binarray.length * 4; i += 3) {
        var triplet = (((binarray[i >> 2] >> 8 * (3 - i % 4)) & 0xFF) << 16) | (((binarray[i + 1 >> 2] >> 8 * (3 - (i + 1) % 4)) & 0xFF) << 8) | ((binarray[i + 2 >> 2] >> 8 * (3 - (i + 2) % 4)) & 0xFF)
            for (var j = 0; j < 4; j++) {
          if (i * 8 + j * 6 > binarray.length * 32) str += b64pad
                else str += tab.charAt((triplet >> 6 * (3 - j)) & 0x3F)
            }
      }
      return str
    }

[70]: /images/20220508/73461c21b4144e6987adcd0d63f9f465.png
[Link 1]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
[70 1]: /images/20220508/13556318328b43d4b29723b36fe2ce6f.png
[70 2]: /images/20220508/4c5c9828333446f0afe5b557fecd7670.png