zoukankan      html  css  js  c++  java
  • 小程序接口请求封装-Promise 实现



    const app = getApp(); /** * http请求封装 */ const service = { get(url, data) { return new Promise((resolve, reject) => { wx.request({ method: 'get', url: app.globalData.base_url + url, data: data, header: { "content-type": "application/json" }, success: (res) => { // 调用接口成功 resolve(res.data) }, fail: (err) => { // 调用接口失败 let resFail = { success: false, message: JSON.stringify(err) } reject(resFail) } }) }) }, post(url, data) { return new Promise((resolve, reject) => { wx.request({ method: 'post', url: app.globalData.base_url + url, data: data, header: { 'content-type': 'application/json', token: app.globalData.login_result ? app.globalData.login_result : 'no-token' }, success: (res) => { // 调用接口成功 resolve(res.data) }, fail: (err) => { // 调用接口失败 let resFail = { success: false, message: err.errMsg ? "系统请求异常" : "系统错误:" + err.errMsg } resolve(resFail) // reject(err) } }) }) } } module.exports = service;

    API地址封装成对象

    const apiMenu = "api/";
    
    /**
     * 接口地址
     * 
     */
    const api = {
      /**
       * 微信用户登录,获取openid
       */
      wxUserLogin: apiMenu + 'WxUserService/WxUserLogin',
    
      /**
     * 获取小程序码
     */
      mpQrCode: apiMenu + 'WxUserService/MpQrCode',
    
    
      /**
    * 校验登录状态
    */
      checkCrmLogin: apiMenu + 'CrmService/CheckCrmLogin',
    
      /**
       * 获取微信用户绑定的手机号
       */
      wxUserPhoneNo: apiMenu + 'WxUserService/WxUserPhoneNo',
    
      /**
     * 保存用户的微信信息
     */
      saveWxUserInfo: apiMenu + 'WxUserService/SaveWxUserInfo',
    
    
    
    };
    
    module.exports = api;
    

    app.js文件中设置全局变量

    //app.js
    
    const updateManager = wx.getUpdateManager();
    
    App({
      onLaunch: function () {
        this.getSystemInfo();
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
    
                  // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }
          }
        })
    
    
        updateManager.onCheckForUpdate(res => {
          console.log(res);
          if (res.hasUpdate) {
            this.updateMP();
          } else {
            console.log('无新版本');
          }
        });
    
      },
    
      updateMP: function () {
        console.log('更新-----------');
        updateManager.onUpdateReady(res => {
          console.log('更新中------------');
          wx.showModal({
            title: '更新提示',
            content: '新版本已经准备好,是否重启应用?',
            success(r) {
              if (r.confirm) {
                // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                updateManager.applyUpdate()
              }
            }
          })
        })
      },
    
      /**
       * 获取系统信息
       */
      getSystemInfo: function () {
        wx.getSystemInfo({
          success: (res) => {
            console.log(res)
            this.globalData.screen_height = res.screenHeight;
          },
        })
      },
    
      globalData: {
        userInfo: null,
        //base_url: 'http://localhost:21021/',//调试环境
        // base_url: 'http://128.0.80.103:5002/',//本机iis
      
        login_result: '',//不为空要跳转至登录页面
        theme_color: '#00A9F0',//主题色
      
        nick_name: '',//昵称
        wx_user_phone: '',//微信用户手机号
        wx_user_province: '',//用户所在省份
        screen_height: 800,
        
        qr_code_scene: '',//小程序码中的场景值
      }
    })
    

     小程序启动页 index.js

    const app = getApp()
    const api = require('../../api.js')
    const http = require('../../http.js');
    const baseDataHelper = require('../../utils/base_data.js');
    const messageHelper = require('../../utils/message.js')
    
    Page({
      data: {
        oper_list: []
      },
    
      onLoad: function () {
        let _this = this;
        if (app.globalData.login_result) {
          // _this.initOperList();
        } else {
          wx.navigateTo({
            url: '../Login/Login',
          })
        }
    
      },
      onShow: function () {
        let _this = this;
        if (app.globalData.login_result) {
          _this.initOperList();
          
        }
      },
    }
    

     Login登录页面

    const app = getApp()
    const api = require('../../api.js')
    const http = require('../../http.js');
    const messageHelper = require('../../utils/message.js')
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        display_logion_btn: false
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        let _this = this;
        console.log(options);
        if (options.scene) {
          app.globalData.qr_code_scene = decodeURIComponent(options.scene).trim();
          console.log(app.globalData.qr_code_scene);
        }
        _this.getLoginCode();
      },
    
      /**
       * 获取登录code
       */
      getLoginCode: function () {
        let _this = this;
        _this.setData({
          display_logion_btn: false
        });
        wx.login({
          timeout: 30000,
          success: res => {
            _this.wxLogin(res.code);
          }, fail: err => {
            messageHelper.show(JSON.stringify(err), '2');
          }
        })
      },
    
      /**
       * 登录
       * @param {*} code-微信登录,code
       */
      wxLogin: function (code) {
        let _this = this;
    
        wx.showLoading({
          title: '登录中...',
          mask: true,
        })
        http.post(api.wxUserLogin, { code: code })
    
          .then(res => {
            console.log(res)
    
            setTimeout(() => {
              wx.hideLoading({
              })
            }, 1000)
    
    
            if (res.success) {
              let _res = res.data;
              app.globalData.login_result = _res.token;
              app.globalData.wx_user_city = _res.city ? _res.city : '';
              app.globalData.wx_user_country = _res.country ? _res.country : '';
              app.globalData.gender = _res.gender ? _res.gender : '';
              app.globalData.head_portrait = _res.image ? _res.image : '';
              app.globalData.nick_name = _res.nick_name ? _res.nick_name : '';
              app.globalData.wx_user_phone = _res.phone ? _res.phone : '';
              app.globalData.wx_user_province = _res.province ? _res.province : '';
              console.log("登录");
              wx.switchTab({
                url: '../index/index',
              })
    
            } else {
              messageHelper.show(res.message, "2")
              _this.setData({
                display_logion_btn: true
              });
            }
          })
    
    
      },
    

      

  • 相关阅读:
    判断是否微信浏览器,是的话,加入自己想加的功能
    Spring MVC源码(三) ----- @RequestBody和@ResponseBody原理解析
    Spring MVC源码(二) ----- DispatcherServlet 请求处理流程 面试必问
    Spring MVC源码(一) ----- 启动过程与组件初始化
    spring5 源码深度解析----- IOC 之 bean 的初始化
    spring5 源码深度解析-----IOC 之 循环依赖处理
    spring5 源码深度解析-----IOC 之 属性填充
    spring5 源码深度解析----- IOC 之 bean 创建
    spring5 源码深度解析----- IOC 之 开启 bean 的加载
    spring5 源码深度解析----- IOC 之 自定义标签解析
  • 原文地址:https://www.cnblogs.com/WQ1992/p/14341712.html
Copyright © 2011-2022 走看看