小程序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};

以上仅为小女子做项目时的一些理解与记录，初次接触小程序，仅供大家参考，欢迎各位大佬指正，代码各种问题都可以留言联系我，你主动，我们才有故事。