• vue 微信 jssdk分享功能


    第一步:

    npm install weixin-js-sdk -S // (或者直接index.html里面引入js文件 http://res.wx.qq.com/open/js/jweixin-1.6.0.js
    官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

    第二步:

    import wx from 'weixin-js-sdk'  // 喜欢的在main.js里面把wx挂载到Vue下面 Vue.prototype.$wx = wx

    第三步:

    // 找后台获取签名,(拿签名的接口只需要向后台传递当前页面的url就行了,其他参数更具业务自定,如果后台找你要授权验证的code,就让他自己看文档去)
    this.$store.dispatch('getAutographCode', {vm: this, devType: 'yanshi', url: window.location.href}).then(res => {
      if(res && res.data){
        this.$wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
          appId: res.data.appId, // 必填,公众号的唯一标识
          timestamp: res.data.timestamp, // 必填,生成签名的时间戳
          nonceStr: res.data.noncestr, // 必填,生成签名的随机串
          signature: res.data.signature, // 必填,签名
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表
        })
        this.$wx.ready(() => {      //需在用户可能点击分享按钮前就先调用
          console.log(this.$wx, 'readyreadyreadyreadyreadyreadyreadyready')
          this.$wx.onMenuShareTimeline({
            title: this.title, // 分享标题
            link: this.$serverPath, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: this.cover , // 分享图标
            success: () => {
              // 设置成功
            }
          })
          this.$wx.onMenuShareAppMessage({
            title: this.title, // 分享标题
            link: this.$serverPath, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: this.cover, // 分享图标
            success: () => {
              // 设置成功
            }
          })
        });
        this.$wx.error(() => {      //需在用户可能点击分享按钮前就先调用
          console.log(this.$wx, 'errorerrorerrorerrorerrorerrorerrorerror')
        });
      }
    })

    备注:上面的代码调取成功后,微信那边并不会弹出窗口让选择是分享朋友圈还是分享给好友,只是自定义了微信右上角三个点里面的分享功能!!!  

    
    
  • 相关阅读:
    Google Web 字体 API 访谈
    关于如何跨越抄袭程序阶段的一些断想
    DirectX开发中找不到dxtrans.h的问题的解决
    Google Web 字体 API 访谈
    NetBeans 6.9 发布后选版 1 已经可用
    Thrift java服务器与客户端示例
    Wing IDE Pro v. 4.1.91 Python Wingware Python IDE
    tkang's blog
    Thrift的简单使用
    maven加载自己的包
  • 原文地址:https://www.cnblogs.com/cxxb/p/16067723.html
Copyright © 2020-2023  润新知