uniapp获取元素到顶部的距离

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元素的信息

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

例子为在vue中使用微信JS-SDK，步骤如下：

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

插件方式：

引入js文件方式：

在需要调用JS接口的页面引入如下JS文件，（支持>

在uniapp中使用地图控件需要先获取开发者密钥（key），然后将key配置到uniapp的相关文件中，以便应用程序可以正确调用地图API。以下是配置地图key的步骤：

1 获取开发者密钥。在地图服务提供商（如高德地图、百度地图等）的官网上注册开发者账号，并获取自己的开发者密钥。

2 在uniapp的根目录下，新建一个名为"manifestjson"的文件（如果已存在则无需新建），并在其中添加以下代码：

```json

{

"mp-weixin": {

"permission": {

"scopeuserLocation": {

"desc": "你的位置信息将用于展示附近位置和精准定位"

}

},

"appid": "你的微信小程序appid",

"apiKey": "你的地图key",

"enableDebug": true

}

}

```

其中，"apiKey"字段就是你获取的地图开发者密钥。

3 在需要使用地图控件的页面中，在<template>标签中添加地图控件代码，比如：

```html

<template>

<view>

<map :longitude="116397428" :latitude="3990923" :markers="markers" style="width: 100%; height: 400px;" />

</view>

</template>

```

其中，:longitude和:latitude是地图的中心点坐标，:markers是地图标记点的数据。

4 在需要使用地图控件的页面的<config>标签中，添加以下代码：

```json

{

"usingComponents": {

"map": "/static/vant-weapp/map/map"

}

}

```

其中，"/static/vant-weapp/map/map"是地图组件所在的路径，你需要根据你的项目实际情况来设置。

设置完毕后，保存修改，重新编译运行uniapp应用程序，即可在应用程序中使用地图控件了。

微信小程序虽然是基于浏览器内核的，但它的界面却不是html（而是自创的wxml），所以是不支持获取dom元素的，因此也无法使用第三方插件。小程序本身有各种替代解决方案，自己去文档里找一下。

在微信开放平台官方公告中:

2021年4月28日24时后发布的小程序新版本，无法通过wxgetUserInfo与<button open-type="getUserInfo"/>获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。

新增getUserProfile接口（基础库2104版本开始支持），可获取用户头像、昵称、性别及地区信息，开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档： 《getUserProfile接口文档》

在微信开发者工具词库版本2104之后getUserInfo获取的将是微信的拟名信息。

使用uniapp官方提供的unigetUserProfile(OBJECT)接口

但是unigetUserProfile是为了支持新版微信小程序获取个人信息的接口，如官方描述一样，该接口只支持打包为微信小程序并且微信基础词库为2104以上时获取个人信息

参考： >

uni-k可以通过以下步骤来连接微信：1 点击“打开客户端”按钮；2 在出现的页面中输入账户和密码；3 连接你的微信账号；4 通过uni-k提供的菜单中进行个人账号管理；5 查看你在uni-k上的所有账单。

在ios和Android上可视区 包括屏幕的上方的大小，所以要减去这个大小

在微信小程序中就没有包括，所以小程序不需要减

1、 点击某个按钮，d出请求微信授权界面。

2、点击允许按钮，获取用户微信绑定的手机号与openId

3、 请求后端接口，实现登录。

微信公众平台--->登陆--->开发--->开发管理--->开发设置 查看APPID、secret

在把上面获取的appid session_key encryptedData iv传入以下方法中，得到最后解密的信息

解密后的信息

以上就是关于uniapp获取元素到顶部的距离全部的内容，包括:uniapp获取元素到顶部的距离、uni-app中使用微信js-sdk(个人笔记)、uniappapp开发时地图key配置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！