微信網頁開發實踐與總結

最新項目須要，開發微信端應用，用到微信生成菜單訪問web應用，實際開發中一些技巧與你們分享，不足之處，歡迎交流指正！

一：註冊微信開發測試帳號

     微信企業號申請比較繁瑣，好找有微信測試帳號，幾乎能夠開發微信所有的API

    訪問地址：http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

    微信掃描登陸便可

    

 此時你會獲得一個appID 和 appsecret

二：配置外網服務器

   微信開發，必須將項目部署到外網而且端口必須爲80，這裏爲你們推薦很是優秀的外網映射工具natapp.exe，免費版直接雙擊便可

此時就能夠外網訪問你的工程了

三：簽名校驗

  實際開發中要建立一個servlet,並在get方法中接收微信服務器發送來的參數，代碼以下：

/**
* 確認請求來自微信服務器
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("開始校驗簽名");
/**
* 接收微信服務器發送請求時傳遞過來的4個參數
*/
String signature = request.getParameter("signature");//微信加密簽名signature結合了開發者填寫的token參數和請求中的timestamp參數、nonce參數。
String timestamp = request.getParameter("timestamp");//時間戳
String nonce = request.getParameter("nonce");//隨機數
String echostr = request.getParameter("echostr");//隨機字符串
if(signature==null||"".equals(signature)){
response.getWriter().write("error");
return;
}
//排序
String sortString = sort(TOKEN, timestamp, nonce);
//加密
String mySignature = sha1(sortString);
//校驗簽名,經過檢驗signature對請求進行校驗，若校驗成功則原樣返回echostr,表示接入成功，不然接入失敗
if (mySignature != null && mySignature != "" && mySignature.equals(signature)) {
System.out.println("簽名校驗經過。");
//若是檢驗成功輸出echostr，微信服務器接收到此輸出，纔會確認檢驗完成。
//response.getWriter().println(echostr);
response.getWriter().write(echostr);
} else {
System.out.println("簽名校驗失敗.");
}

}

/**
* 排序方法
*
* @param token
* @param timestamp
* @param nonce
* @return
*/
public String sort(String token, String timestamp, String nonce) {
String[] strArray = {token, timestamp, nonce};
Arrays.sort(strArray);
StringBuilder sb = new StringBuilder();
for (String str : strArray) {
sb.append(str);
}

return sb.toString();
}

/**
* 將字符串進行sha1加密
*
* @param str 須要加密的字符串
* @return 加密後的內容
*/
public String sha1(String str) {
try {
MessageDigest digest = MessageDigest.getInstance("SHA-1");
digest.update(str.getBytes());
byte messageDigest[] = digest.digest();
// Create Hex String
StringBuffer hexString = new StringBuffer();
// 字節數組轉換爲 十六進制 數
for (int i = 0; i < messageDigest.length; i++) {
String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
if (shaHex.length() < 2) {
hexString.append(0);
}
hexString.append(shaHex);
}
return hexString.toString();

} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
return "";
}

 而且在微信頁面配置你的URL（映射到外網的url）和token（隨意字符串）

點擊提交便可，若是工程提示「簽名正確」則配置成功！

 

四：獲取accessToken

能夠經過本地工程來獲取accessToken,獲取方法以下：

/**
* 獲取access_token
* @return AccessToken
*/
private AccessToken getAccessToken(String appId, String appSecret) {
NetWorkHelper netHelper = new NetWorkHelper();
/**
* 接口地址爲https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET ，其中grant_type固定寫爲client_credential便可。
*/
String Url = String.format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s", appId, appSecret);
//此請求爲https的get請求，返回的數據格式爲{"access_token":"ACCESS_TOKEN","expires_in":7200}
String result = netHelper.getHttpsResponse(Url, "");
System.out.println("獲取到的access_token="+result);
//使用FastJson將Json字符串解析成Json對象
JSONObject json = JSON.parseObject(result);
AccessToken token = new AccessToken();
token.setAccessToken(json.getString("access_token"));
token.setExpiresin(json.getInteger("expires_in"));
return token;
}

固然，有更簡單的方式，經過微信在線調試，依然能夠輕鬆獲取到accessToken,方式以下：

 訪問http://mp.weixin.qq.com/debug/，輸入你的本地appid和acceptid

點擊「檢測問題」，便可看到生成的access_token 了，以下：

擁有了這個access_token , 你就能夠進一步作開發了

 

 五：生成微信菜單

你能夠經過java類生產微信菜單，也能夠經過在線調試的方式快速生成，這裏主要介紹在線調試方式，很是簡單：

 ①：訪問：http://mp.weixin.qq.com/debug/，選擇「自定義」菜單下拉選項，輸入你剛纔生成的access_token, 輸入菜單json，點擊檢測問題便可

 

json以下：

{
"button": [
{
"name": "雲平臺",
"sub_button": [
{
"type": "view",
"name": "平臺設計",
"url": "http://www.soso.com/"
},
{
"type": "click",
"name": "平臺功能",
"key": "V1001_GOOD"
}
]
},
{
"name": "個人信息",
"sub_button": [
{
"type": "view",
"name": "基本信息",
"url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=http://25f6e75e.ngrok.natapp.cn/wxweb/info.htm&response_type=code&scope=snsapi_base&state=123#wechat_redirect"
},
{
"type": "view",
"name": "學習經歷",
"url": "http://v.qq.com/"
},
{
"type": "click",
"name": "工做經歷",
"key": "V1001_GOOD"
}
]
},
{
"name": "找資源",
"sub_button": [
{
"type": "view",
"name": "搜索",
"url": "http://www.soso.com/"
},
{
"type": "view",
"name": "視頻",
"url": "http://v.qq.com/"
},
{
"type": "click",
"name": "贊一下咱們",
"key": "V1001_GOOD"
}
]
}
]
}

 

 配置菜單url時須要特別注意：經過微信訪問網頁須要獲取受權，因此訪問路徑必須按照以下方式，不然是沒法打開網頁的：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=http://25f6e75e.ngrok.natapp.cn/wxweb/info.htm&response_type=code&scope=snsapi_base&state=123#wechat_redirect

詳細參照微信開發文檔：http://mp.weixin.qq.com/wiki/4/9ac2e7b1f1d22e9e57260f6553822520.html

 六：關注該公衆號，請求網頁

掃描你的測試帳號二維碼便可

 

 

七：微信開發調試工具

 使用微信官方提供的開發調試工具wechat_web_devtools_0.7.0_x64.exe，能夠輕鬆經過瀏覽器調試微信應用

 

 

 下班了，先寫到這裏，之後有時間繼續完善，有問題的朋友能夠加我Q 2529771715交流學習