JSSDK用法//////////////////zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

時間 2019-11-15

標籤 jssdk 用法 zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz 简体版

原文原文鏈接

參照微信官方文檔，調試成功以後總結以下：
步驟一：綁定域名javascript

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。
備註：登陸後可在「開發者中心」查看對應的接口權限。
步驟二：引入JS文件html

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
備註：支持使用 AMD/CMD 標準模塊加載方法加載
步驟三：寫代碼java

//初始化定義(在頁面js裏面) wx.config({ debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。 appId: '', // 必填，公衆號的惟一標識--->用戶的微信公衆號appid timestamp: '', // 必填，生成簽名的時間戳--->系統本身生成的時間戳。 nonceStr: '', // 必填，生成簽名的隨機串--->系統本地生成的UUID。 signature: '',// 必填，簽名，見附錄1 jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2--->一大串CC+CV });

爲了獲取上述參數以下操做
獲取參數流程==========================================================================git

1:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=‘本身申請的公衆號appid’&secret=’本身申請的公衆號secret’
根據appid和secret返回的json格式數據
獲取access_token；（涉及訪問量，根據2小時限制須要緩存在本地！）json

2：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=‘上一步access_token’&type=jsapi
根據上一步返回的access_token
獲取jsapi_ticket；（涉及訪問量，根據2小時限制須要緩存在本地！）api

3：獲取nonce_str=UUID.randomUUID().toString();緩存

獲取timestamp=Long.toString(System.currentTimeMillis() / 1000);安全

獲取url=request.getRequestURL();微信

獲取signatureapp

string1=(jsapi_ticket+nonce_str+timestamp+url)//注意這裏參數名必須所有小寫，且必須有序-->MessageDigest類
            a)MessageDigest crypt = MessageDigest.getInstance("SHA-1"); b)crypt.reset(); c)crypt.update(string1.getBytes("UTF-8")); d)signature = byteToHex(crypt.digest());

獲取成功==================================================================================

跳轉頁面，傳遞到wx.config()中去。demo.jsp

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> //初始化定義 var sd=${result.timestamp}; wx.config({ debug: false , appId: '${result.appId}', timestamp: '${timestamp}', nonceStr: '${appId}', signature: '${signature}', jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideOptionMenu', 'showOptionMenu' ] }); wx.ready(function () { //地理位置 wx.getLocation({ success: function (res) { var latitude = res.latitude; // 緯度，浮點數，範圍爲90 ~ -90 var longitude = res.longitude; // 經度，浮點數，範圍爲180 ~ -180。 var speed = res.speed; // 速度，以米/每秒計 var accuracy = res.accuracy; // 位置精度 alert("latitude : "+latitude+"--longitude : "+longitude+"--speed : "+speed+"--accuracy : "+accuracy); } }); </script>

應一哥們要求，我把我本身調試用的例子發出
=========例子===========

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <%@taglib uri="/struts-tags" prefix="s"%> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>syShaoyj1990</title> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> var sd=${result.timestamp}; //初始化定義 wx.config({ debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。 appId: '${result.appId}', // 必填，公衆號的惟一標識--->用戶的微信公衆號appid timestamp: sd, // 必填，生成簽名的時間戳--->系統本身生成的時間戳。 nonceStr: '${result.nonceStr}', // 必填，生成簽名的隨機串--->系統本地生成的UUID。 signature: '${result.signature}',// 必填，簽名，見附錄1 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'translateVoice', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', ' showOptionMenu', ' hideMenuItems', 'showMenuItems', ' hideAllNonBaseMenuItem', ' showAllNonBaseMenuItem', ' closeWindow', ' scanQRCode', ' chooseWXPay', ' openProductSpecificView', ' addCard', ' chooseCard', 'openCard'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2--->一大串CC+CV }); wx.config({ debug: false , appId: '${result.appId}', timestamp: sd, nonceStr: '${result.nonceStr}', signature: '${result.signature}', jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideOptionMenu', 'showOptionMenu' ] }); </script> <script> wx.ready(function () { //分享到qq wx.onMenuShareQQ({ title: '分享到qq', // 分享標題 desc: '', // 分享描述 link: '', // 分享連接 imgUrl: '', // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } }); //地理位置 wx.getLocation({ success: function (res) { var latitude = res.latitude; // 緯度，浮點數，範圍爲90 ~ -90 var longitude = res.longitude; // 經度，浮點數，範圍爲180 ~ -180。 var speed = res.speed; // 速度，以米/每秒計 var accuracy = res.accuracy; // 位置精度 alert("latitude : "+latitude+"--longitude : "+longitude+"--speed : "+speed+"--accuracy : "+accuracy); } }); //分享到朋友圈 wx.onMenuShareTimeline({ title: 'syj，分享到朋友圈測試！', link: 'http://shaoyj1990.sinaapp.com', imgUrl: 'http://image.baidu.com/detail/newindex?col=%E8%B5%84%E8%AE%AF&tag=%E5%A8%B1%E4%B9%90&pn=0&pid=5759608761913747677&aid=&user_id=10086&setid=-1&sort=0&newsPn=0&star=%E5%80%AA%E5%A6%AE&fr=&from=1', success: function (res) { alert("ok"); } }); //分享給朋友 wx.onMenuShareAppMessage({ title: 'syj，分享給朋友測試！', desc: '地球一小時,讓地球母親休息一小時！', link: 'http://www.baidu.com', imgUrl: 'http://www.baidu.com', success: function (res) { alert("ok"); } }); }); </script> </head> <body> <button id="getLocation">click</button> </body> </html>

相關標籤/搜索

zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。