小程序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'
            })
        });
      }
    })
  },
複製代碼