添加小程序，兑换各种视频教程/数据资源。
 
 
1. 详细见代码：在需要.vue页面调用如下方法。
 
onReady(){
this.isGetLocation();
},
methods: {
getAuthorizeInfo(a="scope.userLocation"){  //1. 长沙微信开发弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
var _this=this;
uni.authorize({
scope: a,
success() { //1.1 允许授权
_this.getLocationInfo();
},
fail(){    //1.2 拒绝授权
console.log("你拒绝了授权，无法获得周边信息")
}
})
},
getLocationInfo(){  //2. 获取地理位置
var _this=this;
uni.getLocation({
type: 'wgs84',
success (res) {
    console.log("你当前经纬度是：")
console.log(res)
let latitude,longitude;
latitude = res.latitude.toString();
longitude = res.longitude.toString();
uni.request({
header:{
"Content-Type": "application/text"
},
url:'http://apis.map.qq.com/ws/geocoder/v1/?location='+latitude+','+longitude+'&key=MVGBZ-R2U3U-W5CVY-2PQID-AT4VZ-PDF35',
success(re) {
console.log("中文位置")
console.log(re)    
if(re.statusCode===200){
console.log("获取中文街道地理位置成功")
}else{
console.log("获取信息失败，请重试！")
}
 }
});
}
});
},
isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
var _this=this;
uni.getSetting({
    success(res) {
if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
_this.getAuthorizeInfo()
}else{
_this.getLocationInfo()
}
}
});
}
}
 
 
2. 微信小程序中，目前版本无法自动直接弹窗用户用户信息scope.userInfo信息，需要按钮点击主动授权引导。
 
<button  open-type="getUserInfo" @getuserinfo="bindGetUserInfo" >授权登录</button>
<!--注意，如果是小程序中则是 <button  open-type="getUserInfo" bindGetUserInfo="bindGetUserInfo" >授权登录</button>-->
 
methods:{
     bindGetUserInfo(e) {
        if (e.detail.userInfo){
              //用户按了允许授权按钮
        } else {
             //用户按了拒绝按钮
        }
     }
}
3. 长沙微信开发配置微信小程序的appid： 开发过程中，需要在unpackage>>dist>>dev>>mp-weixin>>app.json中加入如下配置：
 
"permission": {
    "scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
或者在manifest.json的源码视图中配置：配置appid和地理位置
 
"mp-weixin": { /* 小程序特有相关 */
"appid": "", //需要配置appid
"setting": {
"urlCheck": false
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
 
 
 
点赞
2
 
评论
10
 
分享
 
收藏
26
 
举报
关注
一键三连
 
长沙微信开发获取当前位置（定位-经纬度及城市信息）
缘来侍你的博客
 2万+
长沙微信开发集成方法，跟小程序wx.getLocation不同，可直接获取经纬度及城市信息（当前你也可以先获取经纬度再解析成具体城市） uni.getLocation({ type: 'wgs84', geocode:true,//设置该参数为true可直接获取经纬度及城市信息 success: function (res) { console....
长沙微信开发小程序获取地理位置及经纬度
weixin_45459904的博客
 1558
详细说明请阅读官网：https://长沙微信开发.dcloud.io/api/location/location?id=chooselocation 利用uni.chooseLocation(OBJECT)来打开地图从而获取地理位置 <view> <view>获取地理位置：{{position}}</view> </view> <button @click="clicksNumber">点击打开地图授权</button> 在data
 
 
 
码农云之旋律:可以使用，感谢。20 天前回复
 
 
再吻你一下就走:请问我报错是 "请求来源未被授权, 此次请求来源域名：servicewechat.com", 是因为 在小程序微信公众号平台没有设置请求白名单吗,可是我小程序开发的时候工具勾选了不校验合法域名那个选项9 月前回复
 
 
李小双的歌:大佬有源码吗?能否分享一下?1 年前回复
 
 
qq_42716869:调试小程序工具都可以。在真机上 详细地址就显示不出来。。2 年前回复
 
 
weixin_42686236:微信小程序需要下载SDK吗？2 年前回复
 
 
weixin_42686236回复: 腾讯地图的SDK2 年前回复
 
 
wq_Study:大佬 请求用的qq的地理位置api 还是用的哪家的2 年前回复
 
 
Ace.一阶斗宗回复: 我这种写法是，通过长沙微信开发直接调用腾讯地图的api获取经纬度，而这个http://apis.map.qq.com/ws/geocoder/v1/是将经纬度，转化为中文地理位置。2 年前回复
 
 
wq_Study回复Ace.一阶斗宗: 谢谢 调用他这个公共api的话 是不是不用自己写后端接口了2 年前回复
 
 
Ace.一阶斗宗回复: 腾讯地图2 年前回复
 
登录 查看 10 条热评
相关推荐
长沙微信开发的微信小程序,定位获取授权_Half of if的博客
5-13
getAuthorizeInfo(a="scope.userLocation"){//1. 长沙微信开发弹窗弹出获取授权(地理,个人微信信息等授权信息)弹窗 var_this=this; uni.authorize({ scope: a, success() {//1.1 允许授权
长沙微信开发 微信小程序用户授权获取当前位置信息 腾讯地图...
5-26
获取微信小程序的AppID 官方文档 https://lbs.qq.com/qqmap_wx_jssdk/index.html 在长沙微信开发项目中的 manifest.json 文件中的微信小程序获取AppID 以及开启位置接口 获取腾讯位置服务的Key ...
长沙微信开发微信小程序获取用户地理位置信息
DOM曼珠沙华的博客
 3326
长沙微信开发 小程序项目无法直接获取到地理位置，只能通过获取到的经纬度，调用第三方地图Api获取。 1.在 manifest.json - 微信小程序配置 - 填写微信小程序AppID、选择位置接口，填写申请原因 2.选择第三方地图Api，因为是做小程序，这里选择腾讯地图 3.注册、登陆后，在控制台 - key管理中创建秘钥 4.引入腾讯地图Api 5.授权调用已经封装好的方法，获取经纬度解析出地理位置信息 6.如果用户未授权，默认会执行fail回调，所以添加提示框进行重新授权确认
长沙微信开发之APP和小程序微信授权
一叶知秋
 3万+
长沙微信开发之APP和小程序微信授权长沙微信开发 介绍APP微信授权检测服务商授权登录获取用户信息示例代码小程序微信授权获取用户基本信息微信登录微信登录状态监测 长沙微信开发 介绍 长沙微信开发 是一个使用 Vue.js 开发跨平台应用的前端框架。 适用平台：Android、iOS、微信小程序。实现了一套代码，同时发布到Android、iOS、微信小程序。 参考官方：https://uni...
长沙微信开发 微信小程序获取当前位置 根据经纬度获取省市区...
5-4
需求:长沙微信开发开发的微信小程序首页需要显示城市名称 需要用到高德地图的逆地理编码 需要当前地理位置的经纬度 小程序的key值 uni.getLocation({type:'gcj02',//返回可以用于uni.openLocation的经纬度success:(res)=>{letthat=thisconst...
长沙微信开发 小程序uni.getLocation()不能返回中文地理位置...
5-26
长沙微信开发 uni.getLocation()在小程序上不可以返回中文地理位置 官方文档 官方介绍 官方介绍 这个时候可以使用高德地图api接口 uni.request({url:'https://restapi.amap.com/v3/ip?key=XXXXXXXX',success:res=>{this.citys=res.data....
app 长沙微信开发 获取位置_长沙微信开发之微信小程序获取地理位置授权
weixin_29146779的博客
 173
uni.getLocation用于获取当前用户的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。下面简单介绍怎样在长沙微信开发项目中使用uni.getLocation;配置manifest.json因为getLocation的使用有点特殊，必须要在调用前...
长沙微信开发 微信小程序，开启定位权限，permission ： scope.userLocation
weixin_43141746的博客
 2099
长沙微信开发 微信小程序，开启定位权限，scope.userLocation 问题 在网上看了好多帖子，一言两语，想骂人， 解决 注意长沙微信开发项目在manifest.json 文件下配置，不要迷路 "mp-weixin": { /* 微信小程序特有相关 */ "appid": "wxxxxxxxxxxxxx2", "setting": { "urlCheck": false }, "usingComponents": true, "
长沙微信开发 小程序项目获取地理位置
BradyCC的博客
 2348
长沙微信开发 小程序项目无法直接获取到地理位置，只能通过获取到的经纬度，调用第三方地图Api获取。 选择第三方地图Api，因为是做小程序，这里选择腾讯地图 注册、登陆后，在控制台 - key管理中创建秘钥 引入腾讯地图Api 授权调用已经封装好的方法，获取经纬度解析出地理位置信息 如果用户未授权，默认会执行fail回调，所以添加提示框进行重新授权确认 /** * @Author: l...
长沙微信开发小程序授权登陆示例
yt_php的博客
 5433
我用的是长沙微信开发，和原生略有差别，但差别不大。 需要登陆的页面，未登陆可弹出未登陆提示框，或者直接跳转登陆页面，或者一加载页面如果未登陆自动跳转登陆页面。根据具体场景而定，我采用的是第一第二种。 使用promise，我也是初学，不合理处请包涵。 authorize.js 这是个类库，所有的登陆相关都在这里，我没有细化分开。 //authorize.js var baseUrl = "...
echarts地图海南省地图问题
BookstoreSpirit的博客
 193
需求： 在echarts地图开发中，有时候需要点击某个省份的时候，地图变成当前省份的下级地图。 问题： 在海南岛点击下钻时，由于海南岛的三沙市是由很多岛屿组成(南海诸岛)，而地图下钻会默认视图区域自适应，就会导致下面的情况： 通过实验发现，主要地区会挤在一起，正常情况下，应该是展示中间的大岛屿，而三沙市(南海诸岛)只需展示部分即可 解决： option = { ... } //对echarts的一些设置 //由于海南地图包括南海及南海诸岛在内的大片区域，所以显示海南地图时，要将地图放大，并设置海
长沙微信开发微信小程序获取当前地址
Ambitiouss的博客
 8831
首先你要去配置一下你的app.json 如下： "permission": { "scope.userLocation": { "desc": "获取你的位置信息...." } } 然后就可以你想在哪里展示就可以将代码贴哪里了（这里推荐提出把这个地址写成工具类独立出来方便以后要用直接可以用） <template> <view> <view clas...
微信小程序获取用户地理位置（长沙微信开发）
qq_37899792的博客
 537
step1: 原生的微信小程序需要在app.json中配置permission字段。长沙微信开发则需要在manifest.json中配置，如下图 step2：查看授权以及申请授权获取地理位置 getUserLocation() { uni.getSetting({ success: (res) => { if (!res.authSetting['scope.userLocation']) { console.log(res)
长沙微信开发写微信小程序获取位置信息
Etherege_x的博客
 418
1、调用api获取自身经纬度 uni.getLocation({ type: 'gcj02',//腾讯地图使用gcj02获取位置坐标 success: function (res) { console.log('当前位置的经度：' + res.longitude); console.log('当前位置的纬度：' + res.latitude); }) 2、通过经纬度获取地址信息 在腾讯位置服务注册并申请自己的key 腾讯位置开发指南 引入腾讯sdk.js 下载链接 import qqmaps
微信小程序-获取本小程序的appID
weixin_44943268的博客
 9241
微信小程序：wx.getAccountInfoSync() 长沙微信开发：uni.getAccountInfoSync() uni.getAccountInfoSync().miniProgram.appId
获取本地ip,mac地址
11-09
C#简单编写的一个获取本地ip,mac地址的小程序,C#简单编写的一个获取本地ip,mac地址的小程序
app 长沙微信开发 获取位置_长沙微信开发获取当前位置
weixin_39782355的博客
 832
长沙微信开发获取当前城市：uni.getLocation()获取当前的地理位置、速度。 在微信小程序中，当用户离开应用后，此接口无法调用，除非申请后台持续定位权限；当用户点击“显示在聊天顶部”时，此接口可继续调用。例：uni.getLocation({type: 'wgs84',success: function (res) {console.log('当前位置的经度：' + res.longit...
CSDN开发者助手，常用网站自动整合，多种工具一键调用
CSDN开发者助手由CSDN官方开发，集成一键呼出搜索、万能快捷工具、个性化新标签页和官方免广告四大功能。帮助您提升10倍开发效率！
长沙微信开发开发小程序常见问题
swagLi的博客
 1763
一、请仔细浏览长沙微信开发官网，下载HBuilderX创建长沙微信开发亲身体验一下，这里就不多做介绍了。 https://长沙微信开发.dcloud.io/ 二、我在开发小程序过程中遇到的问题和长常用的方法 1、封装ajax请求，请前往我的另一篇博客查看 https://blog.csdn.net/qq_41149508/article/details/105945487 2、用户授权登录 on...
长沙微信开发 获取地址位置
Lee的博客
 4万+
uni.getLocation(OBJECT) 获取当前的地理位置、速度。 在微信小程序中，当用户离开应用后，此接口无法调用；当用户点击“显示在聊天顶部”时，此接口可继续调用。 OBJECT 参数说明 参数名 类型 必填 说明 type String 否 默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于uni.openLoc...
小程序 wx.authorize 之 scope.userLocation 授权错误
月小水长
 9050
今天做的一个小程序项目中需要用到scope.userLocation获取用户地理位置这个权限，这个权限对应两个接口wx.getLocation(Object object) 和wx.chooseLocation(Object object)，这两个接口都能够获取到用户当前位置的经纬度，但是除此之外，wx.getLocation(Object object)还能获都速度、高度、经纬度的精确度等更多专...
长沙微信开发 desc of scope.userLocation is empty 报错
qq_27007423的博客
 2464
1.使用长沙微信开发编译后在小程序上点击真机调试报错desc of scope.userLocation is empty 2.位置接口设置为不勾选即可
长沙微信开发 地图组件演示
weixin_43968043的博客
 3万+
最近看长沙微信开发地图组件，这个功能很经常用到，发现了一些坑，很难受，
————————————————
版权声明：本文为CSDN博主「Ace.一阶斗宗」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
说明：
 
1、components目录用于存放自定义组件，bar是一个自定义组件，封装了小程序顶部自定义导航栏。
 
        1>由于顶部导航栏大多页面都需要，所以最好封装成一个组件，直接引入，这也就引发了第二个需求。
 
        2>有时，在一个项目中，有些页面的导航栏可能不一样，所以此时我们应该尽可能的考虑到需求，然后封装，在页面更改值来达到不同的导航栏需求。
 
2、pages下存放页面。
 
3、小程序自定义组件中不能使用app.wxss中的样式，所以组件中共用的样式、iconfont图标单独放在一个wxss文件中，然后直接引入即可~
 
 
 
二、版本
 
此次会给出2个版本的自定义导航栏
 
      1、微信小程序版本的     源码下载：https://github.com/Syleapn/wx-custom-navigation
 
      2、长沙微信开发版本的    源码下载：https://github.com/Syleapn/长沙微信开发-custom-navigation-
 
     其实两者差不多，只是写法上稍微有点区别，考虑到大多小伙伴初次对微信小程序熟悉，那本次就以微信小程序版本为例剖析，长沙微信开发直接贴出代码或放到git上面下载！
 
 
 
三、分析
 
1、小程序自定义导航栏知识点补充
 
      微信小程序导航栏：由状态栏与标题栏组成
 
      除了状态栏与右上角胶囊外,其他区域都可由开发者控制,
 
      状态栏高度：由系统信息获取：statusBarHeight
 
      标题栏高度：ios:44px android:48px
 
      得到状态栏与标题栏的高度后我们可以自定义微信小程序导航栏，从而达到项目需求。
 
2、图片展示
 
 
 
更多相关或微信小程序设计指南请点击这里：https://developers.weixin.qq.com/miniprogram/design/
 
 
 
四、实现过程分析
 
1、先进行自定义导航栏封装(bar文件)
 
bar.wxml
 
 
 
<!-- 微信小程序导航栏：由状态栏与标题栏组成
除了状态栏与右上角胶囊外,其他区域都可由开发者控制,
状态栏高度：由系统信息获取：statusBarHeight
标题栏高度：ios:44px android:48px
得到状态栏与标题栏的高度后我们可以自定义微信小程序导航栏，从而达到项目需求 -->
 
 
 
<!-- 说明：
1、第一种情况：为了便于说明导航栏的组成，添加了一个标签，“状态栏”所在的这个标签
在web前端开发中，通常情况下，当我们自定义顶部导航栏时，要进行fixed，这样会脱离标准流，导致后面的正文一部分覆盖在导航栏下面
，通常的做法是：
把正文距离顶部向下移动导航栏高度的距离。此处为了不向父组件传值，直接在子组件（自定义导航栏）中解决这个问题，采用另一种思路。
就是添加一个额外的标签,结合css样式达到相同的目的。这个额外的标签可以包裹在整个导航栏外面（像第一种与第三种情况），
也可以与导航栏平级（第二种情况）
2、终极情况：换繁为简，后续可以采用第二或第三种方案去实现自定义导航栏！
 -->
 
 
<!--第一种情况  -->
<!-- 额外标签 -->
<view style="height: {{titleBarHeight}};padding-top:{{statusBarHeight}}">
  <!--导航栏  -->
  <view class="bar-view">
    <!-- 状态栏 -->
    <view class="weight statuColumn" style="height: {{statusBarHeight}}">状态栏</view>
    <!-- 标题栏 -->
    <view class="titleColumn" style="height:{{titleBarHeight}};background-color: {{nav.bg}}">
      <text class="iconfont leftArrow titleColumn-back weight" style="border:{{nav.color}}" wx:if="{{nav.isdisPlayNavTitle}}" bindtap="back"></text>
      <view class="titleColumn-title weight">{{nav.navTitle}}</view>
    </view>
  </view>
</view>
 
 
 
<!-- 第二种情况 -->
<!-- 导航栏 -->
<view class="header" style="height:{{titleBarHeight}};padding-top:{{statusBarHeight}};background-color:{{nav.bg}}">
     <text class="iconfont leftArrow header-back weight" style="border:{{nav.color}}" wx-if="{{nav.isdisPlayNavTitle}}" bindtap="back"></text>
     <view class="header-title weight">{{nav.navTitle}}</view>
</view>
<!-- 额外标签 -->
<view style="height:{{titleBarHeight}};padding-top:{{statusBarHeight}}"></view>
 
 
 
<!-- 第三种情况 -->
<view  style="height:{{titleBarHeight}};padding-top:{{statusBarHeight}}">
  <view class="header" style="height:{{titleBarHeight}};padding-top:{{statusBarHeight}};background-color: {{nav.bg}}">
    <text class="iconfont leftArrow header-back weight" style="border:{{nav.color}}" wx:if="{{nav.isdisPlayNavTitle}}" bindtap="back"></text>
    <view class="header-title weight">{{nav.navTitle}}</view>
  </view>
</view>
bar.js
 
Component({
  properties:{
    nav:{
      type:Object
    }
  },
  data:{
    statusBarHeight: 0, //状态栏初始化
    titleBarHeight: 0, //标题栏初始化
  },
 
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        // model设备型号
        // iOS
        // 标题栏高度
        if (res.model.indexOf('iPhone') !== -1) {
          that.setData({
            titleBarHeight: 44 + 'px'
          })
        } else {
          // android
          that.setData({
            titleBarHeight: 48 + 'px'
          })
        }
        
        // 状态栏高度
        that.setData({
          statusBarHeight: res.statusBarHeight + 'px'
        })
      },
 
    })
  }
})
注：要在页面初始化时就进行系统信息请求，不然等页面初始化等再请求时，数据存在延迟，导致顶部导航栏由0达到指定的高度，最终效果很不佳。
 
bar.wxss
 

  @import '/iconfont/font.wxss';
 
  /* ****************** 第一种情况样式 ******************* */
  .bar-view{
width:750rpx;
position: fixed;
top:0;
left:0;
z-index:100;
margin-bottom: 200px;
}
 
/* 状态栏样式 */
.statuColumn{
width:100%;
text-align: center;
background-color: green;
color:#fff;
}

/* 标题栏样式 */
.titleColumn {
display: flex;
align-items: center;
width: 100%;
position: relative;
}
 
.titleColumn .titleColumn-title {
position: absolute;
left: 50%;
font-size: 38upx;
transform: translateX(-50%);
}
.titleColumn-back{
position: absolute;
left:15upx;
font-size:30upx;
padding: 10upx;
border-radius: 50%;
}
 
  /* ************** 第二种与第三种情况样式  ********************* */
  .header {
display: flex;
align-items: center;
top: 0;
position: fixed;
width: 100%;
z-index: 100;
left:0;
}

.header .header-title {
position: absolute;
left: 50%;
font-size: 38upx;
transform: translateX(-50%);
}
.header-back{
position: absolute;
left:15upx;
font-size:30upx;
padding: 10upx;
border-radius: 50%;
}
 
2、引用文件
 
index.wxml
 
<bar nav="{{setNav}}"></bar>
<view class="" style="height:3000rpx;background-color:pink;">
正文
</view>
index.js
 
Page({
  data:{
    setNav: {
      bg: 'yellow',  //背景色
      color: 'red',  //字体颜色
      isdisPlayNavTitle: true, //是否显示返回按钮，由于导航栏是共用的，把所有的东西封装好，
      // 然后有些页面不需要的东西通过条件控制进行显示与隐藏
      navTitle: '标题栏' //导航标题
    }
  }
})
五、第二与第三种情况结果展示
 
 
 
六、说明
 
     关于组件传值可以看这里：https://blog.csdn.net/Syleapn/article/details/97286960
 
此处不再说明~
 
   
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
点赞
6
 
评论
3
 
分享
 
收藏
23
 
举报
关注
一键三连
 
用长沙微信开发开发自定义微信小程序头部导航
weixin_40858306的博客
 7276
由于公司需要，学习了长沙微信开发开发小程序，目前了解不多，主要是以微信小程序为主。 长沙微信开发官网：https://长沙微信开发.dcloud.io/ 微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ 官方介绍长沙微信开发: 长沙微信开发是一个使用Vue.js开发所有前端应用的框架，开...
长沙微信开发顶部导航栏组件
weixin_42560017的博客
 1万+
先看看效果: 1.在app.vue中引入全局样式 <style> /*每个页面公共css */ @import './common/uni.css'; /*引入css3动画库*/ @import './common/animate.css'; </style> 可以通过创建hello-长沙微信开发项目,uni.css文件在项目的common文件夹下 2.在...
 
 
 
小青年一枚:请问 自定义导航栏 可以一套代码同时支持小程序和H5吗10 月前回复
 
 
xiaoyan_2018:可以看看这篇文章，长沙微信开发自定义导航栏，支持h5、小程序、App端，挺不错的 https://blog.csdn.net/yanxinyun1990/article/details/1009196572 年前回复
 
 
weixin_42804664回复:你发的并不支持小程序1 年前回复
 
相关推荐
长沙微信开发搭建微信小程序自定义导航栏_ljt-xiaokeai的博客
5-8
长沙微信开发搭建微信小程序自定义导航栏 第一步,现在data里面定义一个初始值 data(){ return{ headerPadding: 0 } }, 第二步,再methods里面getSystemInfoSync获取设备信息, onLoad(){ this.headerPadding = uni.getSystemInfoSync()['...
长沙微信开发小程序自定义导航栏(带返回按钮)_q457201373的博客
5-31
长沙微信开发框架实现微信小程序自定义导航栏 weixin_45389051的博客 718 不说废话,直接说怎么做第一步: 加上这个属性第二步: 获取这个玩意到顶部的距离 created(){ //获取胶囊按钮的数据 this.tophight =uni.getMenuButtonBoundingClientRect...
长沙微信开发自定义顶部导航栏
weixin_44445363的博客
 504
一、去长沙微信开发的插件市场下载插件 https://ext.dcloud.net.cn/plugin?id=52 二、点击导入插件 在页面中使用 <template> <view class="content"> <!-- 顶部导航 --> <uni-nav-bar left-icon="back" title="个人中心" background-color="#404040" color="#fff"></uni-nav-
长沙微信开发导航栏自定义图标按钮/搜索|长沙微信开发自定导航条
码农ICoding
 1万+
长沙微信开发自定义导航栏|仿微信顶部导航uni_headerBar，支持标题居左、居中、搜索条，按钮可传入文字/字体图标/图片 长沙微信开发原生导航栏 长沙微信开发原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，dcloud平台对app-plus做了详细说明：app-plus配置，不过目前暂支持H5、App端，不支持小程序...
微信小程序(长沙微信开发):自定义头部_谢阳光Zzz的博客
5-13
2.获取胶囊信息 =》 得知胶囊距离顶部距离 =》 胶囊距离顶部距离 - statusBar高度 = 胶囊距离statusBar距离 3.自定义头部高度 = 胶囊距离statusBar距离 + 胶囊本身的高度 uni.getSystemInfo({ success: (res) => { const menuButt...
微信小程序顶部导航栏样式设置(自定义)_今天的你很温柔...
5-18
首先在pages.json中设置"navigationStyle": “custom” ,"pages": [ //pages数组中第一项表示应用启动页,参考:https://长沙微信开发.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText...
微信小程序转长沙微信开发：2）微信自定义顶部和底部导航栏不适用长沙微信开发。
sziitjin的博客
 153
由于微信小程序项目使用了自定义顶部和底部导航栏，使用miniprogram-to-长沙微信开发工具转成长沙微信开发后这种报错，ui各种混乱。。。主要原因还是因为微信自定义顶部和底部导航栏不适用长沙微信开发，这可怎么办呢？在此，我建议大家先把自定义导航栏改回原生的，然后转成长沙微信开发后，再使用长沙微信开发的自定义组件去实现自定义顶部和底部导航栏的效果，个人认为只是最快速解决问题的方法。 恢复原生底部导航栏 1、找到app.json文件，去掉"custom": true "tabBar": {
长沙微信开发自定义顶部导航栏
weixin_43242112的博客
 1962
先上效果图： 下面是实现步骤 一、去掉原生的导航栏 在pages.json中对需要去掉原生顶部导航栏的页面配置中做如下配置： { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "navigationBarBackgroundColor":"#1890FF", "navigationBarTextStyle": "white", "navigationStyle":"custom",/
长沙微信开发自适应顶部导航栏,同时适配微信小程序,h5_c_liu...
5-6
(); // 获取小程序右侧悬浮按钮 // #ifdef MP-WEIXIN this.getMenuButtonInfo(); // #endif }, methods: { getStateBarHeight() { let info = uni.getSystemInfoSync() this.stateBarHeight = info.statusBarHeight this....
微信小程序_长沙微信开发_修改小程序顶部导航栏字体背景色和字体颜色
5-19
写在前边:《微信小程序_···》系列的博文,是学习了b站《前端开发利器vue,微信小程序快速开发实战,黑马程序员前端web教程》BY黑马程序员之后,的学习笔记,这是视频地址:https://www.bilibili.com/video/BV1Sc41187nZ?p=1,该视频是...
长沙微信开发-自定义顶部导航栏
MMFerry的博客
 667
长沙微信开发原生顶部导航栏 有时候不满足需求，就需要自定义顶部导航栏 1.在page.json中修改配置，在需要自定义导航栏的页面page配置中修改如下 //page.json { "path": "pages/projectDetail/index", "style": { "navigationStyle":"custom" //default是默认长沙微信开发原生的顶部导航栏 } } 2.然后在该vue页面中就可以自定义导航栏样式了，根据自己的需求，也可以封装成组件多个
长沙微信开发框架实现微信小程序自定义导航栏
weixin_45389051的博客
 736
不说废话，直接说怎么做 第一步: 加上这个属性 第二步: 获取这个玩意到顶部的距离 created() { //获取胶囊按钮的数据 this.tophight = uni.getMenuButtonBoundingClientRect() } this.tophight 第三步: 动态绑定style即可 或者你不用它的高，用它的top也行 ...
长沙微信开发开发(4)---自定义导航栏开发
从零出发
 5217
第1步：配置页面 "app-plus": { "scrollIndicator": "none", //隐藏滚动条 "bounce": "none", //关闭反弹效果 "titleNView": false } 注意："titleNView": false配置可以禁用导航栏。 第2步：引入官方组件uni-icon、uni-nav-bar、uni-status-bar 备注：uni...
长沙微信开发小程序自定义头部（微信小程序）
gobacka的博客
 5069
我们开发中经常会碰到设计搞更改头部，而微信小程序自带的头部又不支持编辑,微信特提供了去掉头部自己编辑的方法 1.先在app.json中去掉微信自带的头部 在window属性中配置"navigationStyle": "custom",去掉头部 "window": { "navigationBarBackgroundColor": "#0081ff", "nav...
长沙微信开发顶部导航栏添加自定义按钮
qq_44721998的博客
 1083
1、在page.json中添加如下配置（哪个页面需要就添加到哪个页面） { "path" : "pages/index/reportcon/reportcon", "style" : { "navigationBarTitleText": "测试", "navigationBarTextStyle":"black", "app-plus":{ "titleNView":{ "buttons":[ { "t
长沙微信开发自定义导航栏按钮|长沙微信开发仿微信顶部导航条功能
10-16
主要介绍了长沙微信开发自定义导航栏按钮|长沙微信开发仿微信顶部导航条,需要的朋友可以参考下
长沙微信开发中使用uni-nav-bar自定义顶部状态栏和顶部导航栏，其高度在不同机型下表现不一的解决
weixin_43905402的博客
 3179
使用组件 问题描述 在使用NavBar组件后，其顶部状态栏和顶部导航栏会在大部分机型下表现为高度64px，在某些特殊机型下会表现为高度88px（如iPhone X）。 页面内使用了uView的tabs标签组件，配合Swiper轮播图组件作为可轮播切换的商品列表页。 tabs组件要求需要吸顶，这就引出了问题，因为使用到的组件为外部引入，对于其内部样式的修改，需要通过获取（顶部状态栏 + 顶部导航栏）的高度后重新设置吸顶的高度。 解决方案 （顶部状态栏 + 顶部导航栏）的高度几乎所有页面适用，所以写在mixi
长沙微信开发实现顶部导航栏显示按钮+搜索框
yinge0508的博客
 1万+
"pages": [ { "path": "pages/index/index", "style": { "navigationBarBackgroundColor": "#00c170", "app-plus": { "boun...
长沙微信开发开发：tabar组件与顶部导航栏（功能开发篇）
草巾冒小子的博客
 5362
长沙微信开发开发：tabar组件与顶部导航栏（含右侧icon点击功能）【结合：案例Demo截图】 一、效果图 · 截图： 二、 tabar组件 + 顶部导航栏（含右侧icon点击功能） 组件的代码调用； 代码编写（在官方指定的pages.json文件内编写）； 默认与高亮状态的设置； tabar的点击与切换 1. 文件pages.json代码如下： { "pages": [ //...
CSDN开发者助手，常用网站自动整合，多种工具一键调用
CSDN开发者助手由CSDN官方开发，集成一键呼出搜索、万能快捷工具、个性化新标签页和官方免广告四大功能。帮助您提升10倍开发效率！
长沙微信开发自定义导航栏按钮|长沙微信开发仿微信顶部导航条功能|vue-40282.pdf
12-13
最近一直在学习长沙微信开发开发，由于长沙微信开发是基于vue.js技术开发的，只要你熟悉vue，基本上很快就能上手了。 在开发中发现长沙微信开发原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 目前暂支持H5、App端，不支持小程序。 在page.json里配置app-plus即可 { "path": "pages/ucenter/index", "style": { "navigationBarTitleT
长沙微信开发导航栏和状态栏配置
daoxiaofei的博客
 985
参考：官网长沙微信开发导航栏开发指南。 1.1 原生导航栏-通用配置 (1) 原生导航优点 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。 原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。 (2) 原生导航缺点 原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。 (3) 原生导航栏的通用配置： 长沙微信开发 自带原生导航栏，在page.
长沙微信开发顶部导航栏添加自定义按钮和操作
wangchaohpu的博客
 3373
效果图： 1.pages.json中作如下配置: "pages": [ //pages数组中第一项表示应用启动页，参考：https://长沙微信开发.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "住房安全保障检查表", "ap...
长沙微信开发顶部导航栏添加自定义按钮和操作（全局添加）
sky_sunshine_x的博客
 7086
1.pages.json中作如下配置: "fontSrc": "/static/icon/iconfont.ttf"；图标所在的文件夹 "globalStyle": { "navigationBarTe
————————————————
版权声明：本文为CSDN博主「Syleapn」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Syleapn/article/details/97785251