h5微信分享

時間 2019-11-10

標籤 h5 微信分享简体版

原文原文鏈接

h5分享的步驟（前端須要完成的部分）javascript

1.綁定域名html

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

2.引入Js文件java

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

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

備註：支持使用 AMD/CMD 標準模塊加載方法加載ajax

3.經過config接口注入權限驗證配置api

找後臺要接口，拿到下面這些字段值安全

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，須要使用的JS接口列表
});
若是你已經引用了jquery,能夠直接使用jquery提供的ajax

$.ajax({ url: "xxxxxxxxxx?url=xxxxxxxxxxxxxxx", success: function(data){
        // ?= url後面寫的是你須要轉發的頁面連接
        console.log(data.result);
        wx.config({
        debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
        appId: data.result.appId, // 必填，公衆號的惟一標識
        timestamp:data.result.timestamp , // 必填，生成簽名的時間戳
        nonceStr: data.result.nonceStr, // 必填，生成簽名的隨機串
        signature: data.result.signature,// 必填，簽名
        jsApiList: [ 'updateAppMessageShareData',] // 必填，須要使用的JS接口列表  });
 }
});

若是不須要引用jquery，能夠用下面原生ajax請求~~

 //建立異步對象
 var xhr = new XMLHttpRequest();
    //設置請求的類型及url
    xhr.open('post', 'xxxxxxxxxxx?url='+location.href.split('#')[0] );
    //post請求必定要添加請求頭才行否則會報錯
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //發送請求
    xhr.send();
    xhr.onreadystatechange = function () {
        // 這步爲判斷服務器是否正確響應
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.response);
            console.log(JSON.parse(xhr.response).info.appId)
            var data = JSON.parse(xhr.response).info;
            console.log(data)
            wx.config({
            　　debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
            　　appId: data.appId, // 必填，公衆號的惟一標識
            　　timestamp:data.timestamp , // 必填，生成簽名的時間戳
            　　nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
            　　signature: data.signature,// 必填，簽名
            　　jsApiList: [ 'updateAppMessageShareData','updateTimelineShareData'] // 必填，須要使用的JS接口列表 使用了分享朋友和朋友圈
            });
            wx.checkJsApi({
    　　　　　　jsApiList: ['updateAppMessageShareData','updateTimelineShareData'], // 須要檢測的JS接口列表，全部JS接口列表見附錄2,
    　　　　　　success: function(res) {
      　　　　　　console.log(res)
    　　　　　　// 以鍵值對的形式返回，可用的api值true，不可用爲false
    　　　　　　// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
   　　　　　}
});
}

補充：wx.checkJsApi檢查基礎接口、判斷當前客戶端版本是否支持指定JS接口，能夠不寫，若是你轉發失敗，能夠加上用來測試！服務器

4：經過ready接口處理成功驗證

wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
    wx.updateAppMessageShareData({ //自定義「分享給朋友」及「分享到QQ」按鈕的分享內容
        title: '', // 分享標題
        desc: '', // 分享描述
        link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
        imgUrl: '', // 分享圖標
        success: function () {
          // 設置成功
        }
    });
     wx.updateTimelineShareData({ //自定義「分享到朋友圈」及「分享到QQ空間」按鈕的分享內容（1.4.0）
        title: '', // 分享標題
        link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
        imgUrl: '', // 分享圖標
        success: function () {
          // 設置成功
        }
    })
});

5：經過error接口處理失敗驗證

wx.error(function(res){
    // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
});

附上完整demo

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta
  name="viewport"
  content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta name="screen-orientation" content="portrait">
 <meta name="x5-orientation" content="portrait">
<title>微信分享</title>    
</head>
<body>
  <div>微信分享</div>

  <!-- 引入js文件 -->
  <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
  <script>
  window.onload = function(){
    //建立異步對象
    var xhr = new XMLHttpRequest();
    //設置請求的類型及url
    xhr.open('post', 'xxxxxxxxxxx?url='+location.href.split('#')[0] );
    //post請求必定要添加請求頭才行否則會報錯
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //發送請求
    xhr.send();
    xhr.onreadystatechange = function () {
        // 這步爲判斷服務器是否正確響應
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.response);
            console.log(JSON.parse(xhr.response).info.appId)
            var data = JSON.parse(xhr.response).info;
            console.log(data)
            //經過config接口注入權限驗證配置
            wx.config({
            debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
            appId: data.appId, // 必填，公衆號的惟一標識
            timestamp:data.timestamp , // 必填，生成簽名的時間戳
            nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
            signature: data.signature,// 必填，簽名
            jsApiList: [ 'updateAppMessageShareData','updateTimelineShareData'] // 必填，須要使用的JS接口列表
            });
            wx.checkJsApi({
              jsApiList: ['updateAppMessageShareData','updateTimelineShareData'], // 須要檢測的JS接口列表
              success: function(res) {
                console.log(res)
            // 以鍵值對的形式返回，可用的api值true，不可用爲false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
              }
            });
            //分享
            wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
              wx.updateAppMessageShareData({ //自定義「分享給朋友」及「分享到QQ」按鈕的分享內容
                  title: '', // 分享標題
                  desc: '', // 分享描述
                  link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                  imgUrl: '', // 分享圖標
                  success: function () {
                    // 設置成功
                  }
              });
              wx.updateTimelineShareData({ //自定義「分享到朋友圈」及「分享到QQ空間」按鈕的分享內容（1.4.0）
                  title: '', // 分享標題
                  link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                  imgUrl: '', // 分享圖標
                  success: function () {
                    // 設置成功
                  }
              });
          });
          wx.error(function(res){
              // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
          });

        }
    };
     
  }
 
  </script>
</body>
</html>

官方文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

相關標籤/搜索

每日一句

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