Vue与原生（Android或IOS）交互

Vue

js调用原生（Android或IOS）方法的封装

• utils-dispatchApp.js

/**
 * @params {*} Obj  传给原生（Android或IOS）的参数
 * @fn "*" string  与原生（Android或IOS）约定好的方法名
 */
export function dispatchAppFn({fn,params} = {}) {
  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  if (isAndroid) {
    let androidParams = ''
    for(let key in params){
      androidParams+=`"${params[key]}",`;
    }
    if(androidParams.length){
      let params = androidParams.substring(0,androidParams.length-1);
      eval(`window.android[fn](${params})`);
    }else {
      window.android[fn]();
    }
  } else if (isiOS) {
    window.webkit.messageHandlers[fn].postMessage(params);
  }
}

获取token并判断是否跳到登录页面

当一个app的登录功能由原生开发完成，其余功能由vue开发完成时，我们需要从原生获取token值用来在进入页面之前根据token值是否为空来判断是否需要跳转到登录页面。

• router-index.js

import Vue from 'vue';
import Router from 'vue-router';
import { dispatchAppFn } from '@/utils/dispatchApp'; 

import home from './home';

Vue.use(Router);

const RouterModel = new Router({
  routes: [...home]
});

const RouterCallback=(to,from,next)=>{
  if (!store.state.token&&to.meta.login) {
    dispatchAppFn({fn:"jumpLogin"});
    return;
  }
  next();
}

RouterModel.beforeEach((to, from, next) => {
  if(from.name==null){
    window.sdk.setAuthorization=(authorization)=>{
      store.commit("setToken",authorization);
      RouterCallback(to, from, next);
    }
    dispatchAppFn({fn:"getTokenFromApp"});
  }else{
    RouterCallback(to, from, next);
  }
});

export default RouterModel;