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