小程序app.js小結

小程序app.js

app.js

import {
  ApiUrl
} from 'utils/apiurl.js';
import {
  httpReq
} from 'utils/http.js';
/*以上兩個文件為封裝的請求數據的接口，文件內容我會放在最后，不用這倆文件的可以安裝wx.request（微信開發文檔提供方法來請求），這兩個文件也是在原方法上做了改動但效果一樣的,
*/
App({
  onLaunch: function () {
    var logs = wx.getStorageSync('logs') || []//
    logs.unshift(Date.now())
    /*unshift() 方法將把它的參數插入 arrayObject 的頭部，並將已經存在的元素順次地移到較高的下標處，以便留出空間。該方法的第一個參數將成為數組的新元素 0，如果還有第二個參數，它將成為新的元素 1，以此類推。
    */
    wx.setStorageSync('logs', logs)// 根據時間存儲log
     
    // 登錄
    wx.login({
      success: res => {
        /* 發送 res.code 到后台換取 token,openId, sessionKey, unionId(都可以獲取，和后端商議選擇其中需要的獲取並使用)
        */
        if(res.code) {
          //發起網絡請求
          httpReq({
            header: {
              //此處為示例header內容，寫自己項目的即可
              'Content-Type': 'application/json',
              'Accept': 'application/json'
            },
            method: 'GET',
            /* url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxf7a9fda47682a9a6&secret=cc74bba5adfa5e077038c5cb8baca13c&js_code='+ res.code+'&grant_type=authorization_code'
            */
            url: ApiUrl.phplist + 'index/gettoken?code=' + res.code,
            /*上面第一個url為前端直接繞過后端去微信請求拿到openid和session_key,主要是當時拿不到數據和后端爭論故自己直接拿證明自己前端沒有錯，你們還是正常用下面的后端請求到的就可以了。
            */
          }).then((res) =>{
            wx.setStorageSync(res.data.lists.token)
            /*此處后端要求我們拿token在其他頁面使用說是為了安全，他的意思是說我剛剛自己繞過他去微信那邊直接拿了openid和session_key不安全，我？？？？？，只能現在按他的做了，其他頁面需要openid時再傳給他token換取。
            */
          })
        } else {
          console.log('登錄失敗' + res.errMsg)
        }
      }
    })

    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
          wx.getUserInfo({
            success: res => {
              this.globalData.userInfo = res.userInfo

              /*此處是可以直接獲取到你微信個人賬號信息的，就是圖像，昵稱，性別，省份，城市等之類的，如果是電話，具體地址等私密信息是要額外授權才能獲取的，由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回.
              所以此處加入 callback 以防止這種情況*/
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            },
            fail: function(res) {}
          })
        } else {
          wx.showModal({
            title: '警告通知',
            content: '您點擊了拒絕授權,將無法正常顯示個人信息,在設置中確定重新獲取授權。',
          })
        }
      },
      fail: function(res) {}
    })
  },
  globalData: {
    userInfo: null,
  }
})

 

apiurl.js

let ApiUrl = {};
// php列表
ApiUrl.phplist = 'http://www.ylb.com/api/';

// 詳細信息
ApiUrl.detail = ApiUrl.phplist+'/';

export {ApiUrl};

 

http.js

function httpReq(params = {}){
  let url = params.url || 'http://www.ylb.com';
  let data = params.data || '';
  let header = params.header || {};
  let method = params.method || 'GET';

  // 使用Promise來解決異步問題
  return new Promise((resolve, reject) => {
    // 發起網絡請求
    wx.request({
      url,
      data,
      header,
      method,

      // 成功
      success: resolve,

      // 失敗
      fail: reject
    })
  })
}
// 導出模塊
export {httpReq};

 

以上僅為小女子做項目時的一些理解與記錄，初次接觸小程序，僅供大家參考，歡迎各位大佬指正，代碼各種問題都可以留言聯系我，你主動，我們才有故事。