vue 微信分享(实战)

我不是艾克
今天碰到了微信分享的需求,总体上来讲还是比较简单的,但是还是碰到了一个假想的坑(真的是假想),😇
api地址

1. 思路

  • 步骤一:绑定域名
  • 引入JS文件
  • 通过config接口注入权限验证配置(反正微信的东西都有这一步)😛
  • 通过ready接口处理成功验证
  • 通过error接口处理失败验证

2. 实现

1.绑定域名,在公众号后台绑定域名,所以最后的测试一定要是线上(环境要么用内网穿透,这样容易调试,不用每一次都发测试环境)

2.在index.html文件里面引入

http://res.wx.qq.com/open/js/jweixin-1.4.0.js  // 注意协议

3.通过config接口注入权限验证配置, 下面五个参数都是通过请求后台,后台返回给你的。 注意: 当前页面的url是要在这个接口里给后台的,它们才能生成可用的, 签名算发, url的格式如下: url(当前网页的URL,不包含#及其后面部分),所以要注意vue-router的模式(通过config接口注入权限验证配置,jsApiList是调用的事件,api文档附录2里面有)

    wx.config({
      debug: false, // 是否开启调试模式
      appId: appId, //appid
      timestamp: timestamp, // 时间戳 
      nonceStr: nonceStr, // 随机字符串,只有这个是驼峰🎃 
      signature: signature, // 签名
      jsApiList: [
        "onMenuShareTimeline",
        "onMenuShareAppMessage",
        "onMenuShareQQ",
        "onMenuShareWeibo",
        "onMenuShareQZone"
      ] // 需要使用的JS接口列表
    });

    // 判断当前客户端版本是否支持指定JS接口 ,这步可无
    wx.checkJsApi({
      jsApiList: [
        "onMenuShareTimeline",
        "onMenuShareAppMessage",
        "onMenuShareQQ",
        "onMenuShareWeibo",
        "onMenuShareQZone"
      ], // 需要检测的JS接口列表,所有JS接口列表见附录2,
      success: function(res) {
        console.log(res);
        // 以键值对的形式返回,可用的api值true,不可用为false
        // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      }
    });

   ![微信分享](https://pxw-my.oss-cn-hangzhou.aliyuncs.com/blog/20190121202108.png)

    // 通过ready接口处理成功验证
    wx.ready(function() {
      const share = {
        title: mainTitle,   // 分享出去的title
        desc: subTitle,     // 描述信息
        imgUrl: smallIcons, // 分享的小图标
        link: url,          // 分享的除去的url
        success: function() {
          dosometing();     // 分享成功,成功之后要做的事情
        },
        cancel: function() {
          dosometing();     // 分享取消,取消之后要做的事情
        }
      };
      wx.onMenuShareAppMessage(share); // 微信好友
      wx.onMenuShareTimeline(share); // 朋友圈
      wx.onMenuShareQQ(share); // QQ
      wx.onMenuShareQZone(share); // QQ空间
      wx.onMenuShareWeibo(share); // 腾讯微博
    });

    // 如果失败 , 获取失败信息 
    wx.error(function(res) {
      console.log("错误", res);
    });

3.假想的坑

分享蒙层

我看别人的分享,点击分享都是有如上一个引导图的(以为是官网自带的),但是我做好没有引导图,我开始一只以为我那一步出问题了,后来我发现,这个图是要自己加的,点击分享,打开这个蒙层,在成功回调里面,把这个蒙层去掉。😅

blog:https://hericium.github.io/20...

阅读 3.2k

一起喵喵喵喵喵~
技术专栏,大前端

兴趣是启蒙,坚持才能有所成

521 声望
16 粉丝
0 条评论
你知道吗?

兴趣是启蒙,坚持才能有所成

521 声望
16 粉丝
文章目录
宣传栏