微信小程序,全局变量方法的使用

方法一:app.js 内设置全局变量(如屏宽,屏高的设置)

1、app.js文件,定义全局变量

/定义全局变量
globalData:{
    userInfo:null,
    sysInfo:null,
    windowW:null,
    windowH:null
}

  设置全局变量

//举例获取手机信息
getSys:function() {
    var that = this;
    //  这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
    wx.getSystemInfo({
    success: function(res) {
    //设置变量值
      that.globalData.sysInfo=res;
      that.globalData.windowW=res.windowWidth;
      that.globalData.windowH=res.windowHeight;
    }
    })
}

  最后的app.js文件

//app.js
App({
//全局变量
  globalData:{
    userInfo:null,
    sysInfo:null,
    windowW:null,
    windowH:null
  },
  //启动
  onLaunch: function () {
    // 获取用户信息
   this.getUserInfo();
   this.getSys();
  },
  //获取用户信息
 getUserInfo:function(cb){
    var that = this
    wx.login({
      success: function () {
        wx.getUserInfo({
          success: function (res) {
            that.globalData.userInfo = res.userInfo
            console.log(res.userInfo);
            typeof cb == "function" && cb(that.globalData.userInfo)
          }
        })
      }
    })
  },
  //获取手机信息
  getSys:function() {
    var that = this;
    //  这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
    wx.getSystemInfo({
    success: function(res) {
      console.log(res.model)
      console.log(res.pixelRatio)
      console.log(res.windowWidth)
      console.log(res.windowHeight)
      console.log(res.language)
      console.log(res.version)
      console.log(res.platform)
//设置变量值
      that.globalData.sysInfo=res;
      that.globalData.windowW=res.windowWidth;
      that.globalData.windowH=res.windowHeight;
    }
    })
  }
  
})

  使用app全局变量

//获取app变量
var app = getApp()
Page({
  data: {
     barItems:[
       {id:0,title:"订单",enable:true,icon:'../../images/1.png'},
       {id:1,title:"退房",enable:false,icon:'../../images/2.png'},
       {id:2,title:"续住",enable:false,icon:'../../images/3.png'}
       ],
       hasLive:true,
  },
  onLoad:function(){
     var that = this;
    // 取值全局变量
    var sysInfo = app.globalData.sysInfo;
     console.log(app.globalData);
     that.setData({
          windowH:sysInfo.windowHeight-44,
          windoww:sysInfo.windowWidth
      });
 }
})

  

方法二:全局js设置常用值

全局js文件(data.js)

//对外提供接口  需要暴露在外面才能调用
module.exports = {
    getUserKey : getUserKey,//保存登录的用户信息
    getOpenPwKey : getOpenPwKey,//保存开门的钥匙
    getUrl:getUrl,//host接口
}

//接口URL==============
function getUrl(){
    return "http://localhost/userapp";
}

//本地保存数据的key==============
//保存登录的用户信息
function getUserKey(){
    return "xxx";
}
//保存开门的钥匙
function getOpenPwKey() {
    return "xxx";
}

  全局js使用方法

//获得全局js变量
var Data = require('../../../utils/data.js');
//调用js文件方法
 Data.getUrl()+'/user/loginCommon',
 Data.getUserKey(),//"userInfo",

  data.js文件使用文件js

var app = getApp();
//获得全局js变量
var Data = require('../../../utils/data.js');

Page( {
  data: {
   
  },

  changeInputUser: function(e) {
    var value = e.detail.value;
    // console.log(value);
    this.setData({
      userName : value,
    })
  },

  changeInputPw: function(e) {
    var value = e.detail.value;
    // console.log(value);
    this.setData({
      password : value,
    })
  },

  loginAction: function (event) {
    console.log("dsadsad");
    var pw = this.data.password;
    var user = this.data.userName;
      console.log(user);
      console.log(pw);
     wx.showLoading({
        title: '加载中',
        mask: true
      });
      wx.request({
            url: Data.getUrl()+'/user/loginCommon',
            method: 'POST',
            data: {
              phone:user,
              password:pw
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded'
                // 'Accept': 'application/x-www-form-urlencoded'
            },
            complete: function(res) {
                wx.hideLoading();
            },
            success: function(res) {
              
              console.log(res);
              wx.hideLoading();
              if(res.data.status==500){
                wx.setStorage({
                  key:Data.getUserKey(),//"userInfo",
                  data:res.data.data
                })
                wx.showToast({
                  title: '请求成功',
                  icon: 'success',
                  mask: true,
                });
                wx.navigateBack({
                  delta: 1
                })
              }else {
                wx.showToast({
                  title: res.data.data,
                  icon: 'error',
                  mask: true,
                });
              }
              
      
            }
        })
  },
})

  

来源: https://www.jianshu.com/p/e3de2c605506

posted @ 2018-11-23 16:22  南侠书生  阅读(14894)  评论(0编辑  收藏  举报