微信小程序,全局变量方法的使用
方法一: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
微信小程序,全局变量方法的使用的更多相关文章
- 微信小程序 全局变量
微信小程序里面有个app.js,我们可以在这个里面设置全局变量, App({ globalData:{ url:"http://xxx.xxx.xx:3000" } }) 在外面就 ...
- 微信小程序ES6方法Promise封装接口
为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接 ...
- 微信小程序全局变量改变监听
问题来源 最近工作需要写小程序页面,其中有个页面情况为:父页面中包含了一个组件页面,组件页面中又包含了另外一个组件页面.需求为:点击最后一个组件页面中的一个view,需要显示最外层父页面中的一个弹出层 ...
- 微信小程序支付、小程序支付功能、小程序支付方法、微信小程序支付方法
相信大家在做小程序的时候不可避免的会碰到支付功能小程序的支付和pc的是有区别的小程序的支付方法为 wx.requestPayment wx.requestPayment({ timeStamp: '' ...
- 微信小程序setData()方法的详解以及对数组/json操作
此篇文章是本人对setData方法的一些理解,是查阅文档和查找一些其他资料综述的,有所不足希望指正! 直接进入正题! 一.setData()方法: 1.参数接受一个对象,以key,value的形式表示 ...
- 微信小程序-setData()方法
一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息 注意: 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致 ...
- 微信小程序全局变量的设置、使用、修改
1. 全局变量的设置 在miniprogram > app.js 文件中设置,globalData对象就是存储全局变量的. App({ globalData: { hasLogin: false ...
- 微信小程序公共方法创建与调用
在根节点建个 utils 文件夹,在文件夹下建立 util.js 在util.js里面写入 var util = {}; util.getUserId= function(e, t) { ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 微信小程序——获取openid
1.在微信小程序后台得到appid.AppSecret 2.在任意小程序界面的[onLoad]中取得code(建议将代码写在index.js中) 3.用取得code换取openid 如后台无法将ope ...
随机推荐
- GitLab服务器IP地址修改
gitlab安装介绍:https://about.gitlab.com/downloads/#centos7 刚搭建好的gitlab在GitLab上新建一个项目test_gitlab,刚开始仓库地址是 ...
- javascript总结38: 神奇的this
1 this的特性 this 是在函数中的 this 的指向 是在函数调用的时候决定的 this的指向. 谁调用这个函数,函数中的this就指向谁 function fn (){ console.lo ...
- 【更新】用word文档来发布到csdn等博客上边免去一张张上传图片的烦恼
目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...
- 使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 | Publishing and Calling WMTS, Vector Tile Service Using GeoServer + OpenLayers
Web GIS系列: 1.搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 2.使用GeoServer+QGIS发布WMTS服务 3.使 ...
- 编写高质量代码改善C#程序的157个建议——建议74:警惕线程的IsBackground
建议74:警惕线程的IsBackground 在CLR中,线程分为前台线程和后台线程,即每个线程都有一个IsBackground属性.两者在表现形式上的唯一区别是:如果前台线程不退出,应用程序的进程就 ...
- 解决jeesite开发java.lang.String cannot be cast to com.thinkgem.jeesite.modules.sys.security.SystemAuthorizingRealm$Principal问题
解决jeesite问题java.lang.String cannot be cast to SystemAuthorizingRealm问题 这些天在jeesite项目上进行二次开发,遇到许多莫名其妙 ...
- 阿里云ECS云服务器编译安装PHP遇到virtual memory exhausted: Cannot allocate memory
阿里云编译安装php时遇到virtual memory exhausted: Cannot allocate memory 买了个服务器, 1G 的内存阿里云服务器,编译东西按说应该够了,安装相关的内 ...
- Android-自动完成提示框CompletionTextView
自动完成提示框CompletionTextView可以实现以下效果(提示框从那里出来是系统自动处理的): 类似于在百度输入框,输入一个字符,会自动提示很多和这个相关的条目内容 定义自动完成提示框(此控 ...
- C#基础入门 三
C#基础入门 三 类 类使用class关键字进行声明,前面加一个访问修饰符,public class car{} 访问修饰符:修师傅可以用来修饰类和类成员等,控制它们的可见度 修饰符关键字分别为:pu ...
- [Erlang13]怎么把一个普通的进程挂入Supervisor监控树?
简单来说:应该是在调用的start_link返回一个{ok,Pid}就可以把这个进程放入监控树Supervisor里面: -module(worker). -author("zhongwen ...