在健康碼中,主要的難點技術就是在小程序中定位、自定頂部導航。
自定義導航
在微信小程序中,默認的頂部導航不能設置圖片背景或者是透明背景,只能自定義導航。
在每一個頁面中引入,就是得到自己定義【個性化的】導航。
第一步:
現在app.json文件中配置
"window": {
"navigationStyle": "custom"
},
"navigationStyle": "custom"
設置爲使用自定義導航。
第三步:
開始定義導航
navbar.wxml:
<view class='nav-wrap'>
<!-- 導航欄背景圖片 -->
<!-- <image class="backgroundimg" src="{{bg}}" bindload="imgLoaded"/> -->
<!-- // 導航欄 中間的標題 -->
<view class='nav-title' style='line-height: {{height*2 + 44}}px; color:#fff'>
{{navbarData.title}}
</view>
</view>
navbar.js
const app = getApp()
Component({
properties: {
navbarData: {
//navbarData 由父頁面傳遞的數據,變量名字自命名
type: Object,
value: {},
observer: function(newVal, oldVal) {}
}
},
data: {
height: '',
//默認值 默認顯示左上角
navbarData: {
showCapsule: 1
},
imageWidth: wx.getSystemInfoSync().windowWidth, // 背景圖片的高度
imageHeight: '', // 背景圖片的長度,通過計算獲取
},
attached: function() {
// 獲取是否是通過分享進入的小程序
this.setData({
share: app.globalData.share
})
// 定義導航欄的高度 方便對齊
this.setData({
height: app.globalData.height
})
},
methods: {
// 返回上一頁面
_navback() {
wx.navigateBack()
},
// 計算圖片高度
imgLoaded(e) {
console.log(e.detail.height)
this.setData({
imageHeight: e.detail.height *
(wx.getSystemInfoSync().windowWidth / e.detail.width)
})
},
tapName: function () {
console.log(0)
}
//返回到首頁
// _backhome() {
// wx.switchTab({
// url: '/pages/index/index'
// })
// }
},
})
在app.js中獲取設備頂部窗口的高度,會根據這個值來設置自定義導航欄的高度
//app.js
App({
onLaunch: function(e) {
console.log(e)
// 展示本地存儲能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登錄
wx.login({
success: res => {
// 發送 res.code 到後臺換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權,可以直接調用 getUserInfo 獲取頭像暱稱,不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發送給後臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由於 getUserInfo 是網絡請求,可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
wx.getSystemInfo({
success: res => {
console.log(res)
this.globalData.height = res.statusBarHeight
}
})
},
globalData: {
userInfo: null,
height: 0 // 頂部高度
}
})
navbar.wxss
/* navbar.wxss */
/* 頂部要固定定位 標題要居中 自定義按鈕和標題要和右邊微信原生的膠囊上下對齊 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
background-image: linear-gradient(#2f52bc, #9198e5, #d0d9f4);
color: #000;
z-index: 9999999;
overflow: hidden;
height: 400rpx;
}
/* 背景圖 */
.backgroundimg {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
/* 標題要居中 */
.nav-title {
position: absolute;
text-align: center;
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 36rpx;
color: #2c2b2b;
font-weight: 450;
}
.nav-capsule {
display: flex;
align-items: center;
margin-left: 30rpx;
width: 140rpx;
justify-content: space-between;
height: 100%;
}
.back-pre {
width: 32rpx;
height: 36rpx;
margin-top: 4rpx;
padding: 10rpx;
}
.nav-capsule {
width: 36rpx;
height: 40rpx;
margin-top: 3rpx;
}
navbar.json:
{
"component": true,
"usingComponents": {}
}
在index中引入導航
index.json:
{
"usingComponents": {
"nav-bar": "../component/navbar/index"
},
"navigationBarTextStyle": "white"
}
index.js:
Page({
data:[
nvabarData: {
showCapsule: 1, //是否顯示左上角圖標 1表示顯示 0表示不顯示
title: '健康碼', //導航欄 中間的標題
white: true, // 是就顯示白的,不是就顯示黑的。
}
]
})
index.wxml:
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
以上是首頁引用的自定義導航,重新定義其他頁面的導航:
wxml:
<view class='nav-wrap'>
<!-- 導航欄背景圖片 -->
<!-- <image class="backgroundimg" src="{{bg}}" bindload="imgLoaded"/> -->
<!-- // 導航欄 中間的標題 -->
<view class='nav-title' wx:if='{{!navbarData.white}}' style='line-height: {{height*2 + 44}}px;'>
{{navbarData.title}}
</view>
<view class='nav-title' wx:else='{{!navbarData.white}}' style='line-height: {{height*2 + 44}}px; color:#fff'>
{{navbarData.title}}
</view>
<view style='display: flex; justify-content: space-around;flex-direction: column'>
<view class='nav-capsule' style='height: {{height*2 + 44}}px;'>
<view bindtap='_navback'>
<image src='{{backIcon}}' mode='aspectFit' class='back-pre'></image>
</view>
</view>
</view>
</view>
wxss:
/* navbar.wxss */
/* 頂部要固定定位 標題要居中 自定義按鈕和標題要和右邊微信原生的膠囊上下對齊 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
background-image: linear-gradient(#2f52bc, #9198e5, #d0d9f4);
color: #000;
z-index: 9999999;
overflow: hidden;
}
/* 背景圖 */
.backgroundimg {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
/* 標題要居中 */
.nav-title {
position: absolute;
text-align: center;
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 36rpx;
color: #2c2b2b;
font-weight: 450;
}
.nav-capsule {
display: flex;
align-items: center;
margin-left: 30rpx;
width: 140rpx;
justify-content: space-between;
height: 100%;
}
.back-pre {
width: 32rpx;
height: 36rpx;
margin-top: 4rpx;
padding: 10rpx;
}
.nav-capsule {
width: 36rpx;
height: 40rpx;
margin-top: 3rpx;
}
json:
{
"component": true,
"usingComponents": {}
}
js:
const app = getApp()
Component({
properties: {
navbarData: {
//navbarData 由父頁面傳遞的數據,變量名字自命名
type: Object,
value: {},
observer: function(newVal, oldVal) {}
}
},
data: {
height: '',
//默認值 默認顯示左上角
navbarData: {
showCapsule: 1
},
imageWidth: wx.getSystemInfoSync().windowWidth, // 背景圖片的高度
imageHeight: '', // 背景圖片的長度,通過計算獲取
backIcon: "../../img/fanhui.png",
},
attached: function() {
// 獲取是否是通過分享進入的小程序
this.setData({
share: app.globalData.share
})
// 定義導航欄的高度 方便對齊
this.setData({
height: app.globalData.height
})
},
methods: {
// 返回上一頁面
_navback() {
wx.navigateBack()
},
// 計算圖片高度
imgLoaded(e) {
console.log(e.detail.height)
this.setData({
imageHeight: e.detail.height *
(wx.getSystemInfoSync().windowWidth / e.detail.width)
})
},
tapName: function() {
console.log(0)
}
//返回到首頁
// _backhome() {
// wx.switchTab({
// url: '/pages/index/index'
// })
// }
},
})
其實可以不用定義兩個導航,只要navbar.js判斷是否是通過分享進入小程序或者是當前頁面是否是首頁,來決定隱藏/顯示導航左上角的返回按鈕。
地圖定位
在監聽小程序初次渲染完成時,通過apiwx.getLocation
獲取小程序當前的經緯度,再通過經緯度在地圖給小程序進行定位。但是這個API需要用戶授權後才能獲取到,只需要在首次打開小程序時 進行授權即可。
在app.json設置:
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用於小程序位置接口的效果展示"
}
}
授權過後,在首頁的index.js中的onReady
監聽頁面渲染函數中獲取小程序的經緯度:
onReady: function() {
const that = this;
const markers = that.data.markers;
wx.getLocation({
type: 'wgs84',
success(res) {
markers.latitude = res.latitude;
markers.longitude = res.longitude;
that.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: markers
})
const latitude = res.latitude
const longitude = res.longitude
}
})
},
index.js完整代碼如下:
//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
markers: [{ //地圖標註的信息
iconPath: "../resources/location.png",
id: 0,
latitude: 26.64702,
longitude: 106.63024,
width: 50,
height: 50
}],
latitude: 26.64702,
longitude: 106.63024,
nvabarData: {
showCapsule: 1, //是否顯示左上角圖標 1表示顯示 0表示不顯示
title: '健康碼', //導航欄 中間的標題
white: true, // 是就顯示白的,不是就顯示黑的。
},
// 導航頭的高度
height: app.globalData.height * 2 + 20,
userImg: "../img/user1.png",
cradImg: "../img/user2.png",
clickCradimg: "../img/jilu.png",
rightimg: "../img/rightimg.png"
},
onLoad: function() {},
onReady: function() {
const that = this;
const markers = that.data.markers;
wx.getLocation({
type: 'wgs84',
success(res) {
console.log(res)
markers.latitude = res.latitude;
markers.longitude = res.longitude;
that.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: markers
})
const latitude = res.latitude
const longitude = res.longitude
}
})
},
login: function() {
wx.navigateTo({
url: '/pages/userinfo/index',
})
},
card: function() {
wx.navigateTo({
url: '/pages/card/index',
})
},
punchCard: function() {
wx.navigateTo({
url: '/pages/punchcard/index',
})
}
})
index.wxml
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" bindcontroltap="controltap" markers="{{markers}}" show-location>
</map>
<view class="info">
<view class="login" bindtap="login">
<image src="{{userImg}}"></image>
<view>信息登錄</view>
</view>
<view class="crad" bindtap="card">
<image src="{{cradImg}}"></image>
<view>健康卡</view>
</view>
</view>
<view class="clickCrad" bindtap="punchCard">
<view class="left">
<image class="cradImg" src="{{clickCradimg}}"></image>
<view>每日健康打卡</view>
</view>
<image src="{{rightimg}}" class="rightImg"></image>
</view>
index.wxss:
#map {
width: 100%;
height: 100%;
}
.info {
position: fixed;
top: 250rpx;
padding: 30rpx 100rpx;
background: #fff;
border-radius: 10px;
display: flex;
justify-content: space-between;
font-weight: bold;
z-index: 99999999999;
left: 0;
right: 0;
margin: 0 40rpx;
}
.info image {
width: 100rpx;
height: 100rpx;
}
.login {
text-align: center;
}
.crad {
text-align: center;
}
.clickCrad {
background: #fff;
margin: 10rpx 40rpx 20rpx 40rpx;
padding: 20rpx 100rpx;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 500rpx;
right: 0;
left: 0;
z-index: 999999999999;
}
.left {
display: flex;
align-items: center;
}
.cradImg {
width: 50rpx;
height: 50rpx;
margin-right: 10px;
}
.rightImg {
width: 35rpx;
height: 35rpx;
}