1.需求
項(xiàng)目中需要使用小程序加載地圖顯示高清影像，但是微信小程序使用的騰訊地圖無(wú)法滿足，所以使用了第三方自己搭建的地圖服務(wù)時(shí)候需要用的微信jsdk中的wx.getLocation接口
2.技術(shù)
1.webView
2.js sdk
3.解決辦法配置
- 登錄https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index注冊(cè)測(cè)試號(hào)，注意js接口安全域名一定不要填寫(xiě)帶（http頭或者h(yuǎn)ttps的頭，這個(gè)坑了我很久，正常的域名即可：baidu.com）image.png
-
第二步獲取access_token
{ "grant_type": "client_credential", "appid": "測(cè)試id", "secret": "測(cè)試secret" }
image.png
-
訪問(wèn)getticket方法獲取認(rèn)證ticket![image-20251105094605704]image.png
4.程序開(kāi)發(fā)
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="js/crypto-js.min.js"></script> 去下載一個(gè)這個(gè)js
<script src="js/vconsole.min.js"></script>
function initWeChatSDK() {
if (typeof wx === 'undefined') {
console.warn('微信JS-SDK未加載');
return;
}
try {
// 生成nonceStr（隨機(jī)字符串）
const nonceStr = generateNonceStr(16);
// 生成timestamp（當(dāng)前時(shí)間戳，秒級(jí)）
const timestamp = Math.floor(Date.now() / 1000);
// 獲取jsapi_ticket（需要從后端獲?。? // TODO: 替換為你的后端接口地址
// const jsapiTicket = await getJsApiTicket();
const jsapiTicket = "你的Ticket";
if (!jsapiTicket) {
console.error('獲取jsapi_ticket失敗');
return;
}
// 生成signature
const signature = generateSignature(jsapiTicket, nonceStr, timestamp);
console.log('微信JS-SDK配置參數(shù):', {
appId: '你的測(cè)試號(hào)appid',
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
url: getCurrentUrl()
});
// 配置微信JS-SDK
wx.config({
debug: false,
appId: '你的測(cè)試號(hào)appid',
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: ['getLocation']
});
wx.ready(function () {
console.log('微信JS-SDK初始化成功');
getCurrentLocation();
});
wx.error(function (res) {
console.error('微信JS-SDK初始化失敗', res);
});
} catch (error) {
console.error('初始化微信JS-SDK時(shí)出錯(cuò):', error);
}
}
function getCurrentLocation() {
console.log("調(diào)用getLocation方法獲取位置")
// 使用微信getLocation API
wx.getLocation({
type: 'wgs84', // 返回gcj02坐標(biāo)系，適用于騰訊地圖、高德地圖
//altitude: true, // 是否返回高度信息
success: function (res) {
console.log('微信獲取位置成功' + res);
userLocation = {
latitude: res.latitude,
longitude: res.longitude,
accuracy: res.accuracy,
altitude: res.altitude || 0,
speed: res.speed || 0,
timestamp: res.timestamp || Date.now()
};
handleLocationSuccess();
},
fail: function (err) {
// console.error('微信獲取位置失敗', err);
alert('獲取位置失?。? + (err.errMsg || '未知錯(cuò)誤'));
},
});
}
// 生成隨機(jī)字符串（用于nonceStr）
function generateNonceStr(length) {
length = length || 16;
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}
// 生成微信JSSDK簽名
// 參數(shù)：jsapi_ticket（從后端獲取的ticket），noncestr（隨機(jī)字符串），timestamp（時(shí)間戳），url（當(dāng)前頁(yè)面URL）
function generateSignature(jsapiTicket, nonceStr, timestamp, url) {
// 如果沒(méi)有提供url，使用當(dāng)前頁(yè)面URL
if (!url) {
url = getCurrentUrl();
}
// 構(gòu)建參數(shù)字典（所有參數(shù)名均為小寫(xiě)）
const params = {
jsapi_ticket: jsapiTicket,
noncestr: nonceStr,
timestamp: timestamp.toString(),
url: url
};
// 按照字段名的ASCII碼從小到大排序（字典序）
const sortedKeys = Object.keys(params).sort();
// 使用URL鍵值對(duì)格式拼接成字符串
const string1 = sortedKeys.map(key => {
return key + '=' + params[key];
}).join('&');
console.log('簽名原始字符串:', string1);
// 對(duì)string1作sha1加密
const signature = sha1WithCryptoJS(string1);
console.log('生成的簽名:', signature);
return signature;
}
function sha1WithCryptoJS(message) {
return CryptoJS.SHA1(message).toString(CryptoJS.enc.Hex);
}
image.png
5.參考資料
- 1.https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index（測(cè)試號(hào)管理）
- 2.https://mp.weixin.qq.com/debug/cgi-bin/apiinfo（微信公眾平臺(tái)接口調(diào)試工具）
- 3.https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=你的token&type=jsapi（getticket）
- 4.https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign（微信 JS 接口簽名校驗(yàn)工具）
image.png
-
5.微信小程序開(kāi)發(fā)工具切換網(wǎng)頁(yè)調(diào)試開(kāi)發(fā)
image.png
