小程序app.js里能作的那些事儿0_0

时间 2019-11-30

原文原文链接

小程序初新建的项目，有三个重要文件app.js、app.json、app.wxss，呐...今天咱们就从我我的的实战经验讲讲，app.js文件里应该作哪些骚操做，方便咱们开发呢。json

1、promise（wx.requset）封装

直接上代码，固然这个你也能够放在utils里单独引用小程序

// promise（wx.requset）封装
  httpPost: function (url, data, type) {
    return new Promise((resolve, reject) => {
      //init
      const that = this;        
      const postData = data;         // 请求参数
      const postType = type          // 请求方式  POST、GET、DELETE...
      //网络请求
      wx.request({
        url: that.configHeadAjax.onlinePath + url,         // 默认请求域名地址（配置项）+api有效地址
        data: postData,
        method: postType,
        header: {                      // 公共请求头，能够按口味添加公共参数
          'content-type': 'application/json' ,
          'token': wx.getStorageSync('token') ? wx.getStorageSync('token'):'',   // token其实就是openid+sessionkey若是没有就是首次登陆服务端作空态判断处理
        },
        success: function (res) {
          if (res.data.status == 1) {
            resolve(res);
          } else {              // 返回错误提示信息
            if (res.data.error_code == 200001){          // 服务端返回状态码为判断标准，不管哪一个接口何时登陆态过时都从新调起login
              wx.setStorageSync("logFlage", 0)    // 本地登陆标识
               wx.navigateTo({                    // 跳转至登陆页
                 url: '../logs/logs',
               })
            }else{
              reject(res)
            }
          }
        },
        fail(res) {
          reject('网络出错');
          wx.showToast({
            title: '网络出错',
            icon:'none'
          })
        }
      })
    });
    return promise;
  },
复制代码

之因此把登陆态判断放在这里，是由于发现，服务端的登陆态和咱们本地须要wx.checkSession检测的用户登陆态是不同的，因此为了不其余页面重复操做，在这里统一作了处理。api

2、环境变量及公共参数配置。

globalData: {       // 这块全局数据貌似每个新建项目都有，就很少解释了，存起来用就完了
    userInfo: null,    // 受权后登陆信息（微信）
    loginStatus: false,  // 默认登陆状态为false
    user: null,         // 登陆信息（帐户）
    secret_key: 'XXXXX',
    timestamp: new Date().getTime()
},
configAjaxPath: {        //经过调用configAjaxPath.onlinePath||
    onlinePath: "https://xxx.xxx.com",
    testPath:'https://test-xxx.xxx.com',
    devPath:'https://dev-xxx.xxx.com'
},
复制代码

这里就很少说了，这样作的目的也很明确，方便引用，方便修改，一目了然，改一盖全....promise

3、用户受权、登陆。

#受权 一般就是包含两个方面的权限bash

用户信息获取受权 getUserInfo
服务API调用受权 wx.authoriz

一般咱们说的受权大可能是首次进入某小程序是弹出的用户信息获取受权微信

#登陆 其实也是看业务需求，大概也分两种方式

用小程序openid && session_key 做为用户标识来存储，并判断是否为该小程序业务的用户登陆
自有登陆注册体系login && register，自有的登陆标识 (多以手机号为主)

但其实无论哪种你都须要一个登陆接口来存储对应信息，而后经过服务端返回值或者微信本地check来判断用户登陆是否过时，那么理清思路，咱们就撸代码了网络

onLaunch: function () {   //首次启动时触发，全局只触发一次
    const that = this
    // 登陆
    wx.checkSession({
      success() {
        // 登陆未过时
      },
      fail() {
        wx.setStorageSync('logFlage',0);   //改变本地登陆状态
        wx.navigateTo({                    // 跳转至登陆页 从新登陆
           url: '../logs/logs',
        }) 
      }
    })
},
userLogin: function () {                //用户登陆
    wx.login({                          //小程序登陆获取code码
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        var data = {
          code: res.code
        }
        this.httpPost('/user/login', data, 'POST').then(res => {             //code
          if (res.data.status == 1){
            wx.setStorageSync('token', res.data.result.token)       //本地存储token取用
            wx.setStorageSync('logFlage', 1);                      //本地存储登陆状态
            // 获取用户信息
            wx.getSetting({
              success: res => {
                if (res.authSetting['scope.userInfo']) {
                  // 已经受权，能够直接调用 getUserInfo 获取头像昵称，不会弹框
                  wx.getUserInfo({
                    success: res => {
                      // 能够将 res 发送给后台解码出 unionId
                      this.globalData.userInfo = res.userInfo;
                      wx.setStorageSync('userinfo', res.userInfo);       //本地存储微信用户信息
                      wx.switchTab({
                        url: '../index/index',                           //成功后跳转至小程序首页开始体验
                      })
                      // 因为 getUserInfo 是网络请求，可能会在 Page.onLoad 以后才返回
                      // 因此此处加入 callback 以防止这种状况
                      if (this.userInfoReadyCallback) {
                        this.userInfoReadyCallback(res)
                      }
                    }
                  })
                } else {
                   // 未经受权，弹框确认后调用 getUserInfo
                }
              }
            })
          }else{
            wx.showToast({           //提示错误信息
                title: res.data.message,
                icon:'none'
            })  
          }
        }).catch((errMsg) => {
            wx.showToast({           //提示错误信息
                title: errMsg.data.message,
                icon:'none'
            })
        });
      }
    })
  },
复制代码

其实到这里app.js里的操做就基本完成了，还须要作的就是在app.json pages里配置login页为默认首页，呐就这样放在放第一位session

而后在logs页面设计个高大上体的宣传照，再加一个登陆按钮就好了app

判断本地登陆态，是则跳转首页index 否则无需操做，等用户点击按钮
点击登陆按钮，调用app.userLogin()方法去走受权登陆流程

欢迎各路大神交流，指导，纠错，互相学习进步 xss