vue编写H5，获取app返回的信息

文章目录

• 前言
• 一、获取app登录后的信息
• 二、获取app登录后的信息步骤
• 总结

---

前言

由于原生的app开发起来周期较长，而且安卓与ios又有些差异，因此，便开始使用H5进行开发app，但是H5不可以直接安装在手机上，所以这个时候就可以app的外壳嵌套H5的页面，这样只需要两个app的壳子，一个H5的页面，就可以同时满足安卓和ios。这样操作的方式，加快了开发周期，开发成本小。

---

一、获取app登录后的信息

既然使用app的盒子，那么H5就要跟app有些交互操作，但是交互很少，我这里讲的是我遇到的问题，app的登录界面，登陆成功之后，H5要获取登录后接口返回的数据（当然，也可以在H5中写登录，但是有一个缺点就是记住密码，因为app一旦关闭，密码便会被清空，这时候只能使用localStorage去保存密码，确保不被删除；当然也许有更好的方式，但是我没有想到）。

---

二、获取app登录后的信息步骤

1.原生app的代码

代码如下：

//刚进入界面
  beforeRouteEnter(to, from, next) {
    next(vm => {
      try {
      //  判断是苹果还是安卓,true代表苹果 false代表安卓，主要是安卓和ios的接收方式不同
        if (全局type) {
        //这句话我也不是很清楚，但是这个里面有讲解https://www.jianshu.com/p/c35b12ffc0f1；xxx是自定义的方法，app那边
          window.webkit.messageHandlers.xxx.postMessage('0');
        } else {
        // 这是安卓
          xxx.xxx('0');
        }
      } catch (e) {
      
      }
      ;
    });
  },
  // 离开界面时候调用
  beforeRouteLeave(to, from, next) {
    try {
      if (全局type) {
        window.webkit.messageHandlers.xxx.postMessage('1');
      } else {
        xxx.xxx('1');
      }
    } catch (e) {
    
    }
    ;
    next();
  },

2.获取基础数据

代码如下：

    getBaseMessage() {
      let self = this;
      // 获取跳转之后url上的连接
      let paramUrl = location.href;
	// 对url进行处理，抽取出来自己需要的信息，如token等
      let paramStr = paramUrl.split("?");
      let loginStr = [];
      loginStr = paramStr[paramStr.length - 1].split('&');
      loginStr.forEach(item => {
        let loginItem = item.split('=');
        self.urlData[loginItem[0]] = loginItem[loginItem.length - 1];
      });
      // 获取地址中的token
      if (self.urlData.token) {
        全局token = self.urlData.token;
        // 判断app的系统 apple Android
        if (self.urlData.type == '1') {
          全局type = true;
        } else if (self.urlData.type == '0') {
          全局type = false;
        } else {
          如果判断不出系统类型，全都退出
        }
        
        //  下面就可以在调用一下获取用户信息的接口啦，因为登陆的token已经获取到啦，调用接口都会在默认登陆之后
        
      }
    },

---

总结

我也是第一次遇到H5和app的交互，所以记录一下。简单说一句，上传照片的时候使用element-ui中的el-upload，将他的accept属性设为image/*就可以直接调用原生的相机/相册啦

本文地址：https://blog.csdn.net/xixi_csdn/article/details/110047247