• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

uniapp 在小程序获取当前经纬度,微信账号信息

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

index.vue

<template>
    <view>
        <view class="">
            当前经度:{{local.long}}
            当前纬度:{{local.lat}}
        </view>
        <view v-if="!hasLogin">
            游客你好{{hasLogin}}
        </view>
        <view v-if="hasLogin">
            你好:{{userinfo.nickName}}
        </view>
    </view>
</template>

<script>
    import { mapState,mapMutations } from \'vuex\'
    export default {
        computed:{
            ...mapState([\'hasLogin\',\'userinfo\',\'local\'])
        },
        data() {
            return {
                jwd:{
                    long:"",//当前位置的经度
                    lat:"",//当前位置的纬度
                }
            }
        },
        onLoad() {
            this.getjwd()
            this.islogin()
        },
        methods: {
            ...mapMutations([\'login\',\'savejwd\']),
            getjwd(){
                var _this=this
                uni.getLocation({
                    type: \'wgs84\',                
                    success(res) {                        
                        let jwd={
                            long:res.longitude,//当前位置的经度
                            lat:res.latitude,//当前位置的纬度
                        }
                        _this.savejwd(jwd)
                        console.log(\'当前位置的经度:\' + res.longitude);
                        console.log(\'当前位置的纬度:\' + res.latitude);                        
                    }
                });
            },
            islogin(){
                var _this=this
                uni.getStorage({
                    key: \'userinfo\',
                    success(res) {
                        _this.login(res.data)
                        console.log(res.data);
                                                
                    }
                });
            }
        }
    }
</script>

<style>
    
</style>

user.vue

<template>
    <view>
        
        <button class=\'testbutton\' open-type="getUserInfo" @getuserinfo="tologin" withCredentials="true">
        登陆</button>
        <view v-if="!hasLogin">
            请先登陆{{userinfo}}
        </view>
        <view v-if="hasLogin">
            {{userinfo.nickName}}
        </view>
    </view>
</template>

<script>
    import { mapState,mapMutations } from \'vuex\'
    export default {
        computed:{
            ...mapState([\'hasLogin\',\'userinfo\'])
        },
        data() {
            return {
                
            }
        },
        methods: {
            ...mapMutations([\'login\',\'aa\']),
            tologin(){
                this.aa(2)
                var _this=this
                uni.getUserInfo({
                    provider:"weixin",
                    success(info) {
                        console.log(info)
                        _this.login(info.userInfo)
                        
                    }
            })
            }
        }
    }
</script>

<style>

</style>

store/index.js

import Vue from \'vue\'
import Vuex from \'vuex\'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  state: {
    hasLogin: false,
    userinfo: {},
    local:{},
   
  },
  mutations: {
    // 登录
    login(state,res) {
      state.hasLogin = true
      state.userinfo = res
      uni.setStorage({
        key: \'userinfo\',
        data: res
      })
    },
    
    // 经纬度
    savejwd(state,jwd) {
      state.local = jwd      
    },
    aa(state,n){
        console.log(n)
    }
  },
})
 
export default store

main.js

 

 

 

因为涉及到定位,所以要直接修改微信代码的 app.json。注意是修改微信代码,不是uniapp代码

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

 

 

 效果图未登陆前

 

 

 点击登陆后

 

 将信息经纬度储存到vuex,方便其他页面全局调用。如果下次在其他位置进入小程序,经纬度也会变

将用户信息存储到localstore 方便下次进入小程序时可以免登陆

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap