基于vue2.0开发的单页面引用,引入微信jssdk

基于vue2.0开发的单页面引用,引入微信jssdk,如何全局调用接口获取微信api配置信息,用于jssdk是有时间限制的

阅读 11.7k
3 个回答

创建一个每次加载页面都会执行的js,相当于初始化操作,在这个js中进行微信jssdk的认证。

直接贴代码吧

mounted () {
    let link = ''
    // 朋友圈
    let title = '标题'
    // console.log(this.$route)
    this.$http.post('/index.php/weixin/Get/jssdk', {url: document.URL}).then((response) => {
      let res = response.data
      if (res.code === '04') {
        return
      }
      link = 'http://' // 链接
      let wxjssdk = res.wxjssdk
      let self = this
      wx.config({debug: wxjssdk.debug,
        appId: wxjssdk.appId,
        timestamp: wxjssdk.timestamp,
        nonceStr: wxjssdk.nonceStr,
        signature: wxjssdk.signature,
        jsApiList: wxjssdk.jsApiList
      })
      wx.ready(function () {
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
        wx.onMenuShareTimeline({
          title: '', // 分享标题
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
            self.$http.post('/index.php/weixin/Share/link', {url: document.URL}).then((response) => {
              let res = response.data
              if (res.code === '04') {
                return
              }
            }, (response) => {})
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
            console.log(link)
          }
        })
        // 朋友
        wx.onMenuShareAppMessage({
          title: title, // 分享标题
          desc: '', // 分享描述
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          type: '', // 分享类型,music、video或link,不填默认为link
          dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
          success: function () {
            // 用户确认分享后执行的回调函数
            self.$http.post('/index.php/weixin/Share/link', {url: document.URL).then((response) => {
              let res = response.data
              if (res.code === '04') {
                return
              }
            }, (response) => {})
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
            console.log(link)
          }
        })
        wx.onMenuShareQQ({
          title: title, // 分享标题
          desc: '', // 分享描述
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      })
      wx.error(p => {
        console.log(p)
      })
    }, (response) => {})
  }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题