微信小程序--登录+获取用户信息+获取手机号+获取位置信息

主题部分

1、登录基础代码
wxml：

  <view class="userinfo" style="margin-bottom:50rpx">
    <view class="userinfo" style="margin-top:45%">
      <button wx:if="{{hasUserInfo==1}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
      登录
      </button> 
    </view>
    <block wx:if="{{hasUserInfo==2}}">
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>

js:

  getUserInfo: function (e) {
    console.log("-=-=-=-=-=-=-=-=-=")
    console.log(e.detail.userInfo)
    if (e.detail.userInfo){
      app.globalData.userInfo = e.detail.userInfo
      userInfo = e.detail.userInfo
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: 2
      })
      this.flush();
    }else{
      this.setData({
        hasUserInfo: 1
      })
    }
  }

2、根据wx.login登录获取code，根据code获取openId和sessionKey，每个人的openId都是唯一的。
js代码：

 wx.login({
      success: function (res) {
        if (res.code) {
          console.log("code------"+res.code)
          //根据code获取openId, sessionKey, unionId
          wx.request({
            url: urlIndex+'/minicx/mini/getOpenid?code=' + res.code, 
            method: 'GET',
            success: function (res) {
              openId = res.data.openid;
              sessionKey = res.data.session_key;
              console.log("openId------"+openId);
              console.log("sessionKey------" +sessionKey);
            }
          })
       }
    }
})

后台代码：

	/**
	 * 小程序登录接口
	 * @param code 用户登录凭证
	 * @return
	 */
	@RequestMapping("/getOpenid")
	@ResponseBody
	public String login(String code){
		logger.debug("======小程序登录接口getOpenid=====");
		String appid = PayConfigUtil.MINI_APP_ID;
		String secret = PayConfigUtil.MINI_APP_SECRET;
		String url = "https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code";
		JSONObject json  = new JSONObject();
		try {
			json =  HttpClientUtilsmini.httpsRequest(url, "get", null);
		} catch (Exception e) {
			logger.error(ExceptionUtils.getStackTrace(e));
		}
		
		return json.toJSONString();
	}

/** 
     * 发起https请求并获取结果 
     *  
     * @param requestUrl 请求地址 
     * @param requestMethod 请求方式（GET、POST） 
     * @param submitStr 提交的json格式数据 
     * @return JSONObject(通过JSONObject.get(key)的方式获取json对象的属性值) 
     */  
    public static JSONObject httpsRequest(String requestUrl, String requestMethod, String submitStr) throws Exception{  
        JSONObject jsonObject = null;  
        StringBuffer buffer = new StringBuffer();  
        URL url = new URL(requestUrl);  
        HttpsURLConnection httpUrlConn = (HttpsURLConnection) url.openConnection();  
        httpUrlConn.setDoOutput(true);  
        httpUrlConn.setDoInput(true);  
        httpUrlConn.setUseCaches(false);  
        httpUrlConn.setConnectTimeout(10000);
        httpUrlConn.setReadTimeout(10000);
        // 设置请求方式（GET/POST）  
        httpUrlConn.setRequestMethod(requestMethod.toUpperCase());  
        if ("GET".equalsIgnoreCase(requestMethod))  
            httpUrlConn.connect();  
        // 当有数据需要提交时  
	    if (null != submitStr) {  
        OutputStream outputStream = httpUrlConn.getOutputStream();  
        // 注意编码格式，防止中文乱码  
        outputStream.write(submitStr.getBytes("UTF-8"));  
            outputStream.close();  
        }  
  
        // 将返回的输入流转换成字符串  
        InputStream inputStream = httpUrlConn.getInputStream();  
        InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");  
        BufferedReader bufferedReader = new BufferedReader(inputStreamReader);  
        String str = null;  
        while ((str = bufferedReader.readLine()) != null) {  
            buffer.append(str);  
        }  
        bufferedReader.close();  
        inputStreamReader.close();  
        // 释放资源  
        inputStream.close();  
        inputStream = null;  
        httpUrlConn.disconnect();  
        jsonObject = JSONObject.parseObject(buffer.toString());  
        return jsonObject;  
    }

3、用户授权后，获取用户加密手机号信息，根据openId和sessionKey将加密手机号解析。
wxml:

<button wx:if="{{!phoneNum}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">扫一扫</button>
<button wx:else bindtap="scanCode">扫一扫</button>

js代码：

  //用户点击扫一扫
  scanCode:function(){
    console.log("不需要手机授权的扫一扫")
    this.locationAndScanCode();
  },
  
  //用户点击扫一扫
  getPhoneNumber(e){
      console.log("需要手机授权的扫一扫")
      var that = this;
      console.log(e.detail)
      console.log(e.detail.iv)
      console.log(e.detail.encryptedData)
      //获取用户授权店的手机号，从后台转换
      wx.request({
        url: urlIndex + '/minicx/mini/getPhoneNum', 
        method:'POST',
        data:{
          encrypData: e.detail.encryptedData,
          ivData: e.detail.iv,
          sessionKey: sessionKey
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success:function(res){
          console.log(res.data.phoneNumber);
          that.setData({
            phoneNum: res.data.phoneNumber
          })
          if (res.data.phoneNumber!=null){
            //将刚获取的手机号加上openId一起传到后台保存
            wx.request({
              url: urlIndex + '/minicx/mini/insertPhoneNum',
              method: 'POST',
              data: {
                openId: openId,
                userPhone: res.data.phoneNumber
              },
              header: {
                'content-type': 'application/x-www-form-urlencoded'
              },
              success: function (res) {
                userId = res.data;
              }
            })
          }
          
        }
      })
      
      if (e.detail.encryptedData!=null){
        this.locationAndScanCode();
      }
      
  },

java:

	/**
	 * 获取微信手机号
	 * @param encrypData
	 * @param ivData
	 * @param sessionKey
	 * @return
	 */
	@RequestMapping(value="/getPhoneNum")
	@ResponseBody
	public String getPhoneNum(String encrypData,String ivData,String sessionKey){
		System.out.println("----"+encrypData);
		System.out.println("----"+ivData);
		System.out.println("----"+sessionKey);
		logger.debug("======小程序获取手机号接口getPhoneNum=====");
		JSONObject json = new JSONObject();
		try {
			if(encrypData!=null && ivData!=null && sessionKey!=null
					&& encrypData!="" && ivData!="" && sessionKey!="") {
				json = miniService.getPhoneNum(encrypData, ivData, sessionKey);
			}
		} catch (Exception e) {
			logger.error(ExceptionUtils.getStackTrace(e));
		}
		return json.toJSONString();
	}

	@Override
	public JSONObject getPhoneNum(String encrypData, String ivData,String sessionKey) throws Exception {
        
	    //Thread.sleep(850);
		JSONObject json = new JSONObject();
		byte[] encryp = Base64.decodeBase64(encrypData);
		byte[] iv= Base64.decodeBase64(ivData);
		byte[] key = Base64.decodeBase64(sessionKey);
		AlgorithmParameterSpec ivSpec = new IvParameterSpec(iv);
		Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
        SecretKeySpec keySpec = new SecretKeySpec(key, "AES");
        cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);
        String result = new String(cipher.doFinal(encryp),"UTF-8");
		JSONObject resultJson = JSONObject.parseObject(result);
		String phoneNumber = resultJson.getString("phoneNumber");
		logger.info(phoneNumber);
		json.put("errcode", 0);
		json.put("errmsg", "ok");
		json.put("phoneNumber", phoneNumber);
		return json;
	}

4、位置授权，获取位置信息。
js:

  //位置授权+扫一扫
  locationAndScanCode:function(){
    //获取位置
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        console.log("纬度：" + latitude)
        console.log("经度：" + longitude)
        // 允许从相机和相册扫码
        wx.scanCode({
          success(res) {
            console.log(res.result);
            if (Object.keys(res.result).length == 17) {
              wx.redirectTo({
                url: '../vin/vin?vinCode=' + res.result +'&userId='+userId,
              })
            }else{
              wx.showModal({
                title: '提示',
                content: '扫描失败，请重新扫描！',
                showCancel: false,
                confirmText: '好的',
                success: function (res) {
                }
              })
            }
          },
          fail(res) {
            console.log("扫描失败")
          }
        })
      },
      fail: function () {
        wx.getSetting({
          success: function (res) {
            if (!res.authSetting['scope.userLocation']) {
              wx.showModal({
                title: '',
                content: '请允许系统获取您的定位！',
                confirmText: '授权',
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    wx.openSetting();
                  } else {
                    console.log('用户拒绝了位置授权。');
                  }
                }
              })
            } else {
              //用户已授权，但是获取地理位置失败，提示用户去系统设置中打开定位
              wx.showModal({
                title: 'GPS未开启',
                content: '请在系统设置中打开定位服务！',
                showCancel:false,
                confirmText: '好的',
                success: function (res) {
                }
              })
            }
          }
        })
      }
    })
  },

小坑部分

1、小程序跟后台交互时，post请求必须加上header属性，如下，否则参数传不到后台。

	wx.request({
       url: urlIndex + '/minicx/mini/insertPhoneNum',
        method: 'POST',
        data: {
          openId: openId,
          userPhone: res.data.phoneNumber
        },
        //post请求要加header，不然参数传不到后台
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          userId = res.data;
        }
      })

2、小程序只支持https请求，在本地测试时，可自行购买隧道，申请域名、证书。
链接: https://segmentfault.com/a/1190000011310292.