微信登录

uniapp实现微信授权登录功能，微信授权登录主要是用到了三个api,分别是uni.getProvider,uni.login,uni.getUserInfo但是在此之前，先要做一些准备

如果是APP端
微信授权登录的前提是有微信appid,和appsercret
需要去微信开发者平台创建app,或者小程序填写相关信息申请应用的appid和appSecret，直接登录微信开发者平台微信开放平台 然后登录，按照提示进行申请就好啦，然后在manifest.json中进行配置
image.png
如果是没有appid和appSecret是无法是现在功能的

  1.     getUserInfo() {
  2.         return new Promise((resolve, reject) => {
  3.             uni.getUserProfile({
  4.                 lang: 'zh_CN',
  5.                 desc: '用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，
  6.                 success: (res) => {
  7.                     console.log(res, 'resss')
  8.                     resolve(res.userInfo)
  9.                 },
  10.                 fail: (err) => {
  11.                     reject(err)
  12.                 }
  13.             })
  14.         })
  15.     },
  17.     //先登录，获取access_token,refresh_token，expiires_in,openid,scope,unionid
  18.     getLogin() {
  19.         return new Promise((resolve, reject) => {
  20.             uni.login({
  21.                 success(res) {
  22.                     console.log(res, 'res')//微信成功登录，获取到code
  23.                     resolve(res)
  24.                 },
  25.                 fail: (err) => {
  26.                     console.log(err, 'logoer')
  27.                     reject(err)
  28.                 }
  29.             })
  30.         })
  31.     },
  33.    weixinLogin() {
  34.         let that = this;
  35.         uni.getProvider({
  36.             service: 'oauth',
  37.             success: function(res) {
  38.                //支持微信、qq和微博等
  39.                if (~res.provider.indexOf('weixin')) {
  40.                     console.log(res, 'ress')
  41.                     let userInfo = that.getUserInfo();
  42.                     let loginRes = that.getLogin();
  43.                     Promise.all([userInfo, loginRes]).then((result) =>{
  44.                         let userInfo = result[0];
  45.                         let loginRes = result[1];
  46.                         let access_token = loginRes.authResult.access_token;
  47.                         let openid = loginRes.authResult.openid;
  48.                         let data = Object.assign(loginRes.authResult, userInfo);
  49.                         that.$store.dispatch('Login', {
  50.                                 type: 'weixin',
  51.                                 url: that.url,
  52.                                 data
  53.                         }).then(r => {
  54.                                 if (r == 'ok') {
  55.                                     uni.hideLoading()
  56.                                 }
  57.                                 }).catch(err => {
  58.                                     uni.hideLoading();
  59.                                     uni.showToast({
  60.                                     icon: 'none',
  61.                                     title: err
  62.                                 })
  63.                             })
  64.                         })
  66.                         }
  67.                     },
  68.            fail: function(err) {
  69.                 uni.hideLoading();
  70.                 uni.showToast({
  71.                 icon: 'none',
  72.                 title: err
  73.                 })
  74.             }
  75.     })
  76. },

对于微信小程序的微信登录，不用去配置权限，也不用使用getProvider，直接调用uni.login,uni.getUserInfo就可以啦

这里出现了新的api,uni.getUserProfile (微信基础库2.10.4版本对用户信息相关接口进行了调整，使用 uni.getUserInfo 获取得到的 userInfo 为匿名数据，建议使用 uni.getUserProfile 获取用户信息。)

为什么要用promise拉成平级？
在实践过程中，如果在uni.login中嵌套uni.getUserProfile会出现直接不能弹出获取授权弹框，因为login失败就不会在调用getUserProfile（授权行为） - 用户提现会相对较差
因此promise在这个时候就重出江湖 - 和上面是一样的，只是删除了其他多么的代码

  1. getUserInfo() {
  2. return new Promise((resolve, reject) => {
  3.     wx.getUserProfile({
  4.       lang: 'zh_CN',
  5.       desc: '用户登录', 
  6.       success: (res) => {
  7.         resolve(res.userInfo)
  8.       },
  9.       fail: (err) => {
  10.         reject(err)
  11.       }
  12.     })
  13.   })
  14. },
  16. getLogin() {
  17.   return new Promise((resolve, reject) => {
  18.     wx.login({
  19.       success(res) {
  20.         resolve(res.code)
  21.       },
  22.       fail: (err) => {
  23.         reject(err)
  24.       }
  25.     })
  26.   })
  27. },
  29. login() {
  30.     let userInfo = this.getUserInfo();
  31.     let wxCode = this.getLogin();
  32.     Promise.all([userInfo, wxCode]).then((res) => {
  33.       //都获取权限成功
  34.     }).catch(err => {
  36.   })
  37. }

app实现微信登录

  1.     uni.getProvider({
  2.         service: 'oauth',
  3.         success: function(res) {
  4.           //支持微信、qq和微博等
  5.           if (~res.provider.indexOf('weixin')) {
  6.                 uni.login({
  7.                     provider: 'weixin',
  8.                     success: function(loginRes) {
  9.                         // 获取用户信息
  10.                         uni.getUserInfo({
  11.                             provider: 'weixin',
  12.                             success: function(infoRes) {
  13.                             let data = Object.assign(loginRes.authResult, infoRes);
  15.                             that.$store.dispatch('Login', {
  16.                                         type: 'weixin',
  17.                                         url: that.url,
  18.                                         data
  19.                                         }).then(res => {
  20.                                         if (res == 'ok') {
  21.                                             uni.hideLoading()
  22.                                         }
  23.                                         fail: function(err) {
  24.                                             uni.hideLoading();
  25.                                             uni.showToast({
  26.                                                 icon: 'none',
  27.                                                 title: err
  28.                                             })
  29.                                         }
  30.                                     })
  31.                                 },
  32.                                 fail: function(err) {
  33.                                     uni.hideLoading();
  34.                                     uni.showToast({
  35.                                         icon: 'none',
  36.                                         title: err
  37.                                     })
  38.                                 }
  39.                             });
  41.                         }
  42.                     },
  43.                     fail: function(err) {
  44.                         uni.hideLoading();
  45.                         uni.showToast({
  46.                             icon: 'none',
  47.                             title: err
  48.                         })
  49.                     }
  50.                 })
  51.             },

app的微信登录需要进行前面的配置，其次是不用进行getUserProfile。
简易版本
直接登录获取用户信息

  1. uni.login({
  2.   provider: 'weixin',
  3.   success: function (loginRes) {
  4.     console.log(loginRes.authResult);
  5.     // 获取用户信息
  6.     uni.getUserInfo({
  7.       provider: 'weixin',
  8.       success: function (infoRes) {
  9.         console.log('用户昵称为：' + infoRes.userInfo.nickName);
  10.       }
  11.     });
  12.   }
  13. });

获取地理位置*

  1. https://blog.csdn.net/qq_37899792/article/details/111572423
  3. https://blog.csdn.net/oneya1/article/details/112708216

1.源生小程序

原生的微信小程序需要在app.json中配置permission字段。uni-app则需要在manifest.json中配置，如下图：
image.png

2.查看授权以及申请授权获取地理位置

  1. getUserLocation() {
  2.   uni.getSetting({
  3.     success: (res) => {
  4.       if (!res.authSetting['scope.userLocation']) {
  5.         console.log(res)
  6.         uni.authorize({
  7.           scope: 'scope.userLocation',
  8.           success: () => { //1.1 允许授权
  9.             this.geo();
  11.           },
  12.           fail:()=> { //1.2 拒绝授权
  13.             console.log('拒绝')
  14.             this.postAddress('')
  15.           }
  16.         })
  17.       } else {
  18.         this.geo();
  19.       }
  20.     }
  21.   })
  22. },

uni.authorize

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。如果用户之前拒绝了授权，此接口会直接进入失败回调，一般搭配uni.getSetting和uni.openSetting使用

3.获取经纬度之后，再借助第三方接口，将获取到的经纬度转为具体的地理位置（可以借助百度的或者腾讯的）。这里用的是腾讯的

注：这个第三方接口（https://apis.map.qq.com）需要在小程序平台设置request安全域名

1 在腾讯平台申请自己的秘钥（申请地址：腾讯位置服务 - 立足生态，连接未来）
2下载小程序js微信小程序JavaScriptSDK v1.0 引入自己的文件
3 var QQMapWX = require(‘@/common/js/qqmap-wx-jssdk.min.js’);
具体代码如下:

  1. // 获取定位城市
  2.     //引入第三方接口
  3.         geo() {
  4.             var QQMapWX = require('@/common/js/qqmap-wx-jssdk.min.js');
  5.             this.qqmapsdk = new QQMapWX({
  6.                 key: 'DL6BZ-***************-6XBEQ' //自己的key秘钥  http://lbs.qq.com/console/mykey.html 在这个网址申请
  8.             });
  9.       //使用接口获取本地地址
  10.             uni.getLocation({
  11.                 type: 'wgs84',
  12.                 success: (res) => {
  13.                     var latitude = res.latitude
  14.                     var longitude = res.longitude
  15.                     var speed = res.speed
  16.                     var accuracy = res.accuracy
  17.           //第三方接口
  18.                     this.qqmapsdk.reverseGeocoder({
  19.                         location: {
  20.                             latitude: latitude,
  21.                             longitude: longitude
  22.                         },
  23.                         success: (res) => {
  24.                             let loginAddress = res.result.ad_info.name
  25.                             this.postAddress(loginAddress)
  26.                         },
  27.                         fail: (res) => {
  28.                             console.log("fail");
  29.                             console.log(res);
  30.                         },
  31.                         complete: (res) => {
  33.                         }
  34.                     });
  35.                 }
  36.             })
  37.         },
  38.         //postAddress请求后台接口
  39.         postAddress(loginAddress) {
  40.             let shareUserId = uni.getStorageSync('shareUserId')//分享人id
  41.       //wx.getLaunchOptionsSync()获取小程序启动时的参数。与 App.onLaunch 的回调参数一致。
  42.             let scene = wx.getLaunchOptionsSync().scene//登录场景
  43.             this.$http({
  44.                 method: 'POST',
  45.                 hideLoading: true,
  46.                 url: '/api/****Info',
  47.                 data: {
  48.                     shareUserId,
  49.                     scene,
  50.                     loginAddress
  51.                 },
  52.             }).then(res => {
  53.                 console.log(res)
  54.                 if (res.code == 0) {
  56.                 }
  57.             }).catch(() => {
  59.             }).finally(res => {
  61.             })
  62.         },

完整流程

  1. //   初次位置授权
  2.             getAuthorize() {
  3.                 return new Promise((resolve, reject) => {
  4.                     uni.authorize({
  5.                         scope: "scope.userLocation",
  6.                         success: () => {
  7.                             resolve(); // 允许授权
  8.                         },
  9.                         fail: () => {
  10.                             reject(); // 拒绝授权
  11.                         },
  12.                     });
  13.                 });
  14.             },
  15.             // 确认授权后，获取用户位置
  16.             getLocationInfo() {
  17.                 const that = this;
  18.                 uni.getLocation({
  19.                     type: "gcj02",
  20.                     success: function(res) {
  21.                         // 暂时
  22.                         that.longitude = res.longitude; //118.787575;
  23.                         that.latitude = res.latitude; //32.05024;
  24.                         console.log("获取当前的用户经度", that.longitude);
  25.                         console.log("获取当前的用户纬度", that.latitude);
  26.                         var long = 0;
  27.                         var lat = 0;
  28.                         //小数点保留六位  经度
  29.                         if (that.longitude.toString().indexOf('.') > 0) {
  30.                             const longlatsplit = that.longitude.toString().split('.');
  31.                             if (longlatsplit.length >= 2) {
  32.                                 long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));
  33.                             }
  34.                         }
  35.                         if (that.latitude.toString().indexOf('.') > 0) {
  36.                             const longlatsplit1 = that.latitude.toString().split('.');
  37.                             if (longlatsplit1.length >= 2) {
  38.                                 lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
  39.                             }
  40.                         }
  42.                         cookie.set("longitude",long);
  43.                         cookie.set("latitude",lat);
  45.                         console.log("纬度", lat);
  46.                         // this.distance(that.latitude,that.longitude);
  47.                         that.markers = [{
  48.                             id: "",
  49.                             latitude: res.latitude,
  50.                             longitude: res.longitude,
  51.                             iconPath: "../../static/img/phone.png",
  52.                             width: that.markerHeight, //宽
  53.                             height: that.markerHeight, //高
  54.                         }, ];
  55.                         that.getList();
  56.                     },
  57.                 });
  58.             },
  59.             // 拒绝授权后，弹框提示是否手动打开位置授权
  60.             openConfirm() {
  61.                 return new Promise((resolve, reject) => {
  62.                     uni.showModal({
  63.                         title: "请求授权当前位置",
  64.                         content: "我们需要获取地理位置信息，为您推荐附近的美食",
  65.                         success: (res) => {
  66.                             if (res.confirm) {
  67.                                 uni.openSetting().then((res) => {
  68.                                     if (res[1].authSetting["scope.userLocation"] === true) {
  69.                                         resolve(); // 打开地图权限设置
  70.                                     } else {
  71.                                         reject();
  72.                                     }
  73.                                 });
  74.                             } else if (res.cancel) {
  75.                                 reject();
  76.                             }
  77.                         },
  78.                     });
  79.                 });
  80.             },
  81.             // 彻底拒绝位置获取
  82.             rejectGetLocation() {
  83.                 uni.showToast({
  84.                     title: "你拒绝了授权，无法获得周边信息",
  85.                     icon: "none",
  86.                     duration: 2000,
  87.                 });
  88.             },
  89.             getList() {
  90.                 console.log("获取周围美食");
  91.             },
  92.             onReady() {
  93.                 //   wx请求获取位置权限
  94.                 this.getAuthorize()
  95.                     .then(() => {
  96.                         //   同意后获取
  97.                         this.getLocationInfo();
  98.                     })
  99.                     .catch(() => {
  100.                         //   不同意给出弹框，再次确认
  101.                         this.openConfirm()
  102.                             .then(() => {
  103.                                 this.getLocationInfo();
  104.                             })
  105.                             .catch(() => {
  106.                                 this.rejectGetLocation();
  107.                             });
  108.                     });
  109.             },

实现uniapp打开地图app,并且将要去得店铺标记经纬度传入

  1. 注意：
  2. uni.openLocation({
  3.   latitude: parseFloat(lat),//------》传入的经纬度必须是浮点数， 不能传入字符串，否则地图打不开
  4.   longitude:parseFloat(lon),
  5.   scale: 18
  6. })
  1. methods{
  2.   //先获取当前位置，然后通过位置坐标，在内置地图中定位到当前位置
  3.     openMap(lon,lat){
  4.                     console.log("获取经纬度ssssfff",lon,lat);
  5.                     //打开地图，并将门店位置传入
  6.                     uni.getLocation({
  7.                         success: res => {
  8.                             // res.latitude=lat;
  9.                             // res.longitude=lon;
  10.                             console.log('location success', parseFloat(lat),parseFloat(lon))
  11.                             uni.openLocation({
  12.                                 latitude: parseFloat(lat),
  13.                                 longitude:parseFloat(lon),
  14.                                 scale: 18
  15.                             })
  16.                         }
  17.                     })
  18.                 },
  19. }

实现当前定位到门店位置距离计算:

  1. //进行经纬度转换为距离的计算
  2.             Rad(d) {
  3.                 return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
  4.             },
  6.             /*
  7.              计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
  8.              默认单位km
  9.             */
  10.             getMapDistance(lat1, lng1, lat2, lng2) {
  11.                 var radLat1 = this.Rad(lat1);
  12.                 var radLat2 = this.Rad(lat2);
  13.                 var a = radLat1 - radLat2;
  14.                 var b = this.Rad(lng1) - this.Rad(lng2);
  15.                 var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
  16.                     Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  17.                 s = s * 6378.137; // EARTH_RADIUS;
  18.                 s = Math.round(s * 10000) / 10000; //输出为公里
  19.                 //s=s.toFixed(2);
  20.                 return s;
  21.             },

完整代码

  1. <template>
  2.     <view class="content">
  3.         <view class="text-area">
  4.             <view class="item">
  5.                 <image class="logo" src="/static/logo.png"></image>
  6.             </view>
  7.             <view class="item item_two">
  8.                 <view class="title" @tap="openMap('104.060268','30.642047')">{{title}}(点击跳转)</view>
  9.                 <view class="distance">距离：{{distance}}km</view>
  10.             </view>
  12.         </view>
  13.     </view>
  14. </template>
  16. <script>
  17.     export default {
  18.         data() {
  19.             return {
  20.                 title: '四川大学华西医院',
  21.                 distance: 0, //"距离"
  22.                 latitude: 39.909, // 默认定在首都
  23.                 longitude: 116.39742,
  24.                 scale: 12, // 默认16
  25.                 markers: [],
  26.                 markerHeight: 30,
  27.                 doorAddress: [], //门店地址
  28.             }
  29.         },
  30.         onLoad() {
  31.         },
  32.         mounted() {
  33.            this.distance = this.getMapDistance('104.04311','30.64242','104.060268','30.642047');
  34.             console.log('距离',this.distance);
  35.         },
  36.         methods: {
  37.             // 确认授权后，获取用户位置
  38.             getLocationInfo() {
  39.                 const that = this;
  40.                 uni.getLocation({
  41.                     type: "gcj02",
  42.                     success: function(res) {
  43.                         // 暂时
  44.                         that.longitude = res.longitude; //118.787575;
  45.                         that.latitude = res.latitude; //32.05024;
  46.                         console.log("获取当前的用户经度", that.longitude);
  47.                         console.log("获取当前的用户纬度", that.latitude);
  48.                         var long = 0;
  49.                         var lat = 0;
  50.                         //小数点保留六位  经度
  51.                         if (that.longitude.toString().indexOf('.') > 0) {
  52.                             const longlatsplit = that.longitude.toString().split('.');
  53.                             if (longlatsplit.length >= 2) {
  54.                                 long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));
  55.                             }
  56.                         }
  57.                         if (that.latitude.toString().indexOf('.') > 0) {
  58.                             const longlatsplit1 = that.latitude.toString().split('.');
  59.                             if (longlatsplit1.length >= 2) {
  60.                                 lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
  61.                             }
  62.                         }
  63.                         // cookie.set("longitude", long);
  64.                         // cookie.set("latitude", lat);
  65.                         console.log("纬度", lat);
  66.                         // this.distance(that.latitude,that.longitude);
  67.                         that.markers = [{
  68.                             id: "",
  69.                             latitude: res.latitude,
  70.                             longitude: res.longitude,
  71.                             iconPath: "../../static/img/phone.png",
  72.                             width: that.markerHeight, //宽
  73.                             height: that.markerHeight, //高
  74.                         }, ];
  75.                         that.getList();
  76.                     },
  77.                 });
  78.             },
  79.             // 拒绝授权后，弹框提示是否手动打开位置授权
  80.             openConfirm() {
  81.                 return new Promise((resolve, reject) => {
  82.                     uni.showModal({
  83.                         title: "请求授权当前位置",
  84.                         content: "我们需要获取地理位置信息，为您推荐附近的美食",
  85.                         success: (res) => {
  86.                             if (res.confirm) {
  87.                                 uni.openSetting().then((res) => {
  88.                                     if (res[1].authSetting["scope.userLocation"] === true) {
  89.                                         resolve(); // 打开地图权限设置
  90.                                     } else {
  91.                                         reject();
  92.                                     }
  93.                                 });
  94.                             } else if (res.cancel) {
  95.                                 reject();
  96.                             }
  97.                         },
  98.                     });
  99.                 });
  100.             },
  102.             // 彻底拒绝位置获取
  103.             rejectGetLocation() {
  104.                 uni.showToast({
  105.                     title: "你拒绝了授权，无法获得周边信息",
  106.                     icon: "none",
  107.                     duration: 2000,
  108.                 });
  109.             },
  110.             getList() {
  111.                 console.log("获取周围美食");
  112.             },
  113.             onReady() {
  114.                 //   wx请求获取位置权限
  115.                 this.getAuthorize()
  116.                     .then(() => {
  117.                         //   同意后获取
  118.                         this.getLocationInfo();
  119.                     })
  120.                     .catch(() => {
  121.                         //   不同意给出弹框，再次确认
  122.                         this.openConfirm()
  123.                             .then(() => {
  124.                                 this.getLocationInfo();
  125.                             })
  126.                             .catch(() => {
  127.                                 this.rejectGetLocation();
  128.                             });
  129.                     });
  130.             },
  131.             openMap(lon,lat) {
  132.                 console.log("获取经纬度ssssfff", lon, lat);
  133.                 //打开地图，并将门店位置传入
  134.                 uni.getLocation({
  135.                     success: res => {
  136.                         // res.latitude=lat;
  137.                         // res.longitude=lon;
  138.                         console.log('location success', parseFloat(lat), parseFloat(lon))
  139.                         uni.openLocation({
  140.                             latitude: parseFloat(lat),
  141.                             longitude: parseFloat(lon),
  142.                             scale: 18
  143.                         })
  144.                     }
  146.                 })
  147.             },
  148.             //进行经纬度转换为距离的计算
  149.             Rad(d) {
  150.                 return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
  151.             },
  152.             /*
  153.                          计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
  154.                          默认单位km
  155.                         */
  156.             getMapDistance(lat1, lng1, lat2, lng2) {
  157.                 var radLat1 = this.Rad(lat1);
  158.                 var radLat2 = this.Rad(lat2);
  159.                 var a = radLat1 - radLat2;
  160.                 var b = this.Rad(lng1) - this.Rad(lng2);
  161.                 var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
  162.                     Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  163.                 s = s * 6378.137; // EARTH_RADIUS;
  164.                 s = Math.round(s * 10000) / 10000; //输出为公里
  165.                 //s=s.toFixed(2);
  166.                 return s;
  167.             },
  168.             //计算距离
  170.             //   初次位置授权
  171.             getAuthorize() {
  172.                 return new Promise((resolve, reject) => {
  173.                     uni.authorize({
  174.                         scope: "scope.userLocation",
  175.                         success: () => {
  176.                             resolve(); // 允许授权
  177.                         },
  178.                         fail: () => {
  179.                             reject(); // 拒绝授权
  180.                         },
  181.                     });
  182.                 });
  183.             },
  186.         }
  187.     }
  188. </script>
  190. <style>
  191.     .content {
  192.         display: flex;
  193.         flex-direction: column;
  194.         align-items: center;
  195.         justify-content: center;
  196.     }
  198.     .logo {
  199.         width: 100%;
  200.         height: 100%;
  201.     }
  203.     .text-area {
  204.         border: 1px solid #CCCCCC;
  205.         padding: 4px 4px;
  206.         width: 95%;
  207.         height: 200rpx;
  208.         display: flex;
  209.         justify-content:space-around;
  210.     }
  212.     .title {
  213.         /* border: 1px solid; */
  214.         font-size: 39rpx;
  215.         color: #8f8f94;
  216.         flex: 1;
  217.     }
  218.     .distance{
  219.         font-size: 25rpx;
  220.         color:red;
  221.         /* border: 1px solid; */
  222.         flex: 1;
  223.     }
  224.     .item{
  225.         /* border: 1px solid; */
  226.         flex: 1;
  227.     }
  228.     .item_two{
  229.         padding-left: 5px;
  230.         flex: 3;
  231.         display: flex;
  232.         flex-direction: column;
  233.     }
  234. </style>

选择位置（地址）

wx.chooseLocation(Object object)

打开地图选择位置。

  • latitude：目标地纬度；longitude：目标地经度；

这里我们要先使用wx.getLocation获取到经度、纬度，然后给wx.chooseLocation使用就可以了，下面看代码：

  1. wx.getLocation({
  2.     type: "wgs84",
  3.     success(res) {
  4.         wx.chooseLocation({
  5.             latitude: res.latitude,
  6.             longitude: res.longitude,
  7.             success: function(data){
  8.         console.log(data)
  9.         }
  10.         })
  11.     }
  12. })

image.png
当我们选中某一个地址，点击确定时，就会返回当前地址的信息：
参数说明：

  • name：位置名称；address：详细地址；latitude：纬度，浮点数，范围为-90~90，负数表示南纬。使用 gcj02 国测局坐标系；longitude：经度，浮点数，范围为-180~180，负数表示西经。使用 gcj02 国测局坐标系；

    使用微信内置地图查看位置信息

    wx.openLocation(Object object)

    使用微信内置地图查看位置

  • latitude：纬度，范围为-90~90，负数表示南纬。使用 gcj02 国测局坐标系longitude：经度，范围为-180~180，负数表示西经。使用 gcj02 国测局坐标系scale：缩放比例，范围5~18name：位置名address：地址的详细说明

    1. wx.openLocation({
    2.   latitude: 30.64242,
    3.   longitude: 104.04311,
    4.   name: "武侯区人民政府(武侯祠大街南)",
    5.   address: "四川省成都市武侯区武侯祠大街264号"
    6. })

    另外，当我们点击右下角绿色按钮（到这去）时，它会自动调用本地地图，可以直接导航，相当方便。

    微信支付*

    1. https://blog.csdn.net/zlk4524718/article/details/118895849

    获取手机号

  1. 第一步 需要用户获取code，
    2. 拿code获取openId 和 session_key，
    3. 拉去获取手机号码权限，允许授权 获取encryptedData和iv
    4. 手机号码是在后台获取的，我们只需要传 encryptedData，iv，sessionKey，openId这个四个字段就能获取到用户手机号了。具体详细步骤请看下面。

    1.用户获取code

    调用login方法获取code ```javascript onLoad(){

    1.      this.getuserNew();               // 获取openid

    }，

    methods：{

    1.   // 获取code
    2.  getuserNew(){
    3.              uni.login({
    4.                provider: 'weixin',
    5.                success:res=>{
    6.                      console.log(res.code);  
    7.                }
    8.              });
    9.   },

    }

  1. <a name="iBlVk"></a>
  2. ## 2.通过code获取获取openId 和 session_key
  3. 方法1， 通过微信官方接口获取
  4. ```javascript
  5.  uni.request({  
  6.     url: 'https://api.weixin.qq.com/sns/jscode2session',  
  7.         method:'GET',  
  8.         data: {  
  9.             appid: 'wx9*******214e0',                         //你的小程序的APPID  
  10.             secret: '33c4d17e4********71253',                 //你的小程序的secret,  
  11.             js_code:res.code,                                 //wx.login 登录成功后的code  
  12.             grant_type: 'authorization_code',
  13.         },  
  14.         success: (cts) => {  
  15.             // 换取成功后 暂存这些数据 留作后续操作  
  16.             this.openId=cts.data.openid               //openid 用户唯一标识  
  17.             this.unionid=cts.data.unionid             //unionid 开放平台唯一标识   当公众号和小程序同时登录过才会有
  18.             this.session_key=cts.data.session_key     //session_key  会话密钥  
  19.             console.log(cts)
  20.             console.log(this.openId,this.session_key)
  21.         }  
  22.     });

方法2 通过后台接口获取
传我们在第一步获取的code参数去获取openId 和 session_key，

  1.   uni.request({
  2.         url:"http://192.168.0.93:6042/login/verifyMini****Code",
  3.         method:"POST",
  4.         data:{
  5.             data:{
  6.                 code:res.code,
  7.             }
  8.         },
  9.         success:(res)=>{
  10.             if(res.data.errorinfo == null){
  11.                 console.log(res.data)
  12.                 this.openId=res.data.data.openId               //openid 用户唯一标识  
  13.                 this.session_key=res.data.data.sessionKey     //session_key  会话密钥  
  14.                 console.log(this.openId,this.session_key);
  15.             }
  16.         }
  17.     })

3.拉去获取手机号码权限，允许授权 获取encryptedData和iv

  1.  <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">唤起授权手机号</button>
  1. // 获取用户手机号
  2.     getPhoneNumber(e){
  4.         console.log(e.detail.errMsg)                                            // 判断用户是否允许获取手机号
  5.         console.log(e.detail.iv)                                                    // 参数 iv
  6.         console.log(e.detail.encryptedData)                               // 参数encryptedData
  7.         if(e.detail.errMsg == "getPhoneNumber:ok"){                // 用户允许或去手机号
  8.             uni.request({
  9.                 url:"http://192.168.0.93:6042/login/miniProgramLogin",
  10.                 method:"POST",
  11.                 data:{
  12.                     data:{
  13.                         encryptedData: e.detail.encryptedData,
  14.                         iv: e.detail.iv,
  15.                         sessionKey: this.session_key,
  16.                         openId: this.openId,
  17.                     }
  18.                 },
  19.                 success:(res)=>{
  20.                     if(res.data.errorinfo == null){
  21.                         console.log(res.data)       // 这个里面就有手机号了
  23.                     }
  24.                 }
  25.             })
  26.         }
  27.     },
  1. onLoad() {    
  2.     //获取appid
  3.     // #ifdef MP-ALIPAY
  4.     console.log('获取appid')
  5.     const appIdRes = my.getAppIdSync();
  6.     console.log("支付宝端appId :", appIdRes.appId);
  7.     this.appID = appIdRes.appId
  8.     // #endif
  10.     // #ifdef MP-WEIXIN
  11.     console.log('获取appid')
  12.     const accountInfo = uni.getAccountInfoSync();
  13.     console.log("微信端appid :",accountInfo.miniProgram.appId); // 小程序 appId
  14.     this.appID = accountInfo.miniProgram.appId
  15.     // #endif
  17.     var that = this
  18.     //获取 loginRes.code
  19.     uni.login({
  20.         provider: 'weixin',
  21.         success: function(loginRes) {
  22.             console.log("loginRes: ",loginRes);
  23.             console.log("loginRes.code", loginRes.code);
  24.             that.loginResCode = loginRes.code
  25.         }
  26.     });
  27. },
  28. //这样就获取到了手机号码。
  1. //获取手机号 发送到后台解密手机号
  2. getPhoneNumber(e) {
  3.     console.log("errMsg", e.detail.errMsg)
  4.     var that = this
  6.     if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
  7.         console.log('用户拒绝提供手机号');
  8.     } else {
  9.         console.log('用户同意提供手机号');
  10.         console.log("iv", e.detail.iv)
  11.         console.log("encryptedData", e.detail.encryptedData)
  12.         var encryptedData = e.detail.encryptedData
  13.         var iv = e.detail.iv
  15.         //检查登录
  16.         uni.checkSession({
  17.             success: (res) => {
  18.                 console.log("checkSession--success---res", res)
  19.                 if (res.errMsg == 'checkSession:ok') {
  20.                     console.log(res);
  21.                     console.log('登录暂未过期');
  22.                     if (encryptedData !== undefined && iv !== undefined) {
  23.                         that.getPhone(that.loginResCode, encryptedData, iv)
  24.                     }
  25.                 }
  26.             },
  27.             fail: (res) => {
  28.                 console.log("checkSession---fail---res", res)
  29.                 console.log('登录已过期');
  30.                 //再执行一次login
  31.                 uni.login({
  32.                     provider: 'weixin',
  33.                     success: function(loginRes) {
  34.                         console.log("loginRes.code", loginRes.code);
  35.                         that.loginResCode = loginRes.code
  37.                         if (encryptedData !== undefined && iv !== undefined) {
  38.                             that.getPhone(that.loginResCode, encryptedData, iv)
  39.                         }
  40.                     }
  41.                 });
  42.             }
  43.         })
  44.     }
  45.     //e.detail.errMsg == 'getPhoneNumber:fail Error: 用户未绑定手机，请先在微信客户端进行绑定后重试'  微信会自动引导用户去绑定手机
  46. },
  48. //手机号发送至后台解密
  49. getPhone(loginResCode, encryptData, ivStr) {
  50.     uni.request({
  51.         url: this.$URL + '/school/app/getMobilePhone',
  52.         method: 'GET',
  53.         data: {
  54.             appId: this.appID,
  55.             code: loginResCode,
  56.             encryptData: encryptData,
  57.             ivStr: ivStr,
  58.         },
  59.         header: {
  60.             'Content-Type': 'application/json;charset=utf-8'
  61.         },
  62.         success: (res) => {
  63.             console.log("获取解密后的手机号 -res:", res)
  64.             if (res.data.code == 200) {
  65.                 console.log("手机号: ", res.data.obj);
  66.                 this.phone = res.data.obj
  67.             } else {
  68.                 console.log('获取解密后的手机号失败', res.data.obj)
  69.                 uni.showToast({
  70.                     title: '获取手机失败，请重试',
  71.                     icon: 'none',
  72.                     duration: 1500,
  73.                 })
  74.             }
  75.         }
  76.     })
  77. },