vue 微信分享（实战）

2019年8月20日 218次阅读 来源: Pengxw

本日碰到了微信分享的需求，总体上来说照样比较简单的，然则照样碰到了一个设想的坑(真的是设想),😇

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.设想的坑

《vue 微信分享（实战）》

我看他人的分享，点击分享都是有如上一个指导图的(认为是官网自带的)，然则我做好没有指导图，我最先一只认为我那一步出问题了，厥后我发明，这个图是要本身加的，点击分享，翻开这个蒙层，在胜利回调内里，把这个蒙层去掉。😅

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

    原文作者：Pengxw
    原文地址: https://segmentfault.com/a/1190000017971618
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞