uni-app 中使用微信小程序第三方 SDK 及資源匯總

獲取SDK

首先在高德開放平台，注冊賬號並且申請相關的 key 等信息；
然后下載它的微信小程序版 SDK：微信小程序 SDK。https://lbs.amap.com/api/wx/download

APP：然后填寫app包名，申請原生sdk的appkey信息，但不需要下載原生sdk。注意：App側在Android中使用定位，或者Android、iOS使用地圖，仍然需要同時向高德申請原生sdk的key信息，填寫在manifest的app sdk配置中。

新建一個 uni-app 項目，新建一個 common 目錄，然后將前面下載得到的 amap-wx.js 的文件復制進去。

Tip：這個 common 目錄只是舉例，並非強制約定。但是，不要放在 static 目錄下。

引入SDK

新建的 uni-app 默認會有一個 index 頁，在 index.vue 中，引入高德小程序 SDK。

import amap from '../../common/amap-wx.js';  
export default {  
}

在 onLoad 中初始化一個高德小程序 SDK 的實例對象。

import amap from '../../common/amap-wx.js';  
export default {  
    data() {  
        return {  
            amapPlugin: null,  
            key: '這里填寫高德開放平台上申請的key'  
        }  
    },  
    onLoad() {  
        this.amapPlugin = new amap.AMapWX({  
            key: this.key  
        });  
    }  
}

使用API

利用高德小程序 SDK，獲取當前位置地址信息，以及當前位置的天氣情況。

import amap from '../../common/amap-wx.js';  
export default {  
    data() {  
        return {  
            amapPlugin: null,  
            key: '高德key',  
            addressName: '',  
            weather: {  
                hasData: false,  
                data: []  
            }  
        }  
    },  
    onLoad() {  
        this.amapPlugin = new amap.AMapWX({  
            key: this.key  
        });  
    },  
    methods: {  
        getRegeo() {  
            uni.showLoading({  
                title: '獲取信息中'  
            });  
            this.amapPlugin.getRegeo({  
                success: (data) => {  
                    console.log(data)  
                    this.addressName = data[0].name;  
                    uni.hideLoading();  
                }  
            });  
        }  
    }  
}

其它 SDK

高德小程序 SDK 類似輔助工具庫，使用時在需要的頁面中引入即可。

還有一種 SDK 比如阿拉丁、諸葛IO等統計類的 SDK 需要全局引入。小程序是在 app.js 中 引入。在 uni-app 中，則是在 main.js 中引入。

示例

附件中有完整的示例，下載后解壓拖進 HBuilderX，填寫申請的高德 key 后即可運行體驗。

如果大家在使用微信小程序的第三方 SDK 時遇到問題，請在社區單獨發帖描述清楚問題，並一定附上項目源碼，方便我們測試，感謝配合。

 原文地址：https://ask.dcloud.net.cn/article/35070

小程序內使用高德地圖，為什么只有在調試狀態下才能正常顯示地圖，發布后不顯示呢？

去高德開放平台的文檔看一下，登錄微信公眾平台，在 "設置"－>"開發設置" 中設置 request 合法域名，將 https://restapi.amap.com 中添加進去就可以了

小程序里面還牽扯一個授權問題

getAuthorizeInfo(a = "scope.userLocation"){  //1. uniapp彈窗彈出獲取授權（地理，個人微信信息等授權信息）彈窗
				var _this = this;
				uni.authorize({
					scope: a,
					success() { //1.1 允許授權
						_this.getRegeo();
					},
					fail(){    //1.2 拒絕授權
						console.log("你拒絕了授權，無法獲得周邊信息")
					}
				})
			},
			// 高德定位
			getRegeo() {  
				uni.showLoading({  
					title: '獲取信息中'  
				});  
				this.amapPlugin.getRegeo({  
					success: (data) => {  
						console.log(data)  
						// this.addressName = data[0].name;  
						this.addressName = data[0].regeocodeData.addressComponent.township || data[0].regeocodeData.addressComponent.district;  
						uni.hideLoading();  
					}  
				});  
			},
			isGetLocation(a = "scope.userLocation"){ // 3. 檢查當前是否已經授權訪問scope屬性，參考下截圖
				var _this=this;
				uni.getSetting({
					success(res) {					
						if (!res.authSetting[a]) {  //3.1 每次進入程序判斷當前是否獲得授權，如果沒有就去獲得授權，如果獲得授權，就直接獲取當前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				});
			},