uni-app动态设置原生标题左侧按钮

一、需要把获取到的用户位置显示在标题栏的左侧，就像下图一样

先在pages.json里写入原生标题按钮

{"path": "pages/index/index2","style": {"navigationBarTitleText": "demo","enablePullDownRefresh": true,"app-plus":{"titleNView": {"buttons": [ //原生标题栏按钮配置,{"type":"none","text": "位置","fontSize": "17","float":"left","width": "70","select": "true"},{"type":"none","float": "right","fontSrc":"/static/iconfont.ttf","text": "\ue69a"}]}}}},

这里以高德微信小程序SDK为例,简述如何在uni-app中利用微信小程序第三方SDK，实现App端和微信小程序代码的通用

1、获取SDK

在高德开放平台(https://lbs.amap.com/api/wx/summary)

注册账号并申请相关key信息

然后下载它的微信小程序SDK(https://lbs.amap.com/api/wx/download)

2、引入SDK

在index2.vue引入

import amap from '../../common/amap-wx.js';

在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  });  }
}

3、使用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].regeocodeData.addressComponent.district  uni.hideLoading();  }  });  }  }
}

这时候已经获取到了你所在的位置

重点来了，注意看代码

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].regeocodeData.addressComponent.district  let pages =  getCurrentPages();let page = pages[pages.length-1];let currentWebview = page.$getAppWebview();let titleObj = currentWebview.getStyle().titleNView;titleObj.buttons[0].text = this.addressName;currentWebview.setStyle({titleNView:titleObj})uni.hideLoading();  }  });  }  }
}

重点代码主要在这一段

let pages =  getCurrentPages();
let page = pages[pages.length-1];
let currentWebview = page.$getAppWebview();
let titleObj = currentWebview.getStyle().titleNView;
titleObj.buttons[0].text = this.addressName;
currentWebview.setStyle({titleNView:titleObj
})

uni-app动态设置原生标题左侧按钮相关推荐

微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言 navigationBarTitleText用于小程序设置当前页面标题,可以给每个页面设置独立的标题,但是这样不能满足一些特殊业务场景:比如说商城,商品详情页面的标题,会根据获取到的数据动态修改 ...
回发后动态设置的标题丢失
废话不说,看代码: <head runat="server"> <title>test</title> </head> &l ...
vue项目动态设置浏览器标题title两种方法
各位铁汁们,老步骤先效果图奉上方法一.使用插件vue-wechat-title来设置浏览器动态标题第一步:安装插件 1. npm vue-wechat-title --save 第二步:在全局ma ...
React项目动态设置title标题
在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的.那么怎么让title随着路由的切换动态变化呢? 1.在定义路由时 ...
angular5+动态设置页面标题title
在实际的开发项目当中,经常需要对访问网页的title进行动态配置,就像这样的东东, 所以今天来记录下怎么动态配置title 一.首先,准备一个 .json的配置文件放置在静态资源assets文件夹下 ...
Angular 2+ 监听路由变化动态设置页面标题
原网址:https://segmentfault.com/a/1190000009971757 路由配置代码:const routes: Routes = [{ path: 'calendar', c ...
[学习]uni-app监听原生标题页面跳转
page.json设置原生标题 "titleNView": {"buttons": [{"text": "新增",&qu ...
微信小程序开发（一）动态修改页面标题
为提高微信小程序的用户体验,原则上设计页面时,页面顶部标题应随内容不同进行修改. 微信小程序固定架构 pages example example.js example.json example.wxm ...

uni-app动态设置原生标题左侧按钮

重点来了，注意看代码

重点代码主要在这一段

uni-app动态设置原生标题左侧按钮相关推荐

最新文章

热门文章