1、 官网注册登录、申请AppID

 2、官网下载开发工具

3、 创建项目

 4、项目目录

5、对比和vue差异

6、封装tabbar

"tabBar": {
    "backgroundColor": "#ffffff",
    "color": "#999999",
    "selectedColor": "#222222",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/home/index/index",
        "text": "首页",
        "iconPath": "images/tabbar1.png",
        "selectedIconPath": "images/tabbar1-active.png"
      },
      {
        "pagePath": "pages/shop/index/index",
        "text": "门店",
        "iconPath": "images/tabbar2.png",
        "selectedIconPath": "images/tabbar2-active.png"
      },
      {
        "pagePath": "pages/ranking/index/index",
        "text": "风云榜",
        "iconPath": "images/tabbar3.png",
        "selectedIconPath": "images/tabbar3-active.png"
      },
      {
        "pagePath": "pages/statistics/index/index",
        "text": "统计",
        "iconPath": "images/tabbar4.png",
        "selectedIconPath": "images/tabbar4-active.png"
      }
    ]
  },

 

 7、、、、最最最 重要的封装请求

①、app.js

// app.js
const envVersion = __wxConfig.envVersion;

let token = '';

App({
  //测试
  // APIURL: "https://crmsrvtest.1111.cn",
  // imgUrl: "https://crmsrvtest.1111.cn/assets/wximg",

  //正式
  APIURL: "https://crmsrv.1111.cn",
  imgUrl: "https://crmsrv.1111.cn/assets/wximg",

  onLaunch() {
    // wx.hideTabBar()
    var _this = this
    //判断是否有新版本
    this.autoUpdate()
    //判断是否是从企业微信进入
    wx.getSystemInfo({
      success(res) {
        if (res.environment) {
          // 企业微信环境
          console.log('从企业微信进入')
          //获取token
          //如果是生产环境又有token 就是用定义的token
          if (envVersion == 'develop' && token) {
            _this.globalData.token = token
            _this.getUserInfo(token).then(res => {
              _this.globalData.userInfo = res.data

              if (_this.CallbackFn) {
                console.log('CallbackFn')
                // 如果有说明,onLoad中没有拿到值,把结果当参数再传入回调中
                _this.CallbackFn(res);
              }
            })
          } else {
            //获取code和token
            _this.getToken()
          }
        } else {
          // 微信环境
          console.log('从微信进入1')
          wx.reLaunch({
            url: '/pages/error/error',
          })
        }
      }
    })
  },
  //获取token
  getToken() {
    let _this = this
    wx.showLoading({
      title: '加载中...',
      task: true
    })
    return new Promise((reslove, reject) => {
      wx.qy.login({
        success: function (res) {
          // console.log('企业微信code==>',res.code)
          wx.request({
            url: _this.APIURL + '/index.php/oa/token/wxGetToken',
            data: { code: res.code },
            method: 'POST',
            success(res) {
              wx.hideLoading()
              if (res.data.statusCode == 200) {
                _this.globalData.token = res.data.data.token
                //获取token成功,获取个人信息
                _this.getUserInfo(res.data.data.token).then(res => {
                  _this.globalData.userInfo = res.data
                  // wx.showTabBar({
                  //   animation:true //是否需要过渡动画
                  // })
                  // 此处判断app对象中有没有这个回调函数
                  console.log(88)
                  if (_this.CallbackFn) {
                    console.log('CallbackFn')
                    // 如果有说明,onLoad中没有拿到值,把结果当参数再传入回调中
                    _this.CallbackFn(res);
                  }
                  reslove()
                })
              } else {
                //登录失败(弄个错误页面吧)
                wx.reLaunch({
                  url: '/pages/error/error?flag=2&msg=' + res.data.msg,
                })
              }
            },
            fail(res) {
              _this.tishi('网络连接失败')
            }
          })
        }
      })
    })
  },
  // 获取个人信息
  getUserInfo(token) {
    console.log('aa')
    let _this = this;
    return new Promise((resolve, reject) => {
      wx.request({
        url: _this.APIURL + '/oa/shop_info/userInfo',
        method: 'POST',
        header: {
          'Content-Type': 'application/json', 'token': token
        },
        success(res) {
          if (res.statusCode == 200) {

            if (res.data.statusCode == 9005) {
              wx.reLaunch({
                url: '/pages/error/error?flag=3&msg=' + res.data.msg
              });
            } else {
              resolve(res.data);
            }
          } else {
            _this.tishi(res.data.msg)
          }
        }
      })
    })
  },
  autoUpdate(){
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      updateManager.onCheckForUpdate(function (res) {
        console.log('onCheckForUpdate====', res)
        // 请求完新版本信息的回调
        if (res.hasUpdate) {
          console.log('res.hasUpdate====')
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: '更新提示',
              content: '新版本已经准备好,是否重启应用?',
              success: function (res) {
                console.log('success====', res)
                // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
                if (res.confirm) {
                  // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                  updateManager.applyUpdate()
                }
              }
            })
          })
          updateManager.onUpdateFailed(function () {
            // 新的版本下载失败
            wx.showModal({
              title: '已经有新版本了哟~',
              content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
            })
          })
        }
      })
    }
  },

  //提示封装
  tishi(msg) {
    wx.showToast({
      title: msg,
      icon: 'none',
      mask: true,
    })
  },
  /**
    * 定义全局变量
    */
  globalData: {
    userInfo: null,//rule_id 2筹开管理经理3筹建督导经理5筹建部负责人6筹建指导顾问7平台装饰公司8平台项目经理9装饰公司
    token: null,
  }
})

②、util.js

const app = getApp()
const baseURL = app.APIURL
/**
 * GET请求封装
 */
function get(url, data = {}) {
  return request(url, data, 'GET')
}

/**
 * POST请求封装
 */
function post(url, data = {}) {
  return request(url, data, 'POST')
}

/**
 * 微信的request
 */

function request(url, data = {}, method = "GET") {
  var contentType = 'application/json'
  var token = app.globalData.token
  // console.log(token);
  return new Promise(function(resolve, reject) {
    wx.request({
      url: baseURL + url,
      data: data,
      method: method,
      header: {
        'Content-Type': contentType,'token':token
      },
      success: function(res) {
        if (res.statusCode == 200) {
          //请求正常200
          if(res.data.statusCode == 9005){
            wx.reLaunch({
              url: '/pages/error/error?flag=3&msg='+res.data.msg
            });
          }else{
            resolve(res.data);
          }
        }else {
          //请求失败
          reject("请求失败:" + res.statusCode)
        }
      },
      fail: function(err) {
        //服务器连接异常
        reject("服务器连接异常,请检查网络再试")
      }
    })
  });
}

function loginAgain(){
  console.log('function loginAgain')
  wx.getSystemInfo({
    success (res) {
      if(res.environment) {
        // 企业微信环境
          //获取code和token
          app.getToken()
      } else {
         // 微信环境
         wx.navigateTo({
           url: '/pages/error/error',
         })
      }
    }
  })
}


module.exports = {
  request,
  get,
  post
}

③、api.js

const util =require('./util')

module.exports = { 
  // //获取用户信息
  getUserInfo: (data) => util.post('/oa/shop_info/userInfo',data),
  //获取荣誉
  getMyHonorList: (data) => util.post('/oa/mine/getMyHonorList',data),
  //获取用户列表
  userList: (data) => util.post('/oa/super_management/userList',data),
  //切换用户
  changeUser: (data) => util.post('/oa/super_management/changeUser',data),
};

④、封装完毕如何使用

const app =  getApp();
const api =require('../../../utils/api');

api.managedStores().then(res =>{
    console.log(res)
})

请求完毕处理数据

Logo

前往低代码交流专区

更多推荐