微信提供的API位置:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN
先照著文檔復(fù)制:
JSSDK使用步驟
步驟一:綁定域名
先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
備注:登錄后可在“開發(fā)者中心”查看對應(yīng)的接口權(quán)限。
說明:登錄公共平臺https://mp.weixin.qq.com/,然后設(shè)置--公共賬號設(shè)置--JS接口安全域名【一定要是域名,如果域名剛通過審核,則需要等待24h才可以接入】
步驟二:引入JS文件
在需要調(diào)用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用搖一搖周邊功能,請引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
備注:支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載
步驟三:通過config接口注入權(quán)限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調(diào)用(同一個url僅需調(diào)用一次,對于變化url的SPA的web app可在每次url變化時進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性,所以使用pushState來實現(xiàn)web app的頁面會導(dǎo)致簽名失敗,此問題會在Android6.2中修復(fù))。
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。
appId: '', // 必填,公眾號的唯一標(biāo)識
timestamp: , // 必填,生成簽名的時間戳
nonceStr: '', // 必填,生成簽名的隨機串
signature: '',// 必填,簽名,見附錄1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
});
步驟四:通過ready接口處理成功驗證
wx.ready(function(){
// config信息驗證后會執(zhí)行ready方法,所有接口調(diào)用都必須在config接口獲得結(jié)果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調(diào)用相關(guān)接口,則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口,則可以直接調(diào)用,不需要放在ready函數(shù)中。
});
步驟五:通過error接口處理失敗驗證
wx.error(function(res){
// config信息驗證失敗會執(zhí)行error函數(shù),如簽名過期導(dǎo)致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數(shù)中查看,對于SPA可以在這里更新簽名。
});
先拋出一個問題:config:invalid signature(無效的簽名),然后現(xiàn)在的需求是只能分享到朋友圈和分享給好友,其它的菜單均禁用,如下:
API提供的一個方法:http://mp.weixin.qq.com/wiki/11/b8e9756b6f56f285661d82d843aa9b4f.html
- function onBridgeReady(){
- WeixinJSBridge.call('hideOptionMenu');
- }
-
- if (typeof WeixinJSBridge == "undefined"){
- if( document.addEventListener ){
- document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
- }else if (document.attachEvent){
- document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
- document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
- }
- }else{
- onBridgeReady();
- }
返回說明
隱藏底部導(dǎo)航欄沒有返回值。(需要顯示請把hideOptionMenu換成showOptionMenu)
這里的方法是給一了百了了,全部禁用,顯然不是我想要的!?。。?/p>
===============================老司機開始開車了===========================================================
OK,這里就需要用到10.4hideMenuItems方法:
第一步:在需要分享的頁面引入(假設(shè)是index.jsp)
- <!-- Java script-->
- <%@include file="/view/wxpages/resource.jsp" %>
- <script type="text/javascript">
- wx.config({
- debug: false,
- appId: '你們單位的appId',//記得改成你們單位的appId
- timestamp: '${timestamp}',
- nonceStr: '${nonceStr}',
- signature: '${sign}',
- jsApiList: [
- 'checkJsApi',
- 'onMenuShareTimeline',
- 'onMenuShareAppMessage',
- 'onMenuShareQQ',
- 'onMenuShareWeibo',
- 'onMenuShareQZone',
- 'hideMenuItems',
- 'showMenuItems',
- 'hideAllNonBaseMenuItem',
- 'showAllNonBaseMenuItem',
- 'translateVoice',
- 'startRecord',
- 'stopRecord',
- 'onVoiceRecordEnd',
- 'playVoice',
- 'onVoicePlayEnd',
- 'pauseVoice',
- 'stopVoice',
- 'uploadVoice',
- 'downloadVoice',
- 'chooseImage',
- 'previewImage',
- 'uploadImage',
- 'downloadImage',
- 'getNetworkType',
- 'openLocation',
- 'getLocation',
- 'hideOptionMenu',
- 'showOptionMenu',
- 'closeWindow',
- 'scanQRCode',
- 'chooseWXPay',
- 'openProductSpecificView',
- 'addCard',
- 'chooseCard',
- 'openCard'
- ]
- });
- </script>
resource.jsp中的代碼:
- <%@page import="com.ook.entity.User"%>
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%
- String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();
-
- User user = (User)request.getSession().getAttribute("session_user");
- %>
- <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
- <script type="text/javascript" src="<%=basePath %>/easyui/wechat/js/wxRTop/zepto.min.js"></script>
- <script type="text/javascript" src="<%=basePath %>/easyui/wechat/js/wxRTop/wxshare.js"></script>
- <input type="hidden" id="hideUserId" value="<%=user.getId() %>" />
第二步:wxshare.js隱藏不需要的菜單,并同時構(gòu)造分享的代碼
微信提供的demo樣板:http://demo.open.weixin.qq.com/jssdk/sample.zip
zepto.min.js在上面的zip中有下載地址
- /*
- * 注意:
- * 1. 所有的JS接口只能在公眾號綁定的域名下調(diào)用,公眾號開發(fā)者需要先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
- * 2. 如果發(fā)現(xiàn)在 Android 不能分享自定義內(nèi)容,請到官網(wǎng)下載最新的包覆蓋安裝,Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
- * 3. 完整 JS-SDK 文檔地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
- *
- * 如有問題請通過以下渠道反饋:
- * 郵箱地址:weixin-open@qq.com
- * 郵件主題:【微信JS-SDK反饋】具體問題
- * 郵件內(nèi)容說明:用簡明的語言描述問題所在,并交代清楚遇到該問題的場景,可附上截屏圖片,微信團(tuán)隊會盡快處理你的反饋。
- */
- /*
- * 注意:
- * 1. 所有的JS接口只能在公眾號綁定的域名下調(diào)用,公眾號開發(fā)者需要先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
- * 2. 如果發(fā)現(xiàn)在 Android 不能分享自定義內(nèi)容,請到官網(wǎng)下載最新的包覆蓋安裝,Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
- * 3. 常見問題及完整 JS-SDK 文檔地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
- *
- * 開發(fā)中遇到問題詳見文檔“附錄5-常見錯誤及解決辦法”解決,如仍未能解決可通過以下渠道反饋:
- * 郵箱地址:weixin-open@qq.com
- * 郵件主題:【微信JS-SDK反饋】具體問題
- * 郵件內(nèi)容說明:用簡明的語言描述問題所在,并交代清楚遇到該問題的場景,可附上截屏圖片,微信團(tuán)隊會盡快處理你的反饋。
- */
- var userId = $("#hideUserId").val();
-
- wx.ready(function () {
- // 8.3 批量隱藏菜單項
- wx.hideMenuItems({
- menuList: [
- 'menuItem:share:qq', //分享到QQ
- 'menuItem:share:weiboApp', // 分享到Weibo
- 'menuItem:favorite', // 收藏
- 'menuItem:share:QZone', // 分享到 QQ 空間
- 'menuItem:copyUrl', // 復(fù)制鏈接
- 'menuItem:openWithQQBrowser', // 在QQ瀏覽器中打開
- 'menuItem:openWithSafari', // 在Safari中打開
- 'menuItem:share:email', // 郵件
- 'menuItem:readMode', // 閱讀模式
- 'menuItem:originPage' // 原網(wǎng)頁
- ],
- success: function (res) {
- //alert('已隱藏“閱讀模式”,“分享到朋友圈”,“復(fù)制鏈接”等按鈕');
- },
- fail: function (res) {
- alert(JSON.stringify(res));
- }
- });
-
- //獲取“分享到朋友圈”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
- wx.onMenuShareTimeline({
- title: '', // 分享標(biāo)題
- link: '', // 分享鏈接
- imgUrl: '', // 分享圖標(biāo)
- success: function () {
- // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
- },
- cancel: function () {
- // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
- }
- });
-
- //獲取“分享給朋友”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
- wx.onMenuShareAppMessage({
- title: '', // 分享標(biāo)題
- desc: '', // 分享描述
- link: '',
- imgUrl: '', // 分享圖標(biāo)
- type: 'link', // 分享類型,music、video或link,不填默認(rèn)為link
- dataUrl: '', // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空
- success: function () {
- // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
- },
- cancel: function () {
- // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
- }
- });
-
- });
-
- wx.error(function (res) {
- alert(res.errMsg);
- });
到這了后,差不多就能夠達(dá)到至分享到朋友圈和好友的效果了!
顯然你看到的EL表達(dá)式,那么后臺需要處理的傳到j(luò)sp頁面的三個參數(shù):
timestamp: '${timestamp}',
nonceStr: '${nonceStr}',
signature: '${sign}',
也就是在這里的時候會一直報config:invalid signature的錯誤,然后也是通過這里,你能夠明白看別人的api是有多么坑?。。。?/p>
===============================老司機提醒您:請系好安全帶===========================================================
java后臺簽名代碼:
- //分享時候的簽名
- /*
- * noncestr=Wm3WZYTPz0wzccnW
- jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
- timestamp=1414587457
- url=http://mp.weixin.qq.com?params=value
- */
- long timestamp = RandCharsUtils.timenum();
- String nonceStr = RandCharsUtils.getRandomString(16);
- String jsapi_ticket = WxAuthController.getTicket(request);
- String url = "http://wx.ooklady.com/wechat/index";
- SortedMap<Object,Object> parameters = new TreeMap<Object,Object>();
- parameters.put("timestamp", timestamp);
- parameters.put("jsapi_ticket", jsapi_ticket);
- parameters.put("noncestr", nonceStr);
- parameters.put("url", url);
-
- String sign = WXSignUtils.createJSSDKSign("UTF-8", parameters);//這里是sha1加密不是MD5加密
- request.setAttribute("timestamp", timestamp);
- request.setAttribute("nonceStr", nonceStr);
- request.setAttribute("sign", sign);
出現(xiàn)config:invalid signature的幾個原因,我總結(jié)了一下:
- ①timestamp和nonceStr一定要提取出來,參與簽名和傳到j(luò)sp頁面的必須是同一個!
我之前看到別人說timestamp,然后我忽略了nonceStr,結(jié)果出現(xiàn)了config:invalid signature。
- ②jsapi_ticket這里的ticket是需要兩次請求得到的,不是access_token!我這里就調(diào)到坑里了,關(guān)鍵的說明微信的字很小,我給忽視了~
先獲取access_token:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+WxConfig.appid+"&secret="+WxConfig.appsecret;
在用access_token獲取ticket:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+accessToken+"&type=jsapi"
jsapi_ticket
生成簽名之前必須先了解一下jsapi_ticket,jsapi_ticket是公眾號用于調(diào)用微信JS接口的臨時票據(jù)。正常情況下,jsapi_ticket的有效期為7200秒,通過access_token來獲取。由于獲取jsapi_ticket的api調(diào)用次數(shù)非常有限,頻繁刷新jsapi_ticket會導(dǎo)致api調(diào)用受限,影響自身業(yè)務(wù),開發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket
。
1.參考以下文檔獲取access_token(有效期7200秒,開發(fā)者必須在自己的服務(wù)全局緩存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html
2.用第一步拿到的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
- ③url必須是分享頁面的原始url(不需要urldecode),比如你現(xiàn)在需要分享的http://www.qq.com,那么你就不能寫成http://wx.qq.com,最好用location.href.split('#')[0]彈出來看看??!
確認(rèn)url是頁面完整的url(請在當(dāng)前頁面alert(location.href.split('#')[0])確認(rèn)),包括'http(s)://'部分,以及'?'后面的GET參數(shù)部分,但不包括'#'hash后面的部分。
- ④最后一個簽名的方式,sha1加密不是MD5,如果你先做的的是支付的,那么這里你很有可能直接拿過來用,那么問題又來了,還會報config:invalid signature;
什么是sha1加密?微信開發(fā)接入指南中首要步驟:接入公共平臺開發(fā)說的就是sha1加密~
- 補充一個:timestamp,之前我只現(xiàn)做的支付(App支付),支付有個time_start和time_expire這兩個是格式為yyyyMMddHHmmss,而分享則是用的是時間戳~
- /*
- * 時間戳(單位秒)
- */
- public static long timenum(){
- return System.currentTimeMillis()/1000;
- }
簽名說明
1.將 api_ticket(特別說明:api_ticket 相較 appsecret 安全性更高,同時兼容老版本文檔中使用的 appsecret 作為簽名憑證。)、timestamp、card_id、code、openid、nonce_str的value值進(jìn)行字符串的字典序排序。
2.將所有參數(shù)字符串拼接成一個字符串進(jìn)行sha1加密,得到signature。
這里微信提供了一個在線驗證簽名的方式:
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign
最后的效果圖:
ok,到此為止,微信自定義右上角并分享就搞定,以達(dá)到目的地,請下車~~