uniapp 获取当前页面路径

uniapp获取当前页面路径

方式一：

方式二：

用官方已经挂在的 $mp 变量获取

var pages = getCurrentPages() // 获取栈实例

pages是一个数组对象，每个对象里面其实就是已经打开的页面的对象，可以根据pageslength查看跳转级数

应用场景（返回固定页面）：

如果A为根页面，直接使用

其中A页面不是根页面

如图

若从A页面-->B页面-->D页面，从D返回A，只需delta为 2，即

若从A页面-->C页面-->F页面-->G页面-->D页面，从D返回A，需要设置delta: 4，即

使用var pages = getCurrentPages() // 获取所有打开页面，

若A为第三级页面（即从根页面到A页面跳转两次），计算返回级数

在uniapp中，可以通过unigetSystemInfoSync() 方法获取设备的屏幕像素密度（DPI）信息，具体步骤如下所示：

1调用unigetSystemInfoSync() 方法

在uniapp的页面中，调用unigetSystemInfoSync() 方法可以返回当前设备的系统信息，包括 *** 作系统版本、手机型号、屏幕分辨率、DPI等参数。

2解析返回结果并获取DPI值

通过getSystemInfoSync() 方法返回的结果为JSON对象，可以使用其中的“windowWidth”和“screenWidth”字段计算出DPI值。具体方法为：DPI = windowWidth / screenWidth 160，其中160是安卓平台的标准DPI值。

示例代码如下：

```

const systemInfo = unigetSystemInfoSync();

const screenWidth = systemInfoscreenWidth;

const windowWidth = systemInfowindowWidth;

const dpi = windowWidth / screenWidth 160;

consolelog('当前设备的DPI值为：' + dpi);

```

需要注意的是，getSystemInfoSync() 方法只能在小程序或H5平台上使用，在APP平台上需要使用其它的插件或API获取设备信息。另外，DPI值是一个相对值，不同设备的DPI可能会有所区别，因此在UI设计和布局时需要考虑多种分辨率和DPI情况，以保证应用的兼容性和视觉效果。

二、使用步骤

1uniapp开发map说明

使用uniapp是因为它是一个使用vuejs开发所有前端应用的框架，开发者编写一套代码，可以发布到ios，android，web以及各种小程序，快应用等多个平台。 使用map地图组件开发，地图组件用于展示地图（使用的时腾讯地图），说一下它的属性有：

longitude（类型为Number，没有默认值，表示中心经度）

latitude（类型为Number，没有默认值，表示中心纬度）

scale（类型为Number，默认值为16，缩放级别取值范围为5-18）

markers（类型为Array数组，类型为数组即表示地图上可以有多个，没有默认值，表示标记点）

polyline（类型为Array数组，没有默认值，表示路线，数组上的所有点连成线）

circles（类型Array数组，表示圆）

controls（类型Array数组，表示控件）

include-points（类型Array数组，表示缩放视野已包含所有给定的坐标点）

enable-3D（类型为Boolean，默认值为false，表示是否显示3D搂块）

show-compass（类型为Boolean，默认值为false，表示为是否显示指南针）

enable-overlooking（类型为Boolean，默认值为false，表示为是否开启俯视）

enable-satellite（类型为Boolean，默认值为false，表示为是否开启卫星图）

enable-traffic（类型为Boolean，默认值为false，表示为是否开启实时路况）

show-location（类型为Boolean，表示显示带有方向的当前定位点）

polygons（类型Array，表示为多边形）

点击属性

@markertap-表示点击标记点时触发，edetail={markerId}

@labeltap-表示点击label时触发，edetail = {markerId}

@callouttap-表示点击标记点对应的气泡时触发，edetail = {markerId}

@controltap-表示点击控件时触发，edetail = {controlId}

@regionchange-表示视野发生变化时触发

@tap-表示点击地图时触发; App-nuve、微信小程序29支持返回经纬度

@updated-表示在地图渲染更新完成时触发

我们在写map组件时，组件的宽/高推荐写直接量，比如说是 750rpx，不要设置百分比值，在uni-app中只支持gcj02坐标。 介绍markers属性-类型为数组Array

由之前描述可知，markers属性类型为Array，表示标记点用于在地图上显示标记的位置。这个数组属性，它里面有它的对象配置属性，分别是：

id，表示标记点id，类型为Number，必填项，marker点击事件回调会返回此id，建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。

latitude，纬度，类型Number，必填项，浮点数，范围 -90 ~ 90

longitude，经度，类型Number，必填项，浮点数，范围 -180 ~ 180

title，标注点名，类型String，不是必填，点击时显示，callout存在时将被忽略

iconPath，显示的图标，类型String，必填项，项目目录下的路径

rotate，旋转角度，类型Number，不是必填，顺时针旋转的角度，范围 0 ~ 360，默认为 0

alpha，标注的透明度，类型Number，不是必填，默认1，无透明，范围 0 ~ 1

width，标注图标宽度，类型Number，不是必填，默认为实际宽度

height，标注图标高度，类型Number，不是必填，默认为实际高度

callout，自定义标记点上方的气泡窗口，类型Object，不是必填 - 可识别换行符

label，为标记点旁边增加标签，类型Object，不是必填 - 可识别换行符

anchor，经纬度在标注图标的锚点，默认底边中点，不是必填，{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: 5, y: 1} 表示底边中点

marker 上的气泡 callout（Object类型） marker数组 上属性 callout 对象使用属性：

content，文本，String

color，文本颜色，String

fontSize，文字大小，Number

borderRadius，callout边框圆角，Number

bgColor，背景色，String

padding，文本边缘留白，Number

display，'BYCLICK':点击显示; 'ALWAYS':常显，String

textAlign，文本对齐方式。有效值: left, right, center，String

marker 上的标签 label（Object类型）

content，文本，String

color，文本颜色，String

fontSize，文字大小，Number

x，label的坐标，原点是 marker 对应的经纬度，Number

y，label的坐标，原点是 marker 对应的经纬度，Number

borderWidth，边框宽度，Number

borderColor，边框颜色，String

borderRadius，边框圆角，Number

bgColor，背景色，String

padding，文本边缘留白，Number

textAlign，文本对齐方式。有效值: left, right, center，String

polyline polyline表示指定一系列坐标点，从数组第一项连线至最后一项

points，经纬度数组，类型为Array，必填，如：[{latitude: 0, longitude: 0}]

color，线的颜色，类型为String，不必填，如：#0000AA

width，线的宽度，类型为Number，不必填

dottedLine，是否虚线，类型为Boolean，不必填，默认值false

arrowLine，带箭头的线，类型为Boolean，不必填，默认值为false

arrowIconPath，更换箭头图标，类型为String，不必填，在arrowLine为true时，默认带箭头的线时生效

borderColor，线的边框颜色，类型为String，不必填

borderWidth，线的厚度，类型为Number，不必填

polygon polygon指定一系列坐标点，根据points坐标数据生成闭合多边形

points，经纬度数组，array，必填，如：[{latitude: 0, longitude: 0}]

strokeWidth，描边的宽度，Number，否

strokeColor 描边的颜色，String，否

fillColor，填充颜色，String，否

zIndex，设置多边形 Z 轴数值，Number，否

circles circles在地图上显示圆

latitude，纬度，Number，必填，浮点数，范围 -90 ~ 90

longitude，经度，Number，必填，浮点数，范围-180 ~ 180

color，描边的颜色，String，不必填，如：#0000AA

fillColor，填充颜色，String，不必填，如：#0000AA

radius，半径，Number，必填

strokeWidth，描边的宽度，Number，不必填

controls controls在地图上显示控件，控件不随着地图移动

id，控件id，Number，不必填，在控件点击事件回调会返回此id

position，控件在地图的位置，Object，必填，控件相对地图位置

iconPath，显示的图标，String，必填，项目目录下的路径，支持相对路径写法，以'/'开头则表示相对项目根目录；也支持临时路径

clickable，是否可点击，Boolean，不必填，默认不可点击

position

left，距离地图的左边界多远，Number，不必填，默认为0

top，距离地图的上边界多远，Number，不必填，默认为0

width，控件宽度，Number，不必填，默认为宽度

height，控件高度，Number，不必填，默认为高度

注意在uniapp中地图组件的经纬度必填，如果不填，经纬度则默认值是北京的经纬度。 2uniapp使用map组件 基本使用方法 使用uniapp开发中的map组件，基本使用方法：

代码如下（示例）：

<map :scale="scale" style="width: 100%; height: 100%;"

enable-3D="false" show-compass="false" enable-overlooking="false"

:enable-satellite="false" :enable-traffic="false" show-location="false"

:latitude="latitude" :longitude="longitude" :markers="covers">

</map>

markers属性的使用，代码如下（示例）：

markers: [{

id: 1, // Number

title: '1', // String-标注点名

rotate: 180, // Number - 顺时针旋转的角度，范围 0 ~ 360，默认为 0

alpha: 05, // 默认1，无透明，范围 0 ~ 1

latitude: 39899,

longitude: 11639742,

width: 30,

height: 30,

// callout: {

// display: "BYCLICK",

// padding: 10,

// borderRadius: 5,

// content: '',

// },

// anchor: {},

iconPath: '///static/locationpng', // 显示的图标

}, {

id: 2,

title: '2', // String

latitude: 3990,

longitude: 11639,

callout: {

color: '#007AFF', // 文本颜色

bgColor: '#563BFF', // 背景色

display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显

fontSize: 15,

textAlign: 'left', // 文本对齐方式。有效值: left, right, center

padding: 10, // 文本边缘留白

borderRadius: 5,

content: '腾讯地图',

},

label: {

content: 'Jeskson',

color: '#000000',

fontSize: 12,

borderWidth: 12,

borderColor: '#007AFF',

borderRadius: 5,

padding: 5,

textAlign: 'center',

bgColor: '#563BFF',

},

iconPath: '///static/locationpng'

}]

1首先需要在manifestorjson里，将Maps（地图）的勾打上。如图

2在APP SDK配置里设置，将高德定位地图勾打上，再填上地图应用KEY。如图

3第二步需要到高德地图上注册开发者，申请权限。

如果是测试用，则安全码那可以直接填HBUILDERX提供的码：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58。Package就是打包时名称。按“获取KEY”后，即可获取KEY值，将其填入第二步即可。

GPS坐标转高德地标（火星坐标/国测坐标）。

uniapp获取当前的地理位置 unigetLocation({type:"wgs84"}); wgs84 返回 gps 坐标，gcj02 返回国测局坐标。

gcj02参数获取的地址有偏差，而用定位 wgs84参数则不返回地址，所以需要将wgs84坐标转gcj02坐标，然后再调用高德地图接口获取地址。

方法一：

方法二：（推荐）

高德地图官网提供GPS坐标转换国测坐标的接口开发 > Web服务 API > 开发指南 > API文档 > 坐标转换：

文档： >

1 通过unicreateSelectorQuery() 来实现，

注意：要获得的高度，是在页面上dom已经渲染完成之后才能获得

我使用的是页面生命周期  onReady()中调用的

                let _this = this;

                const query = unicreateSelectorQuery()

                 queryselect('#tab')boundingClientRect()

                   queryselectViewport()scrollOffset()

                    queryexec(function(res){

                        debugger

                       // res[0]top      // #tab节点的上边界坐标

                        // res[1]scrollTop // 显示区域的竖直滚动位置

                        _thisheight=resuwindowHeight-res[0]top +'px'

                        consolelog('高度',res[0]height);

                        consolelog('demo的元素的信息',res);

                    })

我是用于实现页面滚动后把列表的导航条吸附在顶部，在微信小程中使用有效，在app端使用这个方法不能获取到距离顶部的高度，只有demo元素的信息

首先明白一点，uni-app提供的view、button、image、text通通都是组件，不是h5的标签，虽然用起来方便，但如果你想获取dom节点信息，尽管给组件绑定一个id选择器，用documentgetElementById()等这种传统的JS获取dom方式是没有任何效果。

因为他们是组件，除非你不用这些现成的组件，用回h5的标签。

所以你如果想获取uni-app提供组件的DOM元素，需要如下的方法。

unicreateSelectorQuery()in(this);用于创建一个实例。

in(this)在这里是为了规范页面创建实例，避免获取不到实例报null，用上总没错

queryselect('#text')用于选择DOM节点

boundingClientRect()返回dom节点的相关信息

拿到的是一些元素本身的宽高信息、距离页面四边的距离。

使用unicreateSelectorQuery()创建dom实例，需要在这个mounted()生命周期里面进行，这个生命周期它代表组件已经创建完成，可以挂载实例，进而获取dom元素

如果不写在mounted生命周期里，你也可以写在methods方法定义里面，不过你需要这样来调用。

以上就是关于uniapp 获取当前页面路径全部的内容，包括:uniapp 获取当前页面路径、uniapp获取dpi、uniapp地图api不全等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！