一、公眾號設(shè)置 ? ? ?1.賬號詳情： ? ? ? ? ? 公眾號的頭像、二維碼、名稱都是必須填寫的，如果沒有這些信息，是不能進(jìn)行網(wǎng)頁開發(fā)的。

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

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

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


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

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

參數(shù)	描述
access_token	網(wǎng)頁授權(quán)接口調(diào)用憑證,注意：此access_token與基礎(chǔ)支持的access_token不同
openid	用戶的唯一標(biāo)識(shí)
lang	返回國家地區(qū)語言版本，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"
}

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

7.分享功能 第一步：公眾號配置。 公眾號設(shè)置---》功能設(shè)置，設(shè)置JS接口安全域名和網(wǎng)頁授權(quán)域名。 注：需要把認(rèn)證證書下載到項(xiàng)目的根目錄或者指定的目錄文件下。
第二步：JS設(shè)置 在頁面中引入微信對外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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。appId: '${appid}', // 必填，公眾號的唯一標(biāo)識(shí)timestamp : '${share.timestamp}', // 必填，生成簽名的時(shí)間戳nonceStr : '${share.noncestr}', // 必填，生成簽名的隨機(jī)串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('用戶點(diǎn)擊發(fā)送給朋友');},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('用戶點(diǎn)擊發(fā)送給朋友');},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>

后端服務(wù)代碼： 對于微信分享功能，后端服務(wù)需要將如下信息提供給前端： a. APPID b. 分享標(biāo)題——shareTitle， c.分享描述——shareDesc， d.分享地址——shareUrl， e.分享縮略圖——shareImg， f.微信配置信息——jsapi_ticket、隨機(jī)數(shù)（noncestr）、時(shí)間戳（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");//頁面參數(shù)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);//分享標(biāo)題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異常,入?yún)?#xff1a;" + jsonParam);}String res=JSONObject.fromObject(result).toString();return res;}


注：生成的簽名是一個(gè)動(dòng)態(tài)的url地址+時(shí)間戳（timestamp）+隨機(jī)數(shù)（ nonceStr）生成的。而如果是html的靜態(tài)頁面在前端通過ajax將url傳到后臺(tái)簽名，前端需要用js獲取當(dāng)前頁面除去'#'hash部分的鏈接（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent），因?yàn)轫撁嬉坏┓窒?#xff0c;微信客戶端會(huì)在你的鏈接末尾加入其它參數(shù)，如果不是動(dòng)態(tài)獲取當(dāng)前鏈接，將導(dǎo)致分享后的頁面簽名失敗。如果是jsp頁面，則需要通過systemUrl+request.getQueryString()來獲取。

8.關(guān)于分享統(tǒng)計(jì)的設(shè)計(jì)思路
關(guān)于分享的統(tǒng)計(jì)這一部分內(nèi)容，因?yàn)槲視簳r(shí)還沒有做，但是這一部分內(nèi)容同樣是非常常用的，畢竟在我們具體的業(yè)務(wù)中，只要有了分享，那么分享的次數(shù)的統(tǒng)計(jì)是必不可少的，所以在此先說一下設(shè)計(jì)思路。 首先，我們要知道分享的鏈接里只有state一個(gè)參數(shù)可以攜帶我們具體業(yè)務(wù)的參數(shù)，所以我們要將所有的參數(shù)都放到這一個(gè)key里。經(jīng)過嘗試，state的參數(shù)可以是json格式的。 我們在做分享統(tǒng)計(jì)的時(shí)候，就可以先獲取當(dāng)前用戶的openid然后拼接到參數(shù)里，這樣我們每次做分享的時(shí)候，都把當(dāng)前的openid保存，形成一個(gè)openid的鏈，然后將每次分享打開的鏈接做一個(gè)流水記錄。這樣，我通過計(jì)算openid的鏈有幾級就能知道具體的分享次數(shù)了。 當(dāng)然，這種方式僅僅是一個(gè)理論上的描述，具體實(shí)踐還可以再此基礎(chǔ)上做出適當(dāng)?shù)恼{(diào)整。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。