面微信跳轉的方式主要介紹了兩種：微信分享給好友和微信掃碼跳轉。

前提：從微信公眾號那邊獲取appid，secret，grantType四個參數備用。

1、 綁定域名

先登陸公眾平臺進入“公眾號設置”的“功能設置”里面填寫“JS接口安全域名”。（必須滴！！！）

如果你使用本地環境或者測試環境就要把ip配置在IP白名單中。

備注：登錄后可在“開發者中心”查看對應的接口權限。

2、引入JS文件

微信公眾平臺：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

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

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

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

3、微信自定義分享按鈕的分享內容

下方使用的data是后臺響應的數據，具體請繼續查看下方1.4章的操作

（1）通過config接口注入權限驗證配置

wx.config({  
    /*debug:設置調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳
    入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。*/
    debug: false, 
    appId: data.appId, //必填，公眾號唯一標識
    timestamp: data.timestamp, //必填，生成簽名的時間戳
    nonceStr: data.nonceStr, //必填，生成簽名的隨機串
    signature: data.sign, //必填，簽名
    jsApiList: [ //必填，需要使用的JS接口列表
        'updateAppMessageShareData',
        'updateTimelineShareData',
        'onMenuShareAppMessage',  //舊的接口，即將廢棄    
        'onMenuShareTimeline', //舊的接口，即將廢棄
    ]
});

（2）通過ready接口處理成功驗證

config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。

wx.ready(function () {
    var options={
        title: data.title, // 分享標題
        desc: data.desc, // 分享描述
        // link: JS安全域名一致, linkto微信跳轉攜帶的鏈接（中轉頁面）
        link: 'https://XXXXX.com/linkto.html?wx=' + data.link, 
        // imgUrl分享圖標存放地址
        imgUrl: 'https://XXXX.com/項目名/img/share_bg.png', 
        success: function () {
            // 用戶確認分享后執行的回調函數
        },
        cancel: function () {
            // 用戶取消分享后執行的回調函數
        }
    };
    wx.updateAppMessageShareData(options); // 分享到朋友圈
    wx.updateTimelineShareData(options); // 分享給朋友
    wx.onMenuShareAppMessage(options); // 分享給朋友
    wx.onMenuShareTimeline(options); // 分享到QQ
});

具體的微信分享框如下圖所示：

（3）通過error接口處理失敗驗證

config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名。

wx.error(function(res){
});

接口調用說明

所有接口通過wx對象(也可使用jWeixin對象)來調用，參數是一個對象，除了每個接口本身需要傳的參數之外，還有以下通用參數：

1. success：接口調用成功時執行的回調函數。
2. fail：接口調用失敗時執行的回調函數。
3. complete：接口調用完成時執行的回調函數，無論成功或失敗都會執行。
4. cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操作的api才會用到。
5. trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。

備注：不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。

4 、后臺返回的微信自定義分享按鈕的分享內容的data

@GET
@Path(value="getData")
@Produces(MediaType.APPLICATION_JSON)
public Response getData() {
     Map<String, Object> result=new HashMap<>();
     try {
           //獲取access_token
          String wxUrl,response ;
          JSONObject jsonObj;
          String accessToken=redisService.get("accessToken"); 
          if(StringUtil.isEmpty(accessToken)){
              String wxUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appId + "&secret=" + appSecret;
              String response=HttpUtil.sendGet(wxUrl);
              JSONObject jsonObj=JSONObject.parseObject(response);
              accessToken=jsonObj.getString("access_token");
              //全局access_token每天獲取次數最多為2000次，可放在redis中重復使用
              redisService.set("accessToken", 3600, accessToken);  
          }

          //獲取ticket
          wxUrl="https://api.weixin.qq.com/cgi-bin/ticket/getticket?    access_token=" + accessToken + "&type=jsapi";
          response=HttpUtil.sendGet(wxUrl);
          jsonObj=JSONObject.parseObject(response);
          String ticket=jsonObj.getString("ticket");

          //......業務流程......

          String recUrl="https://XXXX.com/項目名稱/rest/oauth";  //對應1.6章的微信重定向接口
          String nonceStr=UUID.randomUUID().toString().replace("-", "").substring(0, 16);
          String timestamp=String.valueOf(System.currentTimeMillis() / 1000);
          String urlNow="https://XXXXX.com/項目名/當前頁面名.html";
              String decript="jsapi_ticket=" + ticket + "&noncestr=" + nonceStr + "×tamp=" 
                  + timestamp + "&url=" + urlNow; //4個參數具體的看下面介紹
          String sign=HttpUtil.getSignature(decript);
          recUrl=HttpU.getURLEncoderString(recUrl);
          result.put("link", recUrl);
          result.put("sign", sign);
          result.put("appId", appId);
          result.put("timestamp", timestamp);
          result.put("nonceStr", nonceStr);
          result.put("title", "Window10自帶虛擬機Hyper-V安裝");
          result.put("desc", "Window10自帶虛擬機Hyper-V安裝，在虛擬機上安裝CenOS版本的Linux示范。");
     } catch (Exception e) {
          e.printStackTrace();
          result.put("code", ERROR);
          result.put("msg", "異常");
     }
     return Response.ok(result).build();
} 

簽名算法

【String decript="jsapi_ticket=" + ticket + "&noncestr=" + nonceStr + "×tamp=" + timestamp + "&url=" + urlNow;】參數介紹如下：

（1）jsapi_ticket：jsapi_ticket是公眾號用于調用微信JS接口的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由于獲取jsapi_ticket的api調用次數非常有限，頻繁刷新jsapi_ticket會導致api調用受限，影響自身業務，開發者必須在自己的服務全局緩存jsapi_ticket 。

• access_token有效期7200秒，開發者必須在自己服務全局緩存
• 用第一步拿到的access_token采用http GET方法請求jsapi_ticket： https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

（2）noncestr：隨機字符串

（3）timestamp：時間戳

（4）url：當前網頁的URL，不包含#及其后面的部分

對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式用&拼接成字符串string1。所有參數名均為小寫字符。對string1作sha1加密，字段名和字段值都采用原始值，不進行URL 轉義。

注意事項

1. 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
2. 簽名用的url必須是調用JS接口頁面的完整URL。
3. 出于安全考慮，開發者必須在服務器端實現簽名的邏輯

5、中轉頁面

下面是中轉界面，由這個頁面再跳轉到微信端

$(function() {    
      var link=getParam("wx");//獲取小程序跳轉要傳的參數    
      var url="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid
            +"&redirect_uri=" + encodeURIComponent(link) + "&response_type=code&scope=snsapi_base"
            +"&state=STATE&connect_redirect=1#wechat_redirect";    
      window.location.href=url;
}); 

微信自動調用oauth2/authorize接口，運行完接口后得到一次性的code，會自動重定向到redirect_uri？code=XXX&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect

6、微信重定向接口

這里聊到的微信重定向接口就是上面的link路徑，具體詳情看下面的代碼。

信

51rgb

網頁自動跳轉頁面的代碼在很多時候都非常的有用，下面的是兩個簡單的例子。僅供參考。

方案一，用<meta>里直接寫刷新語句：

<html>

<head>

<meta http-equiv="Content-Language" content="zh-CN">

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">

<meta http-equiv="refresh" content="5;url=http://www.51rgb.com">

<title>html網頁自動跳轉代碼--西農大網站</title>

</head>

<body>

測試：html網頁自動跳轉代碼<br/>

你可以在這里寫下你想的一切東西！<br />

如：西北農林科技大學是一所985、211院校。<br />

</body></html>

方案二，用javascript腳本來跳轉

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>正在進入西農大網站</title>

</head>

<body>

<form name=loading>

<p align=center> <font color="#0066ff" size="2">正在進入，請稍等</font><font color="#0066ff" size="2" face="Arial">...</font>

<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">

<inputtype=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">

<script>

var bar=0

var line="||"

var amount="||"

count

function count{

bar=bar+2

amount=amount + line

document.loading.chart.value=amount

document.loading.percent.value=bar+"%"

if (bar<99)

{setTimeout("count",100);}

else

{window.location=http://www.51rgb.com;}

}</script>

</p>

</form><p align="center">

測試：html網頁自動跳轉代碼<br/>

你可以在這里寫下你想的一切東西！<br />

如：西北農林科技大學是一所985、211院校。<br /><br />

如果您的瀏覽器不支持跳轉,<astyle="text-decoration: none" ><font color="#FF0000">請點這里</font></a>.</p>

</body>

</html>

↓↓↓