uniapp原生导航实现城市定位和城市切换

效果图

原生导航配置

	{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"app-plus": {
					"titleNView": {
						"type": "transparent",
						"searchInput": {
							"backgroundColor": "rgba(231, 231, 231,.7)",
							"borderRadius": "16px",
							"placeholder": "请输入地址 如：大钟寺",
							// "disabled": true,
							"placeholderColor": "#606266"
							// "autoFocus": true
						},
						"buttons": [						
							{
								"text": "北京市",
								"fontSize": "14px",
								"width": "auto",
								"select": true,
								"color": "#303133",
								"float": "left",
								"background": "rgba(0,0,0,0)"
							}
						]
					}
				}
			}
		},

代码实现当前定位

//获取定位
			getLocation() {
				console.log(this.$mp, '111111');
				let platform = uni.getSystemInfoSync().platform;
				if (platform == 'ios') {
					plus.geolocation.getCurrentPosition((p) => {
						// console.log(p, "pppppppppppp")
						let city = p.address.city
						// console.log(city, 'city');

						let pages = getCurrentPages();
						let page = pages[pages.length - 1];
						if (city.length > 3) {
							city = city.substr(0, 3) + '...';
						}
						// #ifdef APP-PLUS
						var webview = this.$mp.page.$getAppWebview();
						webview.setTitleNViewButtonStyle(0, {
							text: city
						});
						// 选择的城市，显示到导航栏
						uni.getStorage({
							key: 'city',
							success: (res) => {
								var webview = this.$mp.page.$getAppWebview();
								// index: 按钮索引, style {WebviewTitleNViewButtonStyles } 
								webview.setTitleNViewButtonStyle(0, {
									text: res.data,
								});
								// 当前城市不是定位城市，显示切换城市提示
								if (city !== res.data) {
									this.showPos = true
									var webview = this.$mp.page.$getAppWebview();
									// index: 按钮索引, style {WebviewTitleNViewButtonStyles } 
									webview.setTitleNViewButtonStyle(0, {
										text: res.data,
									});
									// console.log("pppppppppppp")
								}
							},

						})

						// #endif
						// #ifdef H5
						// h5 临时方案
						document.getElementsByClassName('uni-btn-icon')[0].innerText = city;
						// #endif
					}, () => {
						// this.$msg('获取位置信息失败')
					})
				} else if (platform == 'android') {
					plus.geolocation.getCurrentPosition((p) => {
						let city = p.address.city
						// console.log(city);
						let pages = getCurrentPages();
						let page = pages[pages.length - 1];
						if (city.length > 3) {
							city = city.substr(0, 3) + '...';
						}
						// #ifdef APP-PLUS

						var webview = this.$mp.page.$getAppWebview();
						// index: 按钮索引, style {WebviewTitleNViewButtonStyles } 
						webview.setTitleNViewButtonStyle(0, {
							text: city,
						});
						uni.getStorage({
							key: 'city',
							success: (res) => {
								var webview = this.$mp.page.$getAppWebview();
								// index: 按钮索引, style {WebviewTitleNViewButtonStyles } 
								webview.setTitleNViewButtonStyle(0, {
									text: res.data,
								});
								if (city !== res.data) {
									this.showPos = true
									var webview = this.$mp.page.$getAppWebview();
									// index: 按钮索引, style {WebviewTitleNViewButtonStyles } 
									webview.setTitleNViewButtonStyle(0, {
										text: res.data,
									});
									// console.log("pppppppppppp")
								}
							},

						})


						// #endif
						// #ifdef H5
						// h5 临时方案
						document.getElementsByClassName('uni-btn-icon')[0].innerText = city;
						// #endif
					}, () => {
						// this.$msg('获取位置信息失败')
					}, {
						provider: 'baidu'
					})
				}
			},

记得getLocation该方法要在onLoad（）{}生命周期调用一下哦！！！！！！！！！！！！

点击城市跳转路由时，怎样把选择的城市显示到首页？？？？
在选择城市组件中加上以下代码即可，这里用的时uniapp的缓存

uni.setStorage({
					key: 'city',
					data: item.cityName,
					success() {

					}
				})
				uni.getStorage({
					key: 'city',
				})

首页拿到缓存数据，渲染到页面即可
把缓存数据写道OnShow（）{}生命周期即可

onShow() {
			// 替换成选择的城市
			uni.getStorage({
				key: 'city',
				success: (res) => {
					var webview = this.$mp.page.$getAppWebview();
					// index: 按钮索引, style {WebviewTitleNViewButtonStyles } 
					webview.setTitleNViewButtonStyle(0, {
						text: res.data,
					});
				}
			})