收藏
回答

微信开放标签在vue中怎么使用?还有生成签名的url到底是什么?

请问微信开放标签如何在Vue中使用?现在报错:


难道还需要在Vue组件中注册一下吗?

还有,在微信开发工具上运行的时候,提示无效的签名,错误码:63002,但看了下文档,觉得应该是生成签名时使用的url有问题,请问下这个url是指什么?我现在使用的是:

```

let url = encodeURIComponent(location.href.split('#')[0])

```

现在是真的有点蒙,求各位大佬指教!



<head>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <wx-open-launch-weapp id="launch-btn" 
      @launch="getApp" appid="自己的appid"
      >
      <script type="text/wxtag-template">
      <div class='btn'>打开APP</div>
      </script>
      </wx-open-launch-weapp>
    </div>
  </div>


  <script src="./js/common.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script>


    const app = new Vue({
      el: '#app',
      methods: {
        getApp() {
          console.log("打开app!!!!!");
        },
      },
      created() {
        let url = encodeURIComponent(location.href.split('#')[0])
        axios({
          url: "获取签名的url",
          params: {
            url
          }
        }).then(res => {
          console.log("请求签名成功:", res)
          let code = res.data.code
          if (code == "200") {
            let result = res.data.result
            let nonceStr = result.nonceStr
            let timeStamp = result.timeStamp
            let signature = result.signature
            wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
              appId: WX_APPID, // 必填,公众号的唯一标识
              timestamp: timeStamp, // 必填,生成签名的时间戳
              nonceStr: nonceStr, // 必填,生成签名的随机串
              signature: signature,// 必填,签名
              jsApiList: [], // 必填,需要使用的JS接口列表
              openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
            });
            wx.ready(function () {
              console.log("ready ----------------------------");


              // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
            });
            wx.error(function (res) {
              console.log("error ----------------------------", res);
              // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
            });
          }
        }).catch(err => {
          console.log("请求签名出错:", err)
        })
      },
    })
  </script>
</body>
回答关注问题邀请回答
收藏

5 个回答

  • jack
    jack
    2021-09-23

    2021-09-23
    有用
    回复
  • 小半
    小半
    2020-11-20

    楼主解决这个问题了吗

    2020-11-20
    有用
    回复
  • 裸奔的烧鸭
    裸奔的烧鸭
    2020-09-29

    react也有同样的问题,可以看下这个 https://www.jianshu.com/p/298c99a5926c

    2020-09-29
    有用
    回复
  • dhy
    dhy
    2020-07-22

    看下文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

    使用说明

    所有开放标签都能像普通的HTML标签一样在页面中直接使用,不需要再进行额外的处理。

    如果所使用的标签允许提供插槽,由于插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过<template></template>进行包裹。对于Vue等视图框架,为了避免template标签冲突的问题,可使用<script type="text/wxtag-template"><script>进行代替,来包裹插槽模版和样式。


    2020-07-22
    有用
    回复
  • Wang
    Wang
    2020-07-16

    等你用的框架支持

    2020-07-16
    有用
    回复
登录 后发表内容
问题标签