热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

详解微信小程序的request封装示例

这篇文章主要介绍了详解微信小程序的request封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

背景

之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的 request 的封装

httpUtils.js

const request = function (path, method, data, header) {
 let user_id = "";
 let token = "";
 try {
  user_id = wx.getStorageSync(USER_ID_KEY);
  token = wx.getStorageSync(TOKEN_KEY);
 } catch (e) {}
 header = header || {};
 let COOKIE = [];
 COOKIE.push("USERID=" + user_id);
 COOKIE.push("TOKEN=" + token);
 COOKIE.push("device=" + 1);
 COOKIE.push("app_name=" + 1);
 COOKIE.push("app_version=" + ENV_VERSION);
 COOKIE.push("channel=" + 1);
 header.COOKIE = COOKIE.join("; ");
 return new Promise((resolve, reject) => {
  wx.request({//后台请求
   url: API_BASE_URL + path,
   header: header,
   method: method,
   data: data,
   success: function (res) {
    if (res.code) {
     reject(res.data)
    } else {
     resolve(res.data)
    }
   },
   fail: function (res) {
    reject("not data");
   }
  });
 });
};

userLogin.js

const login = function () {
 try {
  wx.removeStorageSync(USER_ID_KEY);
  wx.removeStorageSync(TOKEN_KEY)
 } catch (e) {}
 return new Promise((resolve, reject) => {
  wx.login({
   success: res => {
    let code = res.code;
    // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
    wx.getUserInfo({
     withCredentials: true,
     success: res => {
      let userInfo = res.userInfo;
      let name = userInfo.nickName;
      let avatar = userInfo.avatarUrl;
      let sex = userInfo.gender;
      let data = {
       code: code,
       encryptedData: res.encryptedData,
       iv: res.iv,
       name: name,
       avatar: avatar,
       sex: sex,
       from: FROM,
      };
      request("/api/user_login/byWeChatApplet", "POST", data).then( (res)=>{
       if (!res.code) {
        try {
         wx.setStorageSync(USER_ID_KEY, res.user_id);
         wx.setStorageSync(TOKEN_KEY, res.token)
        } catch (e) {
         reject(JSON.stringify(e));
        }
       }
       resolve(res)
      }).catch( (errMsg)=>{
       reject(errMsg)
      });
     },
     fail: function (res) {
      if (res.errMsg && res.errMsg.startsWith("getUserInfo:fail") && res.errMsg.search("unauthorized") !== -1) {
       reject("getUserInfo:fail");
       return;
      }
      wx.getSetting({
       success: (res) => {
        if (!res.authSetting["scope.userInfo"]) {//没授权
         showModal('提示', '需要获取用户的权限,点击确定前往设置,打开用户信息', true, function (res) {
          wx.openSetting({
           success: (res) => {
            // 用户返回 不管是否开启 接着去重新登录
            login().then( (res)=>{
             if (res.code) {
              reject(res.message);
              return
             }
             try {
              wx.setStorageSync(USER_ID_KEY, res.user_id);
              wx.setStorageSync(TOKEN_KEY, res.token)
             } catch (e) {
              reject(JSON.stringify(e));
             }
             resolve(res)
            }).catch( (errMsg)=>{
             reject(errMsg)
            });
           }
          })
         }, function () {})
        }
       }
      });
     }
    })
   }
  })
 });
};

项目地址:https://github.com/lmxdawn/wxa-demo

一个 vue + thinkphp5.1 搭建的后台管理:https://github.com/lmxdawn/vue-admin-html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 校园表白墙微信小程序,校园小情书、告白墙、论坛,大学表白墙搭建教程
    小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]
  • 微信小程序新手教程wx.request(object) API
    微信小程序新手教程wx.request(object)API,本篇默认已经成功安装微信小程序工具,来和小编一起看看吧wx.request(object)API这里通过干活集中营的A ... [详细]
  • 微信小程序地图实现展示线路的方法
    这篇文章将为大家详细讲解有关微信小程序地图实现展示线路的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所 ... [详细]
  • 知晓推送正式上线!送你 13 亿条模板消息
    「知晓推送」能帮助小程序运营人员有效解决粉丝转化、消息推送、数据分析等多个层面的麻烦事,让小程序推广难、留存差的问题从此成为过去式。在服务上线的这个重要的日子里,贴心的小云专门向” ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 小程序自动授权和手动接入的方式及操作步骤
    本文介绍了小程序支持的两种接入方式:自动授权和手动接入,并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换,以及手动接入后如何下载代码包和提交审核。 ... [详细]
  • 微信民众号商城/小顺序商城开源项目介绍及使用教程
    本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目,包括前端和后端的目录结构,以及所使用的技术栈。同时提供了项目的运行和打包方法,并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接,以及加入前端交流QQ群的方式。 ... [详细]
  • PHP小习题:PHP小练习题前几天在百度知道里面看到有位网友询问如何制作一下的小程序:用php语言设计一个小程序,计算今天到达下月的天数、全部输出这些天数,并使得每天的日期以三种颜 ... [详细]
  • 项目需要实现弹幕,网上参考了各种方法,最后觉得transform+transition实现的效果在移动设备上性能最好,在iphone6和红米4上测试,看不到 ... [详细]
  • 问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败,PC端是可以请求 ... [详细]
  • 1.有事会出现小程序的页面超出屏幕,导致横向和纵向溢出,这时候在wxss文件中加入overflow:hidden来隐藏溢出屏幕的部分。.container{background:# ... [详细]
  • 微信小程序适合做什么?微信小程序详情介绍
    微信小程序是腾讯新开发的功能,目前备受关注的,还有很多用户不是很了解,不知道这个微信小程序适合什么,因此就让小编给大家讲讲吧。微信小程序详情介绍小程序也有很多功能,如果你按照之前的 ... [详细]
  • 微信小程序实现简易计算器功能_javascript技巧
    这篇文章主要为大家详细介绍了微信小程序实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的 ... [详细]
author-avatar
爱你116564
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有