专业小程序设计开发——助力新电商新零售

电话+V：159999-78052，欢迎咨询微信小程序导航栏增加定位，[小程序设计与开发]，[小程序投流与推广]，[小程序后台搭建]，[小程序整套源码打包]，[为个体及小微企业助力]，[电商新零售模式]，[小程序运营推广及维护]

一、微信小程序怎样看定位

微信小程序怎样看定位？

具体步骤：

1，登录小程序后台.

2，进入“附近的小程序”.

3，开通功能后.

4，添加地点即可。

微信小程序开通定位功能的说明：

1、公众平台新增附近的小程序功能，附近的小程序是公众平台新增的能力，除了在小程序的后台添加地点开通附近的小程序外，也可以在公众号的后台添加开通。

2、运营者只需要填写自己企业或门店的地点信息，除了门店的地点信息，按说明填写企业的地点信息也可以，微信相关人士表示只要提供的地点的经营资质信息没有问题，基本就可以通过。

3、附近的小程序范围为5km，参考朋友圈广告的范围，附近的小程序也应该是显示5km范围内的。

4、一个小程序可以绑定10个门店，可以申请绑更多。一个小程序最多可以添加10个门店信息，不过，对于多个连锁店的企业来说，显然不够用。类似小程序带参数的二维码从1万扩大到10万一样，微信官方表示，后续会考虑优化。

5、附近的小程序显示顺序是由近到远与一般的基于地理位置提供服务的App类似，附近小程序的显示顺序为从近到远。附近的雏形，提升空间很大。

二、微信小程序如何在导航栏处有地址天气

1、在小程序的app.json文件中，设置导航栏的背景颜色和文字颜色，以及标题文字内容。在小程序的页面中，使用微信提供的地图API获取用户位置信息，并将其显示在页面上

微信小程序实现跳转小程序、计算距离、标记点和跳转导航系统

原创2022-06-2912:41·东少笔记示例简介本文主要介绍项目中常用的一些功能，供大家参考：

1、小程序跳转到其它小程序，并传参和获取参数数据；

2、计算定位位置和目标位置的距离；

3、地图上标记所有位置，并实现点击跳转到导航系统页面。

Tips：为了演示的方便，代码都会尽量缩减，样式随意。

实现过程一、小程序跳转到其它小程序，并传参和获取参数数据

1、wxml代码如下：

<buttoncatchtap="goMiniProgram"class="button-style">跳转小程序</button>2、跳转小程序的js代码如下：

appId：要打开的小程序appId；

path：打开的页面路径，如果为空则打开首页；

extraData：需要传递给目标小程序的数据，目标小程序可在App.onLaunch、App.onShow中获取到这份数据（本文介绍的是在App.onShow获取）；

envVersion：要打开的小程序版本（本文使用'develop'）。

//跳转小程序goMiniProgram:function(){wx.navigateToMiniProgram({appId:'要打开的小程序appId'，path:'pages/index/index'，extraData:{from:'miniProgram'，appName:'程序名'，responseType:'code'}，envVersion:'develop'，success(res){console.log(res)}})}3、目标小程序获取传参的数据：

//app.js使用下面写法获取extraData的数据onShow:function(options){console.log(options)if(options.referrerInfo.extraData){this.globalData.extraData=options.referrerInfo.extraData;}}二、计算定位位置和目标位置的距离

1、app.json增加代码，用于授权定位的提示信息（点击“确定”）：

"permission":{"scope.userLocation":{"desc":"你的位置信息将用于小程序位置接口的效果展示"}}

2、wxml代码如下：

<text>跟目标地址距离为：{{distance}}</text>3、计算距离的js代码如下：

1）计算距离函数，单位km；

//计算距离函数（单位km）Rad(d){//根据经纬度判断距离returnd*Math.PI/180.0;}，getDistance(lat1，lng1，lat2，lng2){//lat1用户的纬度//lng1用户的经度//lat2目标的纬度//lng2目标的经度varradLat1=this.Rad(lat1);varradLat2=this.Rad(lat2);vara=radLat1-radLat2;varb=this.Rad(lng1)-this.Rad(lng2);vars=2*Math.asin(Math.sqrt(Math.pow(Math.sin(a/2)，2)+Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2)，2)));s=s*6378.137;//6378.137为地球半径s=Math.round(s*10000)/10000;s=s.toFixed(2)+'km';//保留两位小数returns;}})2）页面加载时，获取定位坐标并计算距离（latitude2和longitude2为设置的目标坐标）；

/***生命周期函数--监听页面加载*/onLoad:function(options){//获取当前位置wx.getLocation({type:'gcj02'，//altitude:true，//较高精确度success:(res)=>{console.log('当前位置：'，res);//113.418123，22.505415letdistance=this.getDistance(res.latitude，res.longitude，this.data.latitude2，this.data.longitude2);this.setData({distance:distance});}})}三、地图上标记所有位置，并实现点击跳转到导航系统页面

1、wxml代码如下（宽高单位使用px，如用rpx在ipone5屏幕下会导致显示不完全）：

<mapid="myMap"style="width:{{mapWidth}}px;height:{{mapHeight}}px;"latitude="{{latitude}}"longitude="{{longitude}}"markers="{{markers}}"show-locationbindmarkertap="selectMarket"include-points="{{markers}}"bindmarkertap="openOmnirange"></map>2、js代码如下：

1）data数据设置；

/***页面的初始数据*/data:{latitude:22.495393，longitude:113.376004，markers:[{id:0，latitude:22.502508，longitude:113.39271，iconPath:'../../images/mark_icon.png'，width:'40'，height:'40'，}，{id:1，latitude:22.489619，longitude:113.391488，iconPath:'../../images/mark_icon.png'，width:'40'，height:'40'，}，{id:2，latitude:22.523008，longitude:113.369713，iconPath:'../../images/mark_icon.png'，width:'40'，height:'40'，}，{id:3，latitude:22.494695，longitude:113.452789，iconPath:'../../images/mark_icon.png'，width:'40'，height:'40'，}，{id:4，latitude:22.535693，longitude:113.379631，iconPath:'../../images/mark_icon.png'，width:'40'，height:'40'，}，{id:5，latitude:22.506448，longitude:113.418437，iconPath:'../../images/mark_icon.png'，width:'40'，height:'40'，}，]，addressMes:[{name:'孙文纪念公园'，address:'中山市兴中道'}，{name:'金钟湖公园'，address:'中山市新安路南'}，{name:'岐江公园'，address:'中山一路与西堤路交叉口'}，{name:'长江水世界'，address:'火炬高技术开发区景观路1号'}，{name:'逸仙湖公园'，address:'广东省中山市湖滨路'}，{name:'中环广场'，address:'广东省中山市兴政路1号'}，]，mapWidth:''，mapHeight:''}2）页面加载时，计算手机屏幕宽高，并赋值给地图；

/***生命周期函数--监听页面加载*/onLoad:function(options){letsy=wx.getSystemInfoSync()，mapWidth=sy.windowWidth，mapHeight=sy.windowHeight;this.setData({mapWidth:mapWidth，mapHeight:mapHeight})}

3）点击标记点，跳转到导航系统；

//点击标记点openOmnirange:function(e){letid=e.markerId;wx.openLocation({latitude:this.data.markers[id].latitude，longitude:this.data.markers[id].longitude，name:this.data.addressMes[id].name，address:this.data.addressMes[id].address})}

【WINDRISES MINIPROGRAM PROMOTION】尊享直接对接老板

电话+V： 159999-78052

专注于小程序推广配套流程服务方案。为企业及个人客户提供了高性价比的运营方案，解决小微企业和个体拓展客户的问题