使用mpvue开发小程序设置全局变量并适配iphoneX

1、设置全局变量：

我们创建好mpvue项目之后，找到src/main.js打开在const app = new Vue(App) 之前添加后面添加一行代码:

Vue.prototype.globalData = getApp().globalData

这行代码的意思就是，将小程序的全局变量，挂载在Vue的原型上，这样我们在不同的页面就都可以获取到全局数据了

不同页面使用 this.globalData获取或者添加修改既可

比方说我需要存储用户一些基本信息可以这样

this.globalData.userInfo = {name:aaa}

不同页面获取方式一样

console.log(this.globalData.userInfo.name)

修改

this.globalData.userInfo.name = 'bbb'
 

踩坑注意：在小程序启动的时候，不同页面中vue周期函数created中的代码都会执行一遍。所以vue中created周期函数中尽量不要请求太多接口。而是放在小程序的周期函数onLoad中。

2、适配iphoneX:

微信小程序在适配iphone x 的时候 底部的横线会出现遮挡这时候就要处理下,一般适用fixed定位，固定底部的元素。

在需要引用的页面js文件中onload方法里获取全局变量

let isIphoneX = app.globalData.isIphoneX;

this.isIphoneX: isIphoneX

在 页面文件中 进行css的逻辑判断

<div :class="{isIphoneX-class': isIphoneX} "> </div>

css自己加个向下的距离，或者定位看个人需求就可以

.isIphoneX-class{

position:fixed

bottom: 34px

}