• 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()
    						}
    					}
    				});
    			},
    

      

    浩楠哥
  • 相关阅读:
    ES6标准入门 第一章:简介
    vue调试工具之 vue-devtools的安装
    vue 高德地图之玩转周边
    vue-动手做个选择城市
    js 高级算法
    (转)预处器的对比——Sass、LESS和Stylus
    windows下安装mongodb以及node.js连接mongodb
    vue组件(将页面公用的头部组件化)
    浅谈移动端rem的用法
    vue 调用高德地图
  • 原文地址:https://www.cnblogs.com/haonanZhang/p/14924579.html
Copyright © 2020-2023  润新知