js全局变量和局部变量名称一样_微信小程序的全局变量、页面变量，你真的掌握了？...
开发微信小程序时，遇到的坑挺多的，别的不说，单是变量的应用，就够你折腾一阵子的了，可能，或许是我不熟悉的缘故吧?
1
如果你认为你很熟悉的话，那你猜一下，下面的变量—userInfo，是属于全局变量，还是页面变量?
var userInfo= {
name: '小明',
age: 18
}
Page({
onReady: function() {
console.log(userInfo.name)
}
})
官网介绍时，说:在app.js里的是全局变量,在Page里的是页面(局部变量)。那在Page上的呢?—一开始我认为应该属于局部变量，可使用之后，发现这样使用，会存在一些Bug，有时会出现内容不清空的情况。奇怪的是，开发工具不提醒这种用法是不推荐的，从这些坑坑洼洼来说，微信小程序还是有一定难度的，呵呵~~
2
经过一段多次测试，一切按官网出现过的方式进行吧。如果还存在问题，就去社区找茬去。经调整如下，就不会出现数据不清空的现象了。因为这样是属于Page声明周期的变量，记得在通过this调用哦。
Page({
userInfo: {
name: '小明',
age: 18
},
onReady: function() {
console.log(this.userInfo.name)
}
})
有人就会问了，为什么不用data的方式的，因为有些数据是不属于同步到页面wxml上显示的，只是数据做一下过度而已。
如果js上的数据要同步到页面上,记得用setData的方式，否则又会踩坑了。
3
说完Page上的变量，现在说一下全局变量，第一种，就是常规的，在app.js中声明的这种，它比较适合在两个界面之间的传值方式。当然，如果你非得用缓存也是可以的，只是用全局变量会更简单一些。温馨提醒:在取完全局变量的值之后，记得把它还原为初始值。
app.js
App({
userInfo: null
})
index.js(为了让你看的更明白，我把全局放在一个页面上演示了。)
const app = getApp()
Page({
onReady: function() {
app.userInfo = {
name: '小明',
age: 18
}
console.log(app.userInfo.name)
app.userInfo = null
}
})
4
上面说到两个页面之间传值时，可采用全局或缓存的方式。可如果是整个app，大部分的页面都要用到全局变量时，如果还是用getApp()或缓存方式的话，那挺尴尬的。这里说一下，官网没提到的方式—变量挂载。
Page({
onReady: function() {
wx.userInfo = {
name: '小明',
age: 18
}
console.log(wx.userInfo.name)
}
})
没错，就是把变量挂载到wx中。这样在所有页面就可以通过wx.userInfo的方式获取了。
好了，今天就说到这里了，我发的文章大多是项目开发过程中的记录，但愿对你有所帮助。
js全局变量和局部变量名称一样_微信小程序的全局变量、页面变量，你真的掌握了？...相关推荐
- 注册登录页面代码用js判断是否填入信息_微信小程序快速开发：从注册账号到小程序上架
写在前面 自从微信小程序功能发布后,我就一直关注着小程序的动向,然而限于学业繁忙,总是没有太多的时间去学习.大二逐渐学习了Vuejs,被其简洁的设计所吸引,后来看了看小程序的开发文档,发现这么的相似? ...
- 小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
- android开发小项目实例_微信小程序开发的实例教程
一.注册小程序帐户 1.进入微信公众平台,注册一个小程序帐号,并根据提示填写相应的信息. 2.成功注册后,进入主页,然后在小程序发布过程->小程序开发和管理->配置服务器中单击" ...
- 微信小程序 java 传值_微信小程序传值获取值的实例方法
微信小程序传值以及获取值方法的详解 微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法, 1.设置id的方法标识跳转后传递的参数值: 2.通过使用data - xxxx 的方法来标识要 ...
- 微信小程序页面栈_微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递 例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: 点此进入 detail detail页面取值: onLoa ...
- 黑马优购_微信小程序
黑马优购_微信小程序项目 介绍 2021年5月6日-2021年5月12日在校参加微信小程序培训,由黑马讲师授课,能够利用微信提供的组件和API实现轮播图.授权用户信息.上拉加载更多等功能,由于之前对u ...
- 微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
前言 最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...
- 小程序接入h5页面_微信小程序跳转外部链接（h5页面）以及数据交互
最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面. 1.跳转外部链接(官方文档) 1)入口 //跳转到入口 wx.navigateTo({url: '.. ...
- 微信 小程序 python 商城_微信小程序——商城篇
前言 随着wepy和mpvue的出现及流行,开发小程序变的越来越便捷和强大,作为基佬社区的一份子,我们都需要把自己遇到的问题以及如何解决的方式相互分享,这样才能帮助到更多的朋(ji)友(lao).如有 ...
最新文章
- Altium Designer -- PCB布局与布线
- 中国深圳，600架无人机的盛典！
- hazelcast集群配置_使用HazelCast进行Hibernate缓存：基本配置
- MS SQL-Server快捷键
- html按钮绑定点击事件无效,jquery添加的html元素按钮为何不执行类样式绑定的click事件...
- 淘云互动机器人_淘云互动APP下载安装_淘云互动app机器人下载安卓官网v2.21.9-麦块安卓网...
- 想成为一个怎样的人？
- PDF文件转base64显示
- SQL注入语句（详细）
- matlab绘制均匀b样条曲线_[转载]用matlab实现B样条曲线
- swfobject.js 简介
- 产品经理认证（NPDP）---新产品流程
- three.js点光源PointLight使用，调整点光源颜色、位置、强度、距离、可见性(vue中使用three.js08)
- c语言编程:实现数字的翻转
- 5G China unicom 一般性异常处理
- 第三章 java集合
- C语言学会数组就可以做五子棋 - 快来试试吧（包含源码）
- Python分析照片详细拍摄地点源代码（可详细到具体酒店）
- 计算机大数据的前景方向_未来计算机大数据的发展方向
- 去哪找到高薪工作怎么找