微信网页开发——随手笔记
生活随笔
收集整理的這篇文章主要介紹了
微信网页开发——随手笔记
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、公眾號設(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ù)說明
返回說明: { ? ?"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"
}
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ā)也就大同小異了。以上就是自己對微信的理解,如果哪位前輩覺得有什么不對的地方,還請不吝賜教。
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 英語 |
" 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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: (NCRE网络技术)网络系统结构与设计的
- 下一篇: ubuntu 右键选单没有创建文档