实现微信分享 --------Vue单页式应用(Hash模式下)

最新推荐文章于 2021-12-14 09:44:38 发布

爱笑的小宇宙

最新推荐文章于 2021-12-14 09:44:38 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/wangningjing87/article/details/102626832

版权

微信公众号Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端微信分享的基本步骤：

一.绑定域名：

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这个不多说，微信开发的都应该清楚。

二.引入js文件：

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js。
请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK。
这里我采用了https，而且我用Vue-cli生成的项目，因此我将文件直接在index.html中引入。

三.通过config接口注入权限验证配置：

在下面会有实例说明，这里我只想说，接口可以放在自己写的AJAX回调用，将成功回调的值直接传入到wx.config需要的参数中。

四.通过ready接口处理成功验证

文档中说：“ config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。”
个人认为，这个可能是针对APP的，我的项目是微信的H5功能页面，如果想分享的话只能从右上角的“三个点点”中直接分享。（这仅是小生的个人想法，还望有学识有智谋的您给出确切的答案）。

五.通过error接口处理失败验证：这个我只是写到了项目中，不多做说明。

其他的文档中写的很清楚，聪明的你可能不需要我更多的解释。微信API给的还算详细，很多地方直接调用就可以。只是对于初次使用的人来说，放到自己的环境中会有些许小坑很难发现，导致浪费很多时间，但解决后发现并不难处理。以下是我开发时的部分笔记，如有不足还望各位观众老爷多多提点：

1.触及某个页面分享时，需要得到当前该页面的Url，用来传给后台。换取config中的参数。

2.页面分享出去的窗口中对应着一个接口，该接口中包含一个Url，这个Url是分享者希望分享出去的页面链接。在这个Url中可以拼加自己需要的参数，实现分享的追踪。

如：var shareUrl = 'https://show.mypro.com/#/product_details?userId=' + userId + '&level=' + level;这个shareUrl可以直接传到街口的参数中。

3.分享页面的JS中必须配置有config，在config中有一个jsApiList，在其中放置需要使用的JS接口列表，并以字符串的形式写入。

//接口入住权限验证配置
wx.config({ 
     debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

     appId: appId, // 必填，公众号的唯一标识 
     timestamp: timestamp, // 必填，生成签名的时间戳 
     nonceStr: nonceStr, // 必填，生成签名的随机串 
     signature: signature, // 必填，签名，见附录1 
     jsApiList: [
         'onMenuShareTimeline',
         'onMenuShareAppMessage'
    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

4.在config下方，有一个ready方法，该方法用来初始化我们要应用的js列表，而且任何方法一定要放在config方法后才可以。
如在Vue中，可以将该方法放在mounted中，并在其中放入‘分享给朋友’，‘分享至朋友圈’的js接口。
值得注意的是：两个接口并不是写在触发事件的方法中(如@click='Fun')，而是直接在页面初始化的时候，放在ready中直接被调用。

wx.ready(function() {
    wx.onMenuShareAppMessage({
        title: shareTitle, // 分享标题
        desc: 'This is a test!', // 分享描述
        link: shareUrl, // 分享链接
        imgUrl: imgUrl, // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function() {
            // 用户确认分享后执行的回调函数
        },
        cancel: function() {
            // 用户取消分享后执行的回调函数
        }
    });
    wx.onMenuShareTimeline({
        title: shareTitle, // 分享标题
        link: shareUrl,
        imgUrl: imgUrl, // 分享图标
        success: function() {
            // 用户确认分享后执行的回调函数
        },
        cancel: function() {
            // 用户取消分享后执行的回调函数
        }
    });
});

以上部分代码放在Vue的mounted中，当页面组件生成的时候直接被调用。

5.坑点

个人认为比较坑的点（1）：因为我的项目为单页式应用，并且采用了Vue中的hash模式，因此项目路径中带有#号的部分，微信可能会在其前面加一个？号（不知未来还会不会有变化）。这样当自己拼值时（如“？userId=123”）则需要取第二个问号后的值。之前无论如何都取不到自己拼在路径后的值，复制链接后才发现，微信默默地给加了一个问号和其他参数在其中。

个人认为比较坑的点（2）：我的项目中，如果在公众号中浏览各个界面，直接都是通过路由进行跳转的。但当浏览者从分享窗口进入后，他从分享页按着正常路由跳转到其他页面，其他页面的逻辑中如果有需要获取当前页面url的需要，会发现这个url和正常路由跳转的不一样。

例如：

这是正常跳转后的路径：https://show.mypro.com/#/firPage?userId=1
这是从分享页跳转后的路径：https://show.mypro.com/?#/firPage?userId=1

非常明显，如果根据问号的索引去获取当前Id，我永远获取不到。不知是否和坑（1）中同一个原因，因此我独立写了出来。因为是第一次做这个地方的东西，而且只能在移动端环境，我测了很多遍才发现。得知真相的我宛如醍（bei）醐（gou）灌（ri）顶（le）。可能是我经验太少，才如此踩坑。

6.后续坑点补充：

(1) 微信分享中：只要是分享出去的页面，如果为hash模式（在路由中带有#号），微信都会在#的前边给加一个‘？’。虽然微信API中有说过关于#的问题。但是很容易单纯的认为，仅仅在需要分享的页面的url会被修改，这也是我疏忽的一个地方。

(2) 苹果和iPhone打架后，我的微信功能页也莫名其妙的受到了影响，虽然我的公众号没有涉及到打赏的功能。具体问题如下：

我的分享shareUrl为：

var shareUrl = 'https://migxin.mypro.com/#/product_details?custId=null&shareCustId=' + custId + '&shareProductId=' + productId;

通过安卓分享出去的页面可以成功获取页面url后的值，并且成功显示页面。url如下：

https://migxin.mypro.com/#/product_details?custId=7&shareCustId=7&shareProductId=1223

但是在iphone中，页面URl后的值被截取掉了，页面因为无法获取值而无法显示。url如下：

https://migxin.mypro.com/?from=timeline#/product_details

7.有关微信公众号的关注页面：

目前我们不用自己去做公众号的关注页面，进入公众号，查看历史消息，在该页面会提供进入公众号的接口按钮。在这个页面中，按钮的状态为“进入公众号”，“关注”。可以自行判断当前用户是否已经关注公众号。该页面的链接也是直接可以复制得到的，对于迭代期比较紧张的情况 will do the trick~可以直接拿来使用。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

广东：

在该分享的页面 created钩子内去调用微信验签

在mounted钩子内去调用wx.ready的方法，最好把这个方法加上延时，延时500毫秒

1.是微信验签方法

(分享配置方法)

-------------------------------------------------------------------------------------------------------------------------------------------------

基本案例，实现一个拍照、录音、结束录音的功能

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./weui.css">
  <style>
    img {
      width: 200px;
    }

    #txt {
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div class="weui-flex">
    <div class="weui-flex__item">
      <div class="placeholder">
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" id="btn">拍照</a>
      </div>
      <div class="placeholder" id="pic_box"></div>
    </div>
  </div>

  <div class="weui-flex">
    <div class="weui-flex__item">
      <div class="placeholder">
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" id="startRecord">开始录音</a>
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn" id="stopRecord">结束录音</a>
        <div class="placeholder" id="txt"></div>
      </div>
    </div>
  </div>

  <!-- 1 引入微信SDK的js文件 -->
  <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <!-- 引入 sha1 加密的js文件 -->
  <script src="./sha1.min.js"></script>
  <script>
    // 测试帐号提供的信息：
    // appID：wx248164a664432d19
    // appsecret：0b67e59eb4f9ff80489a02111f5a34ca

    /* 
      微信JS-SDK的使用步骤：
      1 引入 sdk 的js文件
      2 配置权限信息
    */

    // 重要：这些操作步骤应该由后端通过写代码完成！！！
    // 为了能够拿到config中需要的签名信息，我们需要先
    // 1 获取 access_token
    // 2 通过 access_token 获取到 ticket
    // 3 通过 tiket 以及其他信息，加密处理后，获取到 signature

    // 1 获取 access_token
    // https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx248164a664432d19&secret=0b67e59eb4f9ff80489a02111f5a34ca
    // access_token: "9_qtmr8tVs-Vbz9J--n8QRG82t-TscCBwEEBPy1cu4AaUb7Wp6cyPJAaQeuzcGF6k26DrBEWhoK6qVCX2xXLNll3PPfniFQzRrsMz_G3KmvvvBjrkF51sIeNrUvAIXOIgABABSM"

    // 2 获取 ticket
    // https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=9_qtmr8tVs-Vbz9J--n8QRG82t-TscCBwEEBPy1cu4AaUb7Wp6cyPJAaQeuzcGF6k26DrBEWhoK6qVCX2xXLNll3PPfniFQzRrsMz_G3KmvvvBjrkF51sIeNrUvAIXOIgABABSM&type=jsapi
    // ticket: "HoagFKDcsGMVCIY2vOjf9joijlBx41Uetbsa1sudsgDKkOJXtniXoSksYy7BvH88vNyYuZSTkTFN9-p6sm9Qwg"

    // 3 准备签名算法，这一步实际中都是后端操作的，前端不需要写的，前端只需调个接口获取下面的配置信息即可
    const signatureObj = {
      // 随机字符串
      noncestr: 'yinxiangpaidayu',
      // ticke 门票
      jsapi_ticket: 'HoagFKDcsGMVCIY2vOjf9joijlBx41Uetbsa1sudsgDKkOJXtniXoSksYy7BvH88vNyYuZSTkTFN9-p6sm9Qwg',
      // 时间戳（使用数值类型的时间戳）
      timestamp: new Date() - 0,
      // 微信内页地址：（注意：地址需要带有协议）
      url: 'http://czwblog.com:8080/'
      // url: 'czwblog.com:8080'
    }
    const signatureArr = []
    for (let k in signatureObj) {
      signatureArr.push(k + '=' + signatureObj[k])
    }
    // 按照字段名的ASCII 码从小到大排序
    signatureArr.sort()
    let signatureStr = signatureArr.join('&')

    // 进行sha1加密
    signatureStr = sha1(signatureStr)
    // alert(signatureStr)
    // console.log(signatureStr)

    // wx 是 jweixin 这个js文件中提供的全局变量：
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

      appId: 'wx248164a664432d19', // 必填，公众号的唯一标识

      // 注意：此处的时间戳以及noncestr必须使用上面对象中提供的数据！！！
      timestamp: signatureObj.timestamp, // 必填，生成签名的时间戳
      nonceStr: signatureObj.noncestr, // 必填，生成签名的随机串
      signature: signatureStr, // 必填，签名，签名生成算法见附录1

      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'translateVoice',
        'startRecord',
        'stopRecord',
        'onVoiceRecordEnd',
        'playVoice',
        'onVoicePlayEnd',
        'pauseVoice',
        'stopVoice',
        'uploadVoice',
        'downloadVoice',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType',
        'openLocation',
        'getLocation',
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',
        'scanQRCode',
        'chooseWXPay',
        'openProductSpecificView',
        'addCard',
        'chooseCard',
        'openCard'
      ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2，这里把所有的接口都写过来了，一般用几个写几个
    })

    wx.ready(function () {
      // 此处，就可以调用 微信提供的SDK 了

      // 点击按钮实现拍照：
      document.getElementById('btn').addEventListener('click', () => {
        // 调用手机摄像头以及访问手机相册功能：
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

            localIds.forEach((localId) => {
              // 为每一个id生成一个图片
              var img = new Image()
              img.src = localId
              document.getElementById('pic_box').appendChild(img)
            })
          }
        });
      })

      // 实现录音功能：
      document.getElementById('startRecord').addEventListener('click', () => {
        wx.startRecord();
      })
      document.getElementById('stopRecord').addEventListener('click', () => {
        wx.stopRecord({
          success: function (res) {
            // localId 表示录音的id
            var localId = res.localId;

            wx.translateVoice({
              localId, // 需要识别的音频的本地Id，由录音相关接口获得
              isShowProgressTips: 1, // 默认为1，显示进度提示
              success: function (res) {
                document.getElementById('txt').innerText = res.translateResult
              }
            });
          }
        });
      })
    });
  </script>
</body>

</html>