最近用vue做了一个网站,网站里有分享,支付等功能。因为需要在app中调用这个网站,但跟同事沟通知道APP是用apicloud做的,支付分享等这些功能都需要使用APP的接口去做。所以牵涉到在vue页面中使用apicloud去做功能。
一、判断是否是APP
网站原先的逻辑不变,只需要在APP的情况下去请求APP接口写一套逻辑。这就需要判断网站当前环境是否是APP。
最先使用的是vue的页面中,在mounted函数里写了这样一段代码:
然后在methods中写了一个函数
想着在APP的环境下改变变量isapp(isapp初始值为null)的值,在需要用的时候判断变量值可以执行针对APP的逻辑代码。但事实不是这样,isapp的值未改变,因为根本没有注入apiready,_this,isapp = 'app'这句代码不会运行。之后经过度娘的帮助,才知道要写成这样:
var _this = this;
mounted(){
window.apiready = function(){
_this.isapp = 'app';
}
}
apiready前要加window。
我之前没有用过apicloud,问同事后说apicloud在页面初始化时会注入一个apiready对象,vue也是一个实例化对象,这两者可能是同级别的,之前的写法可能是把apiready当成是vue下的对象了,所以不成功。(我们2个一个对vue不熟悉,一个对apicloud不熟悉,只是根据自己的理解这样猜测的,不一定正确哈)。
二、如何在所有vue组件使用apiready
按第一步的方法是成功注入apiready了,可以判断是APP的环境了,但我刚开始是在app.vue的页面中使用没有问题,但在其他组件页面按照window.apiready使用发现都不起作用。也是问过同事后得知apiready只在页面中执行一次,vue是单页面应用,app.vue是入口文件,各个组件页面编译后实际上只存在一个html页面。所以只要app.vue里的apiready成功了。
了解这个,就要想办法把在执行apiready后改变的变量传入其他组件,让其他组件都能使用。vue里可以设置全局变量,代码如下:
在main.js文件中加入这段代码
//注入apiready,设置Vue全局变量isapp
window.apiready = function() {
Vue.prototype.isapp = 'app';
}
这样vue的全局变量isapp就设置成功了,可以在其他组件页面使用。获取此变量时直接this.isapp就行。