小程序端app.js封装请求方法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序端app.js封装请求方法相关的知识，希望对你有一定的参考价值。

参考技术A //app.js

App(

  onLaunch: function () 

    let App = this;

    // 设置api地址

    App.setApiRoot();

  ,

  globalData: 

    userInfo: null

  ,

  api_root: '', // api地址

  appid:'',

  /**

   * 显示失败提示框

   */

  showError(msg, callback) 

    wx.showModal(

      title: '友情提示',

      content: msg,

      showCancel: false,

      success(res) 

        callback && callback();

      

    );

  ,

   /**

   * 设置api地址

   */

  setApiRoot() 

    let App = this;

    // App.api_root = config.config.host;

    let extConfig = wx.getExtConfigSync? wx.getExtConfigSync(): 

    console.log(extConfig)

    App.appid = extConfig.attr.appid

    App.api_root = extConfig.attr.host;

  ,

  /**

   * get请求

   */

  _get(url, data, success, fail, complete, check_login) 

    let App = this;

    wx.showNavigationBarLoading();

    // 构造请求参数

    data = Object.assign(

      token: wx.getStorageSync('token'),

      appid:App.appid  

    , data);

    // if (typeof check_login === 'undefined')

    //   check_login = true;

    console.log(App.api_root) 

    // 构造get请求

    let request = () => 

      data.token = wx.getStorageSync('token');

      wx.request(

        url: App.api_root + url,

        header: 

          'content-type': 'application/json'

        ,

        data,

        success(res)  

          if (res.statusCode !== 200 || typeof res.data !== 'object') 

            console.log(res);

            App.showError('网络请求出错'); 

            return false;

           

          if (res.data.code === -1) 

            // 登录态失效, 重新登录

            wx.hideNavigationBarLoading();

            App.doLogin(() => 

              App._get(url, data, success, fail);

            );

           else if (res.data.code === 0) 

            App.showError(res.data.msg);

            return false;

           else 

            success && success(res.data);

          

        ,

        fail(res) 

          // console.log(res);

          App.showError(res.errMsg, () => 

            fail && fail(res);

          );

        ,

        complete(res) 

          wx.hideNavigationBarLoading();

          complete && complete(res);

        ,

      );

    ;

    // 判断是否需要验证登录

    check_login ? App.doLogin(request) : request();

  ,

  /**

   * post提交

   */

  _post_form(url, data, success, fail, complete) 

    wx.showNavigationBarLoading();

    let App = this;

    // 构造请求参数 

    data = Object.assign(

      token: wx.getStorageSync('token'), 

      appid:App.appid  

    , data);

    data.token = wx.getStorageSync('token');

    wx.request(

      url: App.api_root + url,

      header: 

        'content-type': 'application/x-www-form-urlencoded',

      ,

      method: 'POST',

      data,

      success(res) 

        if (res.statusCode !== 200 || typeof res.data !== 'object') 

          App.showError('网络请求出错');

          return false;

        

        if (res.data.code === -1) 

          // 登录态失效, 重新登录

          App.doLogin(() => 

            App._post_form(url, data, success, fail);

          );

          return false;

         else if (res.data.code === 0) 

          App.showError(res.data.msg, () => 

            fail && fail(res);

          );

          return false;

        

        success && success(res.data);

      ,

      fail(res) 

        // console.log(res);

        App.showError(res.errMsg, () => 

          fail && fail(res);

        );

      ,

      complete(res) 

        wx.hideLoading();

        wx.hideNavigationBarLoading();

        complete && complete(res);

      

    );

  ,

   /**

   * 验证登录

   */

  checkIsLogin() 

    return wx.getStorageSync('token') != '';

  , 

  /**

   * 授权登录

   */

  doLogin(callback)  

    let App = this;

    // if (e.detail.errMsg !== 'getUserInfo:ok') 

    //   return false;

    // 

    wx.showLoading(

      title: "加载数据中...",

      mask: true

    ); 

    // 执行微信登录

    wx.login( 

      success(res) 

        // 发送用户信息 

        App._post_form('login', 

          code: res.code,

        , result => 

          // 记录token user_id

          wx.setStorageSync('token', result.data.token,);

          // 执行回调函数

          callback && callback();

        , false, () =>   

          wx.hideLoading();

        );

      

    ); 

  

)

JAVA EE社团管理升级版-微信小程序端说明文档

CLUB+社团管理系统

小程序端说明文档

项目地址：https://github.com/Magazinediver/ClubManager_WeChat_app.git
项目运行：npm init -> npm run serve

系统模块设计

微信用户

  • 浏览所有社团（分类）

  • 浏览所有活动 （分类）

  • 加入社团（不可重读加入）

  • 加入活动 （不可重复加入）

  • 修改个人身份信息

  • 登录

  • 查看自己已加入的社团

  • 查看自己已加入的活动

小程序端用户模块设计

登录

  • 微信登录
    • openid
    • 昵称
    • 头像
    • 地区（考虑不做处理）

小程序端页面模块设计

首页

  • 搜索框→跳转至搜索页
  • 社团海报展示swiper
  • 社团分类导航栏→社团展示页
  • 我的信息展示
    • 我的社团（社名，分类，社团海报，社团描述）→社团详情页面
    • 我的活动（活动海报，活动名，活动地点，活动时间，活动是否过期）→活动详情页面

搜索页

  • 搜索框
  • tab
    • 社团搜索结果
    • 活动搜索结果

社团展示页

  • 社团海报展示swiper

  • 社团分类栏（吸顶）→社团详情页

    • 全部
    • 兴趣
    • 游戏
    • 艺术
    • 组织
    • 志愿
    • 动漫
    • 学术
    • 运动

活动展示页

  • 活动海报展示swiper
  • 活动分类栏（吸顶）→活动详情页
    • 全部
    • 兴趣爱好
    • 学术创新
    • 公益服务
    • 体育运动

个人设置页

  • 用户个人信息（用户图标，用户昵称，用户）

    • 登录按钮→登录页

  • 用户统计信息

    • 社团数
    • 关注数
    • 活动数

  • 我的社团→当前用户所有社团页

  • 我的活动→当前用户所有活动页

  • 我的关注→当前用户所有关注页

  • 我的评论（搁置）

  • 个人信息→个人信息编辑页（姓名、学号）

  • 退出登录

社团详情页

  • 关注按钮
  • 加入按钮
  • 社团详情
    • 社团海报
    • 社团描述
    • 社团类型
    • 社团公告
    • 社团名
    • 社团所有活动

活动详情页

  • 活动海报
  • 加入按钮
  • tab
    • 活动简介
      • 活动名
      • 活动状态
      • 活动细节（地址，时间，联系人，主办社团名）
    • 活动详情
      • 活动介绍
      • 活动须知
    • 所属社团
      • 创办社团的详情

WEB端不同身份功能及信息

用户

功能

  1. 浏览自己的活动和社团
  2. 浏览所有的活动社社团
  3. 加入社团
  4. 加入活动
  5. 关注社团或活动

信息

  • 社员状态（待审核状态、成员状态）

  • 昵称

  • 头像

  • 学号（选填）

  • 真实姓名（选填）

  • 邮箱 （选填）

  • 手机 （选填）

接口

baseUrl : http://121.36.153.113:8000/clubmanage/app

登录页

用户登录接口:

login

前端

queryInfo: {
    userinfo:‘‘,	//用户信息
},

后端

res:{
	meta: {
		status: 200,
		msg: "successful"
	}
}

我的社团页（与首页共用）

我的社团接口:

userclub

我的活动页（与首页共用）

我的活动口:

useractivity

修改用户信息页

修改信息接口:

changinfo

前端

data: {
    name:‘‘
    id:‘‘
},

后端

res:{
	meta: {
		status: 200,
		msg: "successful"
	}
}

首页

轮播图接口:

swiperlist

前端

后端

res:{
    data:{
         pic:[
            ‘https://ae01.alicdn.com/kf/H06978a26753d4c07bf899f39aef2949bf.jpg‘,
            ‘https://ae01.alicdn.com/kf/H54a7061e839f4d7c9ddc5679868b89f7l.jpg‘,
            ‘https://ae01.alicdn.com/kf/H0fd06a63db814c67a6160bdd8fa1ea1ag.jpg‘,
            ‘https://ae01.alicdn.com/kf/Hefdf7d749bdd46ef8f1685f87bd72b74E.jpg‘,
        ],
    }
	meta: {
		status: 200,
		msg: "successful"
	}
}

用户社团接口:

userclub

前端

后端

res:{
    data:{
        clubItem: [
          {
            name: ‘流云梦社‘,
            tag: ‘热门社团‘,
            member: ‘70‘,
            fans: ‘200‘,
            tips: [‘动漫‘, ‘颜值‘, ‘cosplay‘],
            describe: ‘流云梦社“读万卷书，行万里路”为宗旨，以提升校园人文素质为己任。激发同学们的读书兴趣。传播文化，传播思想，丰富大学生活，充实精神世界，共建良好的读书氛围，引发思想的碰撞。‘,
          },
          {
            name: ‘流云梦社‘,
            tag: ‘热门社团‘,
            member: ‘70‘,
            fans: ‘200‘,
            tips: [‘动漫‘, ‘颜值‘, ‘cosplay‘],
            describe: ‘流云梦社“读万卷书，行万里路”为宗旨，以提升校园人文素质为己任。激发同学们的读书兴趣。传播文化，传播思想，丰富大学生活，充实精神世界，共建良好的读书氛围，引发思想的碰撞。‘,
          },
          {
            name: ‘流云梦社‘,
            tag: ‘热门社团‘,
            member: ‘70‘,
            fans: ‘200‘,
            tips: [‘动漫‘, ‘颜值‘, ‘cosplay‘],
            describe: ‘流云梦社“读万卷书，行万里路”为宗旨，以提升校园人文素质为己任。激发同学们的读书兴趣。传播文化，传播思想，丰富大学生活，充实精神世界，共建良好的读书氛围，引发思想的碰撞。‘,
          },
          {
            name: ‘流云梦社‘,
            tag: ‘热门社团‘,
            member: ‘70‘,
            fans: ‘200‘,
            tips: [‘动漫‘, ‘颜值‘, ‘cosplay‘],
            describe: ‘流云梦社“读万卷书，行万里路”为宗旨，以提升校园人文素质为己任。激发同学们的读书兴趣。传播文化，传播思想，丰富大学生活，充实精神世界，共建良好的读书氛围，引发思想的碰撞。‘,
          },
          {
            name: ‘流云梦社‘,
            tag: ‘热门社团‘,
            member: ‘70‘,
            fans: ‘200‘,
            tips: [‘动漫‘, ‘颜值‘, ‘cosplay‘],
            describe: ‘学生社团（英答文名：students society），是指学生为了实现会员的共同意愿和满足个人兴趣爱好的需求、专自愿组成的、按照其章程开展活动的群众性学生组织。学生社团是我国校园文化建设的重要载体，是我国高校第二课堂的引领者属。‘,
          }
        ]
    }
	meta: {
		status: 200,
		msg: "successful"
	}
}

用户活动接口:

useractivity

前端

后端

res:{
    data:{
        activityItem: [{ //活动列表
          name: ‘义务维修会‘,
          pic: ‘https://ae01.alicdn.com/kf/H02612ad5ca404b42955d6e6a3a037694r.jpg‘,
          time: ‘2019年11月24日 9:00～11:00‘,
          address: ‘教四一楼‘,
          status: ‘火热报名中！‘
        },
        {
          name: ‘招新游园会‘,
          pic: ‘https://ae01.alicdn.com/kf/Haa558f3ca46f4c698b647d73fc6460997.jpg‘,
          time: ‘2019年11月20日 9:00～19:00‘,
          address: ‘北校区音乐广场‘,
          status: ‘报名已截止‘
        },
        {
          name: ‘招新游园会‘,
          pic: ‘https://ae01.alicdn.com/kf/Haa558f3ca46f4c698b647d73fc6460997.jpg‘,
          time: ‘2019年11月20日 9:00～19:00‘,
          address: ‘北校区音乐广场‘,
          status: ‘报名已截止‘
        },
        {
          name: ‘招新游园会‘,
          pic: ‘https://ae01.alicdn.com/kf/Haa558f3ca46f4c698b647d73fc6460997.jpg‘,
          time: ‘2019年11月20日 9:00～19:00‘,
          address: ‘北校区音乐广场‘,
          status: ‘报名已截止‘
        }
        ],
    }
	meta: {
		status: 200,
		msg: "successful"
	}
}

社团页

社团轮播图接口:

clubswiperlist

前端

后端

res:{
    data:{
        swiperList:[
            ‘https://ae01.alicdn.com/kf/H06978a26753d4c07bf899f39aef2949bf.jpg‘,
            ‘https://ae01.alicdn.com/kf/H54a7061e839f4d7c9ddc5679868b89f7l.jpg‘,
            ‘https://ae01.alicdn.com/kf/H0fd06a63db814c67a6160bdd8fa1ea1ag.jpg‘,
            ‘https://ae01.alicdn.com/kf/Hefdf7d749bdd46ef8f1685f87bd72b74E.jpg‘,
        ],
    } 
	meta: {
		status: 200,
		msg: "successful"
	}
}

用户社团(分类)接口:

userclubcate

前端

后端

res:{
    data:{
          all:[//全部
              {
                name: ‘全部社‘,
                tag: ‘热门社团‘,
                member: ‘70‘,
                fans: ‘200‘,
                tips: [‘动漫‘, ‘颜值‘, ‘cosplay‘],
                describe: ‘学生社团（英答文名：students society），是指学生为了实现会员的共同意愿和满足个人兴趣爱好的需求、专自愿组成的、按照其章程开展活动的群众性学生组织。学生社团是我国校园文化建设的重要载体，是我国高校第二课堂的引领者属。‘,
              },
        	],
            hobby:[],//兴趣
            game:[],//游戏
            art:[],//艺术
            organ:[],//组织
            volun:[],//志愿
            comic:[],//动漫
            study:[],//学术
            sport:[]//运动
    }
	meta: {
		status: 200,
		msg: "successful"
	}
}

活动页

活动轮播图接口:

activityswiperlist

前端

后端

res:{
    data:{
        pic:[
            ‘https://ae01.alicdn.com/kf/H06978a26753d4c07bf899f39aef2949bf.jpg‘,
            ‘https://ae01.alicdn.com/kf/H54a7061e839f4d7c9ddc5679868b89f7l.jpg‘,
            ‘https://ae01.alicdn.com/kf/H0fd06a63db814c67a6160bdd8fa1ea1ag.jpg‘,
            ‘https://ae01.alicdn.com/kf/Hefdf7d749bdd46ef8f1685f87bd72b74E.jpg‘,
        ],
    }
	meta: {
		status: 200,
		msg: "successful"
	}
}

用户社团(分类)接口:

useractivitycate

前端

后端

res:{
    data:{
          all: [{//全部
              id: ‘1‘,
              name: ‘义务维修会‘,
              pic: ‘https://ae01.alicdn.com/kf/H02612ad5ca404b42955d6e6a3a037694r.jpg‘,
              time: ‘2019年11月24日 9:00～11:00‘,
              address: ‘教四一楼‘,
              status: ‘火热报名中！‘
            },
            {
              id: ‘2‘,
              name: ‘招新游园会‘,
              pic: ‘https://ae01.alicdn.com/kf/Haa558f3ca46f4c698b647d73fc6460997.jpg‘,
              time: ‘2019年11月20日 9:00～19:00‘,
              address: ‘北校区音乐广场‘,
              status: ‘报名已截止‘
            }
          ],
          hobby:[],//兴趣爱好
          study:[],//学术创新
          charity:[],//公益服务
          sports:[],//体育运动
    }
	meta: {
		status: 200,
		msg: "successful"
	}
}

社团详情页

加入社团接口:

joinclub

前端

data:{
        clubname:this.data.clubname
}

后端

res:{
	meta: {
		status: 200,
		msg: "successful"
	}
}

社团详情接口:

clubdetail

前端

clubname:‘‘

后端

res:{
    data:{
        userpic:[
          ‘https://ae01.alicdn.com/kf/H7b4974ddc8294b3882d63b61e4e4cdc3a.jpg‘,
          ‘https://ae01.alicdn.com/kf/H7b4974ddc8294b3882d63b61e4e4cdc3a.jpg‘,
          ‘https://ae01.alicdn.com/kf/H7b4974ddc8294b3882d63b61e4e4cdc3a.jpg‘,
          ‘https://ae01.alicdn.com/kf/H7b4974ddc8294b3882d63b61e4e4cdc3a.jpg‘,
          ‘https://ae01.alicdn.com/kf/H7b4974ddc8294b3882d63b61e4e4cdc3a.jpg‘,
          ‘https://ae01.alicdn.com/kf/H7b4974ddc8294b3882d63b61e4e4cdc3a.jpg‘,
          ‘https://ae01.alicdn.com/kf/H7b4974ddc8294b3882d63b61e4e4cdc3a.jpg‘,
        ],
        clubItem:
        {
          name: ‘流云梦社‘,
          tag: ‘热门社团‘,
          member: ‘70‘,
          fans: ‘200‘,
          notice: ‘对天地:纵横驰骋,俯视群雄; 对朋友:忠肝义胆,福难同当; 对对手:坦诚相待,公平较量; 对敌人:心狠手辣,绝不手软!‘,
          tips: [‘动漫‘, ‘颜值‘, ‘cosplay‘],
          describe: ‘流云梦社“读万卷书，行万里路”为宗旨，以提升校园人文素质为己任。激发同学们的读书兴趣。传播文化，传播思想，丰富大学生活，充实精神世界，共建良好的读书氛围，引发思想的碰撞。‘,
        },
        activityItem: [{ //活动列表
          id:‘1‘,
          name: ‘义务维修会‘,
          pic: ‘https://ae01.alicdn.com/kf/H02612ad5ca404b42955d6e6a3a037694r.jpg‘,
          time: ‘2019年11月24日 9:00～11:00‘,
          address: ‘教四一楼‘,
          status: ‘火热报名中！‘
        },
        {
          id:‘2‘,
          name: ‘招新游园会‘,
          pic: ‘https://ae01.alicdn.com/kf/Haa558f3ca46f4c698b647d73fc6460997.jpg‘,
          time: ‘2019年11月20日 9:00～19:00‘,
          address: ‘北校区音乐广场‘,
          status: ‘报名已截止‘
        },
        ],
    }
	meta: {
		status: 200,
		msg: "successful"
	}
}

活动详情页

加入活动接口:

joinactivity

前端

后端

res:{
	meta: {
		status: 200,
		msg: "successful"
	}
}

社团详情接口:

clubdetail

前端

activityid:‘‘

后端

res:{
    data:{
        activityItem:{
          title:‘我们一起开飞机‘,
          status:‘火热进行中‘,
          address:‘理四一楼‘,
          time:‘2020-6-20‘,
          contact:‘黄sir 17306411528‘,
          club:‘滑板社‘,
          describe:‘这是一个很好的活动‘,
          attention:‘这个活动只有群众才能参加‘
        },
        clubItem:
          {
            name: ‘流云梦社‘,
            tag: ‘热门社团‘,
            member: ‘70‘,
            fans: ‘200‘,
            tips: [‘动漫‘, ‘颜值‘, ‘cosplay‘],
            describe: ‘流云梦社“读万卷书，行万里路”为宗旨，以提升校园人文素质为己任。激发同学们的读书兴趣。传播文化，传播思想，丰富大学生活，充实精神世界，共建良好的读书氛围，引发思想的碰撞。‘,
          },
    }
	meta: {
		status: 200,
		msg: "successful"
	}
}

搜索页

搜索接口:

search

前端

data:{
      query:‘‘
}

后端

res:{
    data:{
        searchList:{
          activityItem: [{ //活动列表
            name: ‘义务维修会‘,
            pic: ‘https://ae01.alicdn.com/kf/H02612ad5ca404b42955d6e6a3a037694r.jpg‘,
            time: ‘2019年11月24日 9:00～11:00‘,
            address: ‘教四一楼‘,
            status: ‘火热报名中！‘
          },
          {
            name: ‘招新游园会‘,
            pic: ‘https://ae01.alicdn.com/kf/Haa558f3ca46f4c698b647d73fc6460997.jpg‘,
            time: ‘2019年11月20日 9:00～19:00‘,
            address: ‘北校区音乐广场‘,
            status: ‘报名已截止‘
          },

          ],
          clubItem: [
            {
              name: ‘流云梦社‘,
              tag: ‘热门社团‘,
              member: ‘70‘,
              fans: ‘200‘,
              tips: [‘动漫‘, ‘颜值‘, ‘cosplay‘],
              describe: ‘流云梦社“读万卷书，行万里路”为宗旨，以提升校园人文素质为己任。激发同学们的读书兴趣。传播文化，传播思想，丰富大学生活，充实精神世界，共建良好的读书氛围，引发思想的碰撞。‘,
            },

          ]
        }
    }
	meta: {
		status: 200,
		msg: "successful"
	}
}

以上是关于小程序端app.js封装请求方法的主要内容，如果未能解决你的问题，请参考以下文章

【微信小程序】wx.request请求封装，超级简单

超好用超短的小程序请求封装

js 对象按照键值（不分区大小写）排序,生成签名方法

小程序api请求层封装（Loading全局配置）

小程序app.js小结

微信小程序开发——使用promise封装异步请求