软工报告部分。。。

定位签到判断

所有代码会在最后一起展示。

index.js部分

先在page的data里面加入下列变量（用来映射到wxml进行显示的，不加运行时会报错）

代码如下

data: {
    motto: 'hello world',
    flag:'',//用来判断是否到场，这三行如果显示到wxml的话是必须添加的
    latitude:0,//纬度
    longitude:0,//经度
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },

要实现定位功能，必须先写一个用来获取设备权限的函数getlocation这个是用来调取微信自带的api来进行申请的

在onload里面写上即可。

//这个函数是用来获取定位权限的，但是每次编译只会在第一次显示，获取过的不会继续弹窗，如果想看效果的话请先清缓存
wx.getSetting({
  success: (res) => {
    console.log(JSON.stringify(res))
    // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
    // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
    // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
    if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
      wx.showModal({
        title: '请求授权当前位置',
        content: '需要获取您的地理位置，请确认授权',
        success: function (res) {
          if (res.cancel) {
            wx.showToast({
              title: '拒绝授权',
              icon: 'none',
              duration: 1000
            })
          } else if (res.confirm) {
            wx.openSetting({
              success: function (dataAu) {
                if (dataAu.authSetting["scope.userLocation"] == true) {
                  wx.showToast({
                    title: '授权成功',
                    icon: 'success',
                    duration: 1000
                  })
                  //再次授权，调用wx.getLocation的API
                  
                } else {
                  wx.showToast({
                    title: '授权失败',
                    icon: 'none',
                    duration: 1000
                  })
                }
              }
            })
          }
        }
      })
    } else if (res.authSetting['scope.userLocation'] == undefined) {
      //调用wx.getLocation的API
    }
    else {
      //调用wx.getLocation的API
    }
  }
})

如果成功了控制台结果的输出会有显示。

接下来获得设备信息后从中直接抽取经纬度即可。对抽取的经纬度信息作比较

还有就是对js不太熟，往data里面存数据只会调用that.setDate方法，看起来比较乱

//用于获取用户的经纬度信息
    var that = this
    //获取当前的地理位置、速度
    wx.getLocation({
      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function (res) {
        //赋值经纬度
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
        })
        if( 30.4589407< res.latitude&& res.latitude< 30.459363
        && 114.6129708<  res.longitude&& res.longitude< 114.621189){
          that.setData({
            flag:"是"
          })
       }else{
        that.setData({
          flag:"否"
        })
       }
    }
      }
    )

Index.wxml部分

加入下面的三行即可

<view class="container">
<view>纬度：{{latitude}}</view>
<view>经度：{{longitude}}</view>
<view>是否在教室：{{flag}}</view>
  <view class="userinfo">

app.jason部分

需要额外添加一个许可也是用来获取权限的

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

注意！要加到jason的{}里面！

所有代码

index.js

// index.js
// 获取应用实例
const app = getApp()
​
​
​
Page({
  data: {
    motto: 'hello world',
    flag:'',
    latitude:0,
    longitude:0,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
​
  
  onLoad: function (options) {
    //这个函数是用来获取定位权限的，但是每次编译只会在第一次显示，获取过的不会继续弹窗，如果想看效果的话请先清缓存
wx.getSetting({
  success: (res) => {
    console.log(JSON.stringify(res))
    // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
    // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
    // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
    if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
      wx.showModal({
        title: '请求授权当前位置',
        content: '需要获取您的地理位置，请确认授权',
        success: function (res) {
          if (res.cancel) {
            wx.showToast({
              title: '拒绝授权',
              icon: 'none',
              duration: 1000
            })
          } else if (res.confirm) {
            wx.openSetting({
              success: function (dataAu) {
                if (dataAu.authSetting["scope.userLocation"] == true) {
                  wx.showToast({
                    title: '授权成功',
                    icon: 'success',
                    duration: 1000
                  })
                  //再次授权，调用wx.getLocation的API
                  
                } else {
                  wx.showToast({
                    title: '授权失败',
                    icon: 'none',
                    duration: 1000
                  })
                }
              }
            })
          }
        }
      })
    } else if (res.authSetting['scope.userLocation'] == undefined) {
      //调用wx.getLocation的API
    }
    else {
      //调用wx.getLocation的API
    }
  }
})
//用于获取用户的经纬度信息
    var that = this
    //获取当前的地理位置、速度
    wx.getLocation({
      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function (res) {
        //赋值经纬度
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
        })
        if( 30.4589407< res.latitude&& res.latitude< 30.459363
        && 114.6129708<  res.longitude&& res.longitude< 114.621189){
          that.setData({
            flag:"是"
          })
       }else{
        that.setData({
          flag:"否"
        })
       }
    }
      }
    )
  }
})
​
​

index.wxml

<!--index.wxml-->
<view class="container">
<view>纬度：{{latitude}}</view>
<view>经度：{{longitude}}</view>
<view>是否在教室：{{flag}}</view>
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
​

app.jason

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的应用",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
​
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}
​