微信二次分享

時間 2019-11-16

標籤微信二次分享简体版

原文原文鏈接

微信二次分享

效果演示

如何運行項目

// 克隆代碼到本地
git clone https://github.com/Jameswain/WeiXinSDK.git    
// 安裝依賴
npm i
// 運行項目
npm run dev

經過charles配置代理，配置以下：javascript

charles配置以下，你能夠直接導入到你charles的Map remote，記住把IP地址換成你的IP地址。html

<?xml version='1.0' encoding='UTF-8' ?>
<?charles serialisation-version='2.0' ?>
<map>
  <toolEnabled>true</toolEnabled>
  <mappings>
    <mapMapping>
      <sourceLocation>
        <protocol>http</protocol>
        <host>m.ximalaya.com</host>
        <port>80</port>
        <path>/49265909/album/11501536/</path>
      </sourceLocation>
      <destLocation>
        <protocol>http</protocol>
        <host>192.168.1.103</host>
        <port>8080</port>
        <path>/</path>
      </destLocation>
      <preserveHostHeader>false</preserveHostHeader>
      <enabled>true</enabled>
    </mapMapping>
    <mapMapping>
      <sourceLocation>
        <protocol>http</protocol>
        <host>m.ximalaya.com</host>
        <port>80</port>
        <path>/49265909/album/11501536/static/lib/jweixin-1.4.0.js</path>
      </sourceLocation>
      <destLocation>
        <protocol>http</protocol>
        <host>192.168.1.103</host>
        <port>8080</port>
        <path>/static/lib/jweixin-1.4.0.js</path>
      </destLocation>
      <preserveHostHeader>false</preserveHostHeader>
      <enabled>true</enabled>
    </mapMapping>
    <mapMapping>
      <sourceLocation>
        <protocol>http</protocol>
        <host>m.ximalaya.com</host>
        <port>80</port>
        <path>/app.js</path>
      </sourceLocation>
      <destLocation>
        <protocol>http</protocol>
        <host>192.168.1.103</host>
        <port>8080</port>
        <path>/app.js</path>
      </destLocation>
      <preserveHostHeader>false</preserveHostHeader>
      <enabled>true</enabled>
    </mapMapping>
  </mappings>
</map>

配置好代理之後，在微信裏打開 m.ximalaya.com/49265909/album/11501536/ 這個網址，看到如下效果，表示代理配置成功，而後你就能夠進行二次分享的測試了。java

接下來經過詳細的步驟介紹如何接入微信二次分享操做。ios

官方接入文檔：https://mp.weixin.qq.com/wiki...git

一、配置JS接口安全域名

一、作二次分享首先須要申請一個微信服務號。github

二、登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」web

注意：這裏的JS接口安全域名就是你須要進行二次分享頁面的域名。ajax

注意：配置JS接口安全域名時，首先須要MP_verify_576FDJKHHJK29XXTpb.txt 文件放置在域名根目錄下；而後才能保存成功，若是配置的域名下沒有MP_verify_576FDJKHHJK29XXTpb.txt 文件是沒法保存成功的。npm

二、引入js文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/...json

如需進一步提高服務穩定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js... （支持https）。

以上是官方的原文提供的js文件地址，咱們通常都會把jweixin-1.4.0.js文件下載下來放在咱們域名的靜態文件中進行引入。

https://h5.jameswain.com/static/lib/jweixin-1.4.0.js // 發佈到線上的地址

在index.html頁面中加入如下代碼：

三、訪問服務端接口獲取配置信息

這裏須要經過服務端提供的獲取配置信息接口，獲取權限驗證的相關配置，例如我獲取配置信息的接口是：http://m.ximalaya.com/x-third... 返回結果以下：

{
    "appId": "wx3a4b4454f28a932b",
    "timestamp": 1541226502,
    "nonceStr": "705a85bb-1e66-4a54-85a8-ebef769faee6",
    "signature": "3b4e00872606b69438c168c13fad772327b1d1b3"
}

編寫配置微信分享公共代碼

// src/common/wxsdk.js
import axios from 'axios'
/**
 * 獲取微信分享配置接口地址
 * 換項目的時候，直接拷貝該文件，修改這個接口地址便可直接使用微信分享
 */
const GET_SHARE_CONFIG_URL = '/x-thirdparty-web/weixinJssdk/config?signatureUrl=http%3A%2F%2Fm.ximalaya.com%2F49265909%2Falbum%2F11501536%2F&thirdpartyId=17&_=1541230577945';

let wxconfig = null;
/**
 * 初始化微信分享配置
 */
async function initWeiXinConfig() {
  try {
    const { data } = await axios.get(GET_SHARE_CONFIG_URL);
    wxconfig = data;
    wx.config({
      debug: true,                                // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
      appId: wxconfig.appId,                              // 必填，公衆號的惟一標識
      timestamp: wxconfig.timestamp,                      // 必填，生成簽名的時間戳
      nonceStr: wxconfig.nonceStr,                        // 必填，生成簽名的隨機串
      signature: wxconfig.signature,                      // 必填，簽名
      jsApiList: [                                        // 必填，須要使用的JS接口列表
        'checkJsApi',               // 判斷當前客戶端是否支持指定JS接口
        'onMenuShareTimeline',      // 獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容接口
        'onMenuShareAppMessage',    // 獲取「分享給朋友」按鈕點擊狀態及自定義分享內容接口
        'onMenuShareQQ',            // 獲取「分享到QQ」按鈕點擊狀態及自定義分享內容接口
        'onMenuShareWeibo',         // 獲取「分享到騰訊微博」按鈕點擊狀態及自定義分享內容接口
        'onMenuShareQZone',         // 獲取「分享到QZone」按鈕點擊狀態及自定義分享內容接口
        'hideMenuItems',            // 批量隱藏功能按鈕接口
        'showMenuItems',            // 批量顯示功能按鈕接口
        'hideAllNonBaseMenuItem',   // 隱藏全部非基礎按鈕接口
        'showAllNonBaseMenuItem',   // 顯示全部功能按鈕接口
        'translateVoice',           // 識別音頻並返回識別結果接口
        'startRecord',              // 開始錄音接口
        'stopRecord',               // 中止錄音接口
        'onVoiceRecordEnd',
        'playVoice',                // 播放語音接口
        'onVoicePlayEnd',
        'pauseVoice',               // 暫停播放接口
        'stopVoice',                // 中止播放接口
        'uploadVoice',              // 上傳語音接口
        'downloadVoice',            // 下載語音接口
        'chooseImage',              // 拍照或從手機相冊中選圖接口
        'previewImage',             // 預覽圖片接口
        'uploadImage',              // 上傳圖片接口
        'downloadImage',            // 下載圖片接口
        'getNetworkType',           // 獲取網絡狀態接口
        'openLocation',             // 使用微信內置地圖查看位置接口
        'getLocation',              // 獲取地理位置接口
        'hideOptionMenu',           // 隱藏右上角菜單接口
        'showOptionMenu',           // 顯示右上角菜單接口
        'closeWindow',              // 關閉當前網頁窗口接口
        'scanQRCode',               // 調起微信掃一掃接口
        'chooseWXPay',              // 發起一個微信支付請求
        'openProductSpecificView',  // 跳轉微信商品頁接口
        'addCard',                  // 批量添加卡券接口
        'chooseCard',               // 調起適用於門店的卡券列表並獲取用戶選擇列表
        'openCard'                  // 查看微信卡包中的卡券接口
      ]
    });
  } catch (e) {
    console.error(e);
  }
};

export default {
  /**
   * 設置微信分享
   * @param opts
   */
  share(opts) {
    if (wx) {
      if (!wxconfig) {
        initWeiXinConfig();
      }
      //  默認配置
      const defaultOpts = {
        title: '互聯網之子',
        desc: '在長大的過程當中，我才慢慢發現，我身邊的全部事，別人跟我說的全部事，那些所謂原本如此，註定如此的事，它們其實沒有非得如此，事情是能夠改變的。更重要的是，有些事既然錯了，那就該作出改變。',
        link: window.location.href,
        imgUrl: 'http:// demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
        trigger: function (res) {
          //  不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回
          console.log('用戶點擊分享到朋友圈', res);
        },
        success: function (res) {
          console.log('已分享');
        },
        cancel: function (res) {
          console.log('已取消');
        },
        fail: function (res) {
          console.log(JSON.stringify(res));
        }
      }
      wx.ready(function () {
        //  分享到朋友圈
        wx.onMenuShareTimeline({...defaultOpts, ...opts, ...{title: opts.desc, desc: opts.title}});
        //  分享給朋友
        wx.onMenuShareAppMessage({...defaultOpts, ...opts});
        //  分享到QQ
        wx.onMenuShareQQ({...defaultOpts, ...opts});
        //  分享到騰訊微博
        wx.onMenuShareWeibo({...defaultOpts, ...opts})
        //  分享到QZone
        wx.onMenuShareQZone({...defaultOpts, ...opts});
      });
      wx.error(function (res) {
        console.log('error=>', res);
      });
    } else {
      console.log('當前不是微信環境');
    }
  }
}

四、在入口文件中進行分享配置

在Vue的入口文件中進行微信二次分享的配置，分享文案能夠根據你的業務進行調整。
注意：二次分享必需要把代碼部署到你配置的JS接口安全域名下才能看到效果。

// src/main.js
import wxsdk from './common/wxsdk'

// 配置微信分享
wxsdk.share({
  title: '互聯網之子',
  desc: '長大的過程當中，我才慢慢發現，我身邊的全部事，別人跟我說的全部事，那些所謂原本如此，註定如此的事，它們其實沒有非得如此，事情是能夠改變的。更重要的是，有些事既然錯了，那就該作出改變。',
  imgUrl: 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C25%2C550%2C363%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=afce76f80055b31988b6d8357e99ae14/267f9e2f070828381f3de6edb299a9014c08f112.jpg',
  trigger: function (res) {
    //  不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回
    console.log('用戶點擊分享到朋友圈', res);
  },
  success: function (res) {
    console.log('已分享');
  },
  cancel: function (res) {
    console.log('已取消');
  },
  fail: function (res) {
    console.log(JSON.stringify(res));
  }
});

此時微信二次分享就已經大功告成了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。