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


方法一: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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM