zoukankan      html  css  js  c++  java
  • 获取系统信息,地理位置,用户信息

    这一篇就废话少一点,直接上代码吧,三个接口都是微信提供的。

    index.js

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data:{
        userinfo : {},
        systemInfo:{},
        location :{}
      },
      onShow:function(){
        var that = this;
        // 获取用户资料
        wx.getUserInfo({
          success:function(res){
            that.setData({
              userinfo:res.userInfo
            });
          }
        });
    
        // 获取系统资料
        wx.getSystemInfo({
          success:function(res){
            that.setData({
              systemInfo : res
            });
          }
        });
        // 获取位置信息
        wx.getLocation({
          success:function(res){
            that.setData({
              location:res
            });
          }
        });
      }
    })

    index.wxml

      <view class="header">
        <image class="user-header" src="{{userinfo.avatarUrl}}"></image>
        <text  >{{userinfo.province}}  {{userinfo.city}}</text>
        <text >{{userinfo.nickName}}</text>
      </view>
      <view class="slice-line"></view>
      <view class="center">
        <text class="text">系统信息</text>
      </view>
      <view class="info-box">
        <text class="info-text">手机型号:{{systemInfo.model}}</text>
        <text class="info-text">设备像素比:{{systemInfo.pixelRatio}}</text>
        <text class="info-text">窗口宽度:{{systemInfo.windowWidth}}</text>
        <text class="info-text">窗口高度:{{systemInfo.windowHeight}}</text>
        <text class="info-text">微信设置的语言:{{systemInfo.language}}</text>
        <text class="info-text">微信版本号:{{systemInfo.version}}</text>
      </view>
      <view class="center">
        <text class="text">位置信息</text>
      </view>
      <view class="slice-line"></view>
      <view class="info-box">
        <text class="info-text">纬度:{{location.latitude}}</text>
        <text class="info-text">经度:{{location.longitude}}</text>
        <text class="info-text">速度:{{location.speed}}</text>
        <text class="info-text">位置精确度:{{location.accuracy}}</text>
      </view>
      <view style="margin-top:100rpx;100%;height:2rpx;"></view>
      
      

    最后效果图

    好了。文本介绍了三个接口的使用方式,具体怎么发挥,大家自行判断吧。 

    源码奉上 http://pan.baidu.com/s/1gfLpuKj

  • 相关阅读:
    windows(win10)下的mysql解压版安装
    微信和QQ网页授权登录
    图片前端重绘前端压缩和自动调整旋转
    时间的显示
    magento中文语言包的使用
    div垂直居中(js)
    centOS IP能ping通但是域名ping不通
    python3 使用pyinstaller打包exe 指定虚拟路径模块
    Flask 多app案例
    将excel的资产数据生成二维码图片
  • 原文地址:https://www.cnblogs.com/mdnx/p/6004807.html
Copyright © 2011-2022 走看看