美文网首页微信小程序开发专题小程序
微信小程序全局常量,全局js文件使用

微信小程序全局常量,全局js文件使用

作者: huangxiongbiao | 来源:发表于2017-04-19 17:59 被阅读12366次

方法一: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/opendoor/icon_zz_ds.png'},
       {id:1,title:"退房",enable:false,icon:'../../images/opendoor/icon_zz_tf.png'},
       {id:2,title:"续住",enable:false,icon:'../../images/opendoor/icon_zz_xz.png'},
       {id:3,title:"用餐",enable:false,icon:'../../images/opendoor/icon_zz_yc.png'},
      //  {id:4,title:"用餐",enable:false,icon:'../../images/opendoor/icon_zz_yc.png'},
      //  {id:5,title:"用餐",enable:false,icon:'../../images/opendoor/icon_zz_yc.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
      });
 },
 managerAction:function() {

 }
})

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

全局js文件(data.js)

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

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

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

全局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,
                });
              }
              
      
            }
        })
  },
})

相关文章

  • 微信小程序全局常量,全局js文件使用

    方法一:app.js 内设置全局变量(如屏宽,屏高的设置) 1、app.js文件 定义全局变量 设置全局变量 a...

  • 微信小程序

    微信小程序 基础技术设备 开发者工具的使用 框架全局文件 App.js小程序逻辑App.js文件用来定义全局数据和...

  • 小程序基础概念

    文档地址 微信基础概念 App 小程序全局文件 app.js) 小程序逻辑,注册小程序 app.json 小程序全...

  • Taro global

    微信小程序 大家可以在 app.js > globalData 内定义全局使用变量,可Taro不行,需要我们使用 ...

  • 微信小程序开发|全局配置和页面配置

    全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。 https://develope...

  • uniapp实现全局变量

    1.引入外部js文件引入全局常量-组件引用全局变量 2.main.js入口文件挂载全局变量-this引用全局变量m...

  • angular 设计

    app.js 文件说明:入口文件 声明模块依赖 声明全局常量、变量 全局方法,退出登录 全局变量,用户信息 全局常...

  • tabBar组件

    一. 全局配置 我们可以通过对项目根目录下的app.json文件实现对微信小程序的全局配置,该文件的内容是一个Js...

  • 微信小程序的代码架构组织(1)- 配置文件

    全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置...

  • 小程序配置

    全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置...

网友评论

    本文标题:微信小程序全局常量,全局js文件使用

    本文链接:https://www.haomeiwen.com/subject/abehzttx.html