一、公眾號設置 ? ? ?1.賬號詳情： ? ? ? ? ? 公眾號的頭像、二維碼、名稱都是必須填寫的，如果沒有這些信息，是不能進行網頁開發的。

2.功能設置 ? ? ? ? ? JS接口安全域名： 設置JS接口安全域名后，公眾號開發者可在該域名下調用微信開放的JS接口。例如，在做分享的時候，需要引入微信的js文件，微信會對請求的域名校驗是否合法。 ? ? ? ? ??
? ? ? ? ? 網頁授權域名： 授權回調頁面域名。在做網頁開發的時候，往往需要用戶授權，在授權通過后，也會對域名進行合法性校驗。 ? ? ? ? ?? ?????另：a.在JS接口安全域名和網頁授權域名的設置中都需要下載一個認證證書，放到項目的根路徑下，以便微信對訪問的地址進行校驗。 ? ? ? ? ? ? ? ? b.設置的域名為通過ICP備案的公網域名。
二、基本配置 ? ? 1.公眾號開發信息配置：
a.開發者ID：也就是公眾號的id，用來標識當前的公眾號。 b.開發者密碼： 開發者密碼是校驗公眾號開發者身份的密碼，具有極高的安全性。一般在獲取微信信息時需要此密碼。

2. 服務器配置 主要功能： 啟用并設置服務器配置后，用戶發給公眾號的消息以及開發者需要的事件推送，將被微信轉發到該URL中。 在微信網頁開發中，并沒有涉及到這一部分內容，所以沒有做過多的了解。

二、網頁開發流程 對于微信公眾號的二次開發是一個非常龐大的體系，而針對于公眾號的網頁開發僅僅是龐大體系中的非常小的一部分了。但是這一部分往往是最常用的一塊內容，我本人也是因為項目需要才開始接觸的。另一方面，由于自己認識的同事、朋友做這一部分開發的也特別少，所以自己只能摸著石頭過河，跌跌撞撞的完成了領導交給的任務。在此貼出來，一是和大家分享一下自己的一點經驗，希望對新接觸這塊內容的朋友有所幫助，二是希望自己能通過這次總結，能再有所收獲。 1.對于微信公眾號的開發，建議大家還是仔細讀讀微信給大家提供的 技術文檔。雖然文檔的內容總是感覺沒有其他一些開發文檔那樣正式，但是介紹的還是挺全面的。比自己從網上找一些開發總結來的更加實惠，更加全面。 2.網頁授權。 網頁授權就是個人微信賬號在打開公眾號里的鏈接的時候需要個人微信賬號運行公眾號獲取微信的信息。這是網頁開發的重點，如果沒有授權，那么就無法進行微信分享等其他操作。網頁授權分為兩種，一是靜默授權，就是在微信用戶在不知情的情況下就默認授權微信公眾號獲取微信用戶的一部分信息，當然這部分信息是十分局限的，如微信賬號在微信公眾號里的openid等信息；二是用戶授權，這種方式就是我們經常看到的那種，某某公眾號需要獲取您的以下信息，然后我們如果點擊“確認登錄”才會打開鏈接，否則就會打開失敗。如下圖：


3.獲取微信公眾號access_token和jspa_ticket 概念： access_token是公眾號的全局唯一接口調用憑據，公眾號調用各接口時都需使用access_token。開發者需要進行妥善保存。access_token的存儲至少要保留512個字符空間。access_token的有效期目前為2個小時，需定時刷新，重復獲取將導致上次獲取的access_token失效。 ? ? ? ? ? ? ? ? ? ? ?jsapi_ticket是公眾號用于調用微信JS接口的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由于獲取jsapi_ticket的api調用次數非常有限，頻繁刷新jsapi_ticket會導致api調用受限，影響自身業務，開發者必須在自己的服務全局緩存jsapi_ticket ? ? ? ? ? 說明：
? ? ? ? ? ? ?? ?????由于access_token的有效時間僅僅兩個小時，而且又是全局唯一接口調用憑據，所以在做網頁開發的時候，首先要做的額就是獲取access_token。但是對于此token信息，在微信服務端做了一個調用次數限制，即每個公眾號每天最多可以調用2000次，所以為了保證系統時刻都能獲取token信息，而且不超過獲取次數，我們只能采取定時獲取的方式。每天五分鐘獲取一次token信息（當然也可根據具體業務做出合適的調整）。 ? ? ? ? ? ?????同理，jsapi_ticket同樣需要定時獲取。需要注意的是jsapi_ticket做js中生成簽名的重要參數 ? ? ? ? ? 獲取方式： ? ? ? ? ? a. access_token獲取： ? ? ? ? ? ? ? ?https請求方式: GET ? ? ? ? ? ? ?? ?????https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET ? ? ? ? ? ? ? ?返回結果： {"access_token":"ACCESS_TOKEN","expires_in":7200}
? ? ? ? ? b. jsapi_ticket獲取： ? ? ? ? ? ? ? ? ? ?用第一步拿到的access_token 采用http GET方式請求獲得jsapi_ticket（有效期7200秒，開發者必須在自己的服務全局緩存jsapi_ticket）： ? ? ? ? ? ? ?? ?????https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

返回結果： {"errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200}
4.獲取code 對于code這個東西，在我剛開始接觸微信網頁開發的時候，一直想不明白，查了文檔，還是不知道這個code是做什么的，是哪來的…… 后來，時間長了，慢慢的才發現這個code僅僅是一個橋梁，它是在我們通過微信瀏覽器里訪問我們的服務地址的時候，微信服務器會自動在目標地址的后邊加上code等參數。所以我們如果用的是jsp頁面，那么就通過request.getParameters("code")方法即可獲取。假如用的是html頁面，則需要將當前頁面的url地址獲取到，然后截取出code參數的值。當然這些操作的前提是通過微信的瀏覽器打開，否則是無效的。 獲取方式： https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect? 注意： APPID是公眾號的id，REDIRECT_URI是我們目標服務的地址，SCOPE分為兩種，主要是為了區分靜默授權（ 不彈出授權頁面，直接跳轉，只能獲取用戶openid）和顯示授權（ 彈出授權頁面，可通過openid拿到昵稱、性別、所在地。并且， 即使在未關注的情況下，只要用戶授權，也能獲取其信息） code說明 ： code作為換取access_token的票據，每次用戶授權帶上的code將不一樣，code只能使用一次，5分鐘未被使用自動過期。
5.獲取openid 首先請注意，這里通過code換取的是一個特殊的網頁授權access_token,與基礎支持中的access_token（該access_token用于調用其他接口）不同。公眾號可通過下述接口來獲取網頁授權access_token。如果網頁授權的作用域為snsapi_base，則本步驟中獲取到網頁授權access_token的同時，也獲取到了openid，snsapi_base式的網頁授權流程即到此為止。
尤其注意：由于公眾號的secret和獲取到的access_token安全級別都非常高，必須只保存在服務器，不允許傳給客戶端。后續刷新access_token、通過access_token獲取用戶信息等步驟，也必須從服務器發起。
請求方法
獲取code后，請求以下鏈接獲取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
返回結果： { "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" }
6.獲取用戶信息 如果網頁授權作用域為snsapi_userinfo，則此時開發者可以通過access_token和openid拉取用戶信息了。 請求方法 http：GET（請使用https協議） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN? 參數說明

參數	描述
access_token	網頁授權接口調用憑證,注意：此access_token與基礎支持的access_token不同
openid	用戶的唯一標識
lang	返回國家地區語言版本，zh_CN 簡體，zh_TW 繁體，en 英語

返回說明： { ? ?"openid":" OPENID",
" nickname": NICKNAME,
"sex":"1",
"province":"PROVINCE"
"city":"CITY",
"country":"COUNTRY",
"headimgurl": ? ?"http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ
4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2" ? ? ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

參數	描述
openid	用戶的唯一標識
nickname	用戶昵稱
sex	用戶的性別，值為1時是男性，值為2時是女性，值為0時是未知
province	用戶個人資料填寫的省份
city	普通用戶個人資料填寫的城市
country	國家，如中國為CN
headimgurl	用戶頭像，最后一個數值代表正方形頭像大小（有0、46、64、96、132數值可選，0代表640*640正方形頭像），用戶沒有頭像時該項為空。若用戶更換頭像，原有頭像URL將失效。
privilege	用戶特權信息，json 數組，如微信沃卡用戶為（chinaunicom）
unionid	只有在用戶將公眾號綁定到微信開放平臺帳號后，才會出現該字段。

7.分享功能 第一步：公眾號配置。 公眾號設置---》功能設置，設置JS接口安全域名和網頁授權域名。 注：需要把認證證書下載到項目的根目錄或者指定的目錄文件下。
第二步：JS設置 在頁面中引入微信對外js文件： <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
配置代碼如下： <script type="text/javascript"> wx.config({debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。appId: '${appid}', // 必填，公眾號的唯一標識timestamp : '${share.timestamp}', // 必填，生成簽名的時間戳nonceStr : '${share.noncestr}', // 必填，生成簽名的隨機串signature : '${share.signature}',// 必填，簽名，見附錄1jsApiList : ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2 }); wx.ready(function () {wx.checkJsApi({jsApiList: ['getNetworkType','previewImage'],success: function (res) {//alert(JSON.stringify(res));}});var shareObj = {title: '${shareTitle}',desc: '分享描述',link: '${shareQQUrl}',imgUrl: '${shareImg}',trigger: function (res) {//alert('用戶點擊發送給朋友');},success: function (res) {//alert('已分享');},cancel: function (res) {//alert('已取消');},fail: function (res) {//alert(JSON.stringify(res));}};var shareQQObj = {title: '${shareTitle}',desc: '分享描述',link: '${shareQQUrl}',imgUrl: '${shareImg}',trigger: function (res) {//alert('用戶點擊發送給朋友');},success: function (res) {//alert('${shareQQUrl}');},cancel: function (res) {//alert('已取消');},fail: function (res) {//alert(JSON.stringify(res));}};//分享朋友wx.onMenuShareAppMessage(shareObj);//分享朋友圈wx.onMenuShareTimeline(shareObj);//分享到QQwx.onMenuShareQQ(shareQQObj);//分享到QQ空間wx.onMenuShareQZone(shareQQObj); });</script>

后端服務代碼： 對于微信分享功能，后端服務需要將如下信息提供給前端： a. APPID b. 分享標題——shareTitle， c.分享描述——shareDesc， d.分享地址——shareUrl， e.分享縮略圖——shareImg， f.微信配置信息——jsapi_ticket、隨機數（noncestr）、時間戳（timestamp）、地址（url）、簽名（signature）
具體代碼如下： @Overridepublic String getShareInfo(String jsonParam) {Map<String, Object> result = new HashMap<>();ReturnCodeUtils.initParms(result);Map<String, Object> data = new HashMap<>();try {//appidString appid=props.getAppid();JSONObject jsonObject=JSONObject.fromObject(jsonParam);if (!jsonObject.has("pageUrl")) {ReturnCodeUtils.error(result, ReturnCode.PARAM_ERROR_302.getCode());}else {//hrefString href= jsonObject.getString("pageUrl");//頁面參數String params="";String content = "分享描述";WxSignature ws = new WxSignature();//// 微信簽名，刷新access_token和Jsticketwxj.refreshAccessTokenAndJsticket();ws.setJsapi_ticket(WeixinConstants.JSAPI_TICKET.getTicket());//ws.setNoncestr(CommonUtils.getRandomString(8));//noncestrws.setTimestamp(String.valueOf(CommonUtils.getNowTimeStampStr()));//timestampws.setUrl(href);logger.info("=================="+"jsapi_ticket=" + WeixinConstants.JSAPI_TICKET.getTicket() + "&noncestr="+ ws.getNoncestr() + "×tamp=" + ws.getTimestamp() + "&url=" + ws.getUrl());ws.setSignature(DigestUtils.sha1Hex("jsapi_ticket=" + WeixinConstants.JSAPI_TICKET.getTicket() + "&noncestr="+ ws.getNoncestr() + "×tamp=" + ws.getTimestamp() + "&url=" + ws.getUrl()));//signaturedata.put("shareTitle", content);//分享標題data.put("shareDesc", "分享描述");data.put("shareUrl","https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + props.getAppid() + "&redirect_uri="+ systemUrl + "/H5/index.html#/orderBill&response_type=code&scope=snsapi_base&state=" + params+ "#wechat_redirect");//分享到微信的url地址data.put("shareQQUrl", systemUrl + "/H5/index.html#/orderBill");// 普通分享url地址data.put("shareImg", systemUrl + "/H5/static/images/share_img.jpg");data.put("share", ws);data.put("appid", appid);ReturnCodeUtils.success200(result, data);}} catch (Exception e) {logger.error("獲取分享信息service異常：" + e.getMessage(), e);logger.error("獲取分享信息service異常,入參：" + jsonParam);}String res=JSONObject.fromObject(result).toString();return res;}


注：生成的簽名是一個動態的url地址+時間戳（timestamp）+隨機數（ nonceStr）生成的。而如果是html的靜態頁面在前端通過ajax將url傳到后臺簽名，前端需要用js獲取當前頁面除去'#'hash部分的鏈接（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent），因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數，如果不是動態獲取當前鏈接，將導致分享后的頁面簽名失敗。如果是jsp頁面，則需要通過systemUrl+request.getQueryString()來獲取。

8.關于分享統計的設計思路
關于分享的統計這一部分內容，因為我暫時還沒有做，但是這一部分內容同樣是非常常用的，畢竟在我們具體的業務中，只要有了分享，那么分享的次數的統計是必不可少的，所以在此先說一下設計思路。 首先，我們要知道分享的鏈接里只有state一個參數可以攜帶我們具體業務的參數，所以我們要將所有的參數都放到這一個key里。經過嘗試，state的參數可以是json格式的。 我們在做分享統計的時候，就可以先獲取當前用戶的openid然后拼接到參數里，這樣我們每次做分享的時候，都把當前的openid保存，形成一個openid的鏈，然后將每次分享打開的鏈接做一個流水記錄。這樣，我通過計算openid的鏈有幾級就能知道具體的分享次數了。 當然，這種方式僅僅是一個理論上的描述，具體實踐還可以再此基礎上做出適當的調整。

三、總結 這次的微信功能開發，就涉及到了這些內容。其中一些內容是比較基礎的，所以對于初學者來說，是需要知道的。只有清楚了基本的內容，那微信的網頁開發也就大同小異了。以上就是自己對微信的理解，如果哪位前輩覺得有什么不對的地方，還請不吝賜教。

總結

以上是生活随笔為你收集整理的微信网页开发——随手笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。