一、功能需求
- 页面展示默认门店(门店名称、门店电话、导航地址)
- 点击联系电话,调取拨打默认门店的联系电话
- 点击【导航前往】,调取手机地图软件进行导航
- 与其他页面交互:
- 点击默认门店名称,跳转到选择门店页面
二、代码实现
1.home.wxml
1 <!-- 选择门店 --> 2 <view class="chooseshop"> 3 <view class="shop" bindtap="toShop"> 4 <text>{{shopName}}</text> 5 <image src="/images/right.png"></image> 6 </view> 7 <view class="contact"> 8 <view class="call" bindtap="callPhone" data-phoneNumber="{{phoneNumber}}"> 9 <image src="/images/call.png"></image> 10 <text>联系餐厅</text> 11 </view> 12 <view class="navigate" bindtap="navigateToResturant" data-marker="{{marker}}"> 13 <image src="/images/navigate.png"></image> 14 <text>导航前往</text> 15 </view> 16 </view> 17 </view>
2.home.wxss
1 /*选择门店*/ 2 .chooseshop{ 3 display: flex; 4 justify-content: space-between; 5 align-items: center; 6 margin: 10rpx; 7 } 8 .shop{ 9 display: flex; 10 align-items: center; 11 } 12 .shop image{ 13 width: 30rpx; 14 height: 30rpx; 15 } 16 .contact{ 17 display: flex; 18 justify-content: space-around; 19 } 20 .call ,.navigate{ 21 display: flex; 22 flex-direction: column; 23 align-items: center; 24 margin: 10rpx; 25 } 26 .call image,.navigate image{ 27 width: 50rpx; 28 height: 50rpx; 29 } 30 .call text,.navigate text{ 31 font-size: 20rpx; 32 color:gray; 33 }
3.home.js
1 Page(){ 2 data: { 3 //门店名称 4 shopName:\'信义领御店\', 5 //门店联系电话 6 phoneNumber:\'0755-23204540\', 7 marker:{}, 8 //自定义数组,存放banner显示在页面上 9 bannerList:[], 10 //所有banner图片的高度 11 bannerHeight: \'\', 12 //自定义数组,存放热门推荐菜品 13 hotFoodList:[] 14 }, 15 onLoad: function (options) { 16 console.log("门店的名称",options.name); 17 this.setData({ 18 shopName:options.name, 19 phoneNumber:options.phoneNumber, 20 marker:{ 21 name:options.name, 22 address:options.address, 23 latitude:options.latitude, 24 longitude:options.longitude, 25 } 26 }) 27 }, 28 //选择门店 29 toShop(){ 30 wx.navigateTo({ 31 url: \'/pages/shop/shop\', 32 }) 33 }, 34 //联系餐厅 35 callPhone(e){ 36 console.log("获取的联系电话",e); 37 wx.makePhoneCall({ //调起拨打电话弹窗 38 phoneNumber:e.currentTarget.dataset.phonenumber 39 }) 40 }, 41 //导航前往 42 navigateToResturant(e){ 43 console.log("用户点击了首页导航按钮",e); 44 marker = e.currentTarget.dataset.marker 45 console.log("此时的marker",marker); 46 //获取用户当前位置 47 wx.getLocation({ 48 type:"gcj02", //gcj02 返回可用于 wx.openLocation 的坐标 49 }).then(res=>{ 50 console.log("用户允许获取当前位置",res); 51 //判断对象是否为空 52 if(Object.keys(marker).length>0){ 53 //地图搜索目的地 54 wx.openLocation({ 55 name:marker.name, 56 address:marker.address, 57 latitude:Number(marker.latitude), 58 longitude: Number(marker.longitude), 59 scale:16 60 }) 61 console.log("导航所选地址"); 62 }else{ 63 //地图搜索目的地 64 wx.openLocation({ 65 name:"信义领御店", 66 address:"广东省深圳市宝安区新安街道信义领御105号铺", 67 latitude:22.578572, 68 longitude: 113.918622, 69 scale:16 70 }) 71 console.log("导航默认地址"); 72 } 73 }).catch(err=>{ 74 console.log("用户拒绝获取当前位置",err); 75 wx.showModal({ 76 title:"授权当前位置", 77 content:"需要授权位置信息才可以导航,点击去设置开启位置权限", 78 confirmText:"去设置", 79 success(res){ 80 console.log("弹窗点击",res); 81 if(res.confirm){ 82 wx.openSetting() //调起客户端小程序设置界面 83 } 84 } 85 }) 86 }) 87 }, 88 }
三、效果展示