vue 微信分享（實戰）

時間 2019-12-04

標籤 vue 微信分享實戰简体版

原文原文鏈接

今天碰到了微信分享的需求，整體上來說仍是比較簡單的，可是仍是碰到了一個假想的坑(真的是假想),😇
api地址

1. 思路

步驟一：綁定域名
引入JS文件
經過config接口注入權限驗證配置(反正微信的東西都有這一步)😛
經過ready接口處理成功驗證
經過error接口處理失敗驗證

2. 實現

1.綁定域名，在公衆號後臺綁定域名，因此最後的測試必定要是線上(環境要麼用內網穿透，這樣容易調試,不用每一次都發測試環境)html

2.在index.html文件裏面引入vue

http://res.wx.qq.com/open/js/jweixin-1.4.0.js  // 注意協議

3.經過config接口注入權限驗證配置, 下面五個參數都是經過請求後臺，後臺返回給你的。注意: 當前頁面的url是要在這個接口裏給後臺的，它們才能生成可用的, 簽名算髮, url的格式以下: url（當前網頁的URL，不包含#及其後面部分),因此要注意vue-router的模式(經過config接口注入權限驗證配置,jsApiList是調用的事件，api文檔附錄2裏面有)git

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);
    });