微信小程序封装网络请求和登录授权功能的实现

1.在utils下创建config.js文件

const BaseUrl = "http://234.nat.ipyingshe.com"
module.exports = {
  BaseUrl
}

           

2.创建network.js

const Config = require(’./config.js’)

function netWork(obj) {

if (wx.getStorageSync(“TOKEN”) != " " && wx.getStorageSync(“TOKEN”) !=“undefined”){

var token = wx.getStorageSync(“TOKEN”)

}

console.log(“正在请求” + obj.url)

// console.log(obj.para)

wx.request({

url: Config.BaseUrl + obj.url,

data: obj.para || {},

header: {

“content-type”: ‘application/json’,

“X-YDL-Token”: token,

},
method: obj.method || 'GET',
dataType: 'json',
responseType: 'text',
success: function (res) {
  if (typeof obj.success === "function") {
    obj.success(res)
  }
},
fail: function (err) {
  wx.showToast({
    title: "您的网络不给力",
    icon: "none",
    duration: 2000
  })
  if (typeof obj.fail === "function") {
    obj.fail(err)
  }
},
complete: function (res) {
  if (typeof obj.complete === "function") {
    obj.complete(res)
  }

}
           

})

}

module.exports = {

netWork

}

登陆页面

html 代码

<!--pages/login/login.wxml-->
<view wx:if="{{canIUse}}" class="bgclass">
  <view class='header'>
    <image class="logo_img" src="../../img/user_img.png"></image>
  </view>

  <view class='content'> 登陆后发现更多精彩~ </view>

  <button class='bottom' bindtap="getUser">
    微信快速登录
  </button>

  <view class="all" wx-if="{{show==1}}">
    <cover-view class="phone">
      <cover-view class="wrap">
        <cover-image class="logo" src="../../img/user_img.png"></cover-image>
        <!-- <cover-image class="error" src="../../images/ic_guanbi.png" bindtap="close"></cover-image> -->
        <cover-view class="phoneButton">
          <button open-type="getPhoneNumber" bindgetphonenumber="bindphone">绑定手机号</button>
        </cover-view>
      </cover-view>

    </cover-view>
  </view>

</view>
           

const netWorkComm = require("../../utils/network.js")
const app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    //判断小程序的API，回调，参数，组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    show: 0,
    tryit: ""
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    var that = this;
    //隐藏 转发按钮 
    wx.hideShareMenu();
  },
  close: function () {
    this.setData({
      show: 0
    })
    wx.navigateBack()
  },

  bindphone: function (e) {
    var that = this
    netWorkComm.netWork({
      url: '/app/auth/wxPhone',
      method: 'POST',
      para: {
        'encryptedData': e.detail.encryptedData,
        'iv': e.detail.iv
      },
      success: function (res) {
        console.log(res)
        if (res.data.code == 200 || res.data.code == '200') {
          wx.hideLoading()
          wx.showToast({
            title: '手机号获取成功',
            icon: 'success',
            duration: 2000
          })
          wx.navigateBack()
        } else {
          wx.showToast({
            title: '获取手机号失败',
            icon: "none",
          })
        }
      }
    })
  },

  getUser() {
    var that = this
    wx.getUserProfile({
      desc: '获取用户信息',
      success: (res) => {
        console.log(res)
        that.setData({
          userInfo: res.userInfo
        })
        getApp().globalData.userInfo = res.userInfo;
        console.log(res.userInfo)
        wx.setStorageSync("userInfo", res.userInfo)
        wx.login({
          success: res => {
            console.log(res)
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
            //获取登录临时凭证
            var code = res.code;
            getApp().globalData.userCode = res.code;
            console.log(res)
            wx.showLoading({
              title: '加载中',
            })
            netWorkComm.netWork({
              url: '/app/auth/wxLogin',
              method: 'POST',
              para: {
                code: code,
                userName: getApp().globalData.userInfo.nickName,
                avatarUrl: getApp().globalData.userInfo.avatarUrl,
                gender: getApp().globalData.userInfo.gender,
              },
              success: function (res) {
                console.log(res)
                wx.hideLoading()
                if (res.data.code == 200 || res.data.code == '200') {
                  wx.setStorageSync("TOKEN", res.data.data.token)
                  wx.showToast({
                    title: '授权登录成功',
                    icon: 'success',
                    duration: 2000
                  })
                  that.setData({
                    show: 1
                  })
                }
              }
            })

          }
        });

      }
    })
  },