vue 移动端 验证不同设备工具类封装和使用

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

今儿项目版本更新上线了，抽点空记录下最近遇到的一些技术功能。首先我们开发移动端，经常会有需求是某些模块功能在 ios端 安卓以及微信端下各展示不同，那么这就需要用到封装一个方法来调用了。下面的代码大可在文件中创建个工具类的文件夹，拷贝放进去使用。废话不多说，直接上代码：
第一步：首先在项目中创建个文件夹，里面创建个自定义js文件，将这块代码拷贝进去

//验证工具封装  ----- 如果需要直接拿去用
export let method = {
        /**
   * 是否是安卓设备
   * @returns {boolean}
   */
        verifyAndroid: function() {
                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                if (isAndroid) {
                        return true;
                } else {
                        return false;
                }
        },
        /**
   *是否是ios设备
   * @returns {boolean}
   */
        verifyIos: function() {
                var u = navigator.userAgent;
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (isiOS) {
                        return true;
                } else {
                        return false;
                }
        },
        /**
   * 是否是微信内部浏览器
   * @returns {boolean}
   */
        isWeiXin: function() {
                var ua = navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == "micromessenger" || ua.match(/WeiBo/i) == "weibo") {
                        return true;
                } else if (ua.indexOf('mobile mqqbrowser') > -1) {
                        return true;
                } else if (ua.indexOf('iphone') > -1 || ua.indexOf('mac') > -1) {
                        if (ua.indexOf('qq') > -1) {
                                return true;
                        }
                }
                return false;
        }
}

第二步：引入 --->在需要跟原生交互的页面 引入封装好的工具类 文件 这是最重要的别忘了

  • import {method} from '../../router/numberUtil.js';

第三步：下面就是使用方式了 

shareData(title,content){ //这里是我页面的一个分享功能，分享事件
  let shareUrl = 'https://api.guanggaoxia.cn/api/Home/protocol#/redPacket/friendHelpActivity/'+this.uid+'/'+this.envelopeId
//下面这些才是重点
  if(method.verifyAndroid()){//判断是否是安卓设备
//ggxShareUrl--> 这个是安卓定义的方法名，调用安卓的这个方法执行操作，括号里是要传递的参数
      window.ggxRedPacket.ggxShareUrl(shareUrl,title,content);
  } else if(method.verifyIos()){ //判断是否是 ios 设备
   //ggxShareUrl --> 这是ios定义的方法名，
其他的都是固定的定义好的，只要跟ios交互需要调用他们的方法就只需要替换中间的那个方法即可，后面括号里传上你要传的参数，其他的不动照搬
// ({'url':shareUrl,"title":title,"text":content}) 这些是我们前端调移动端的方法需要传递的参数
      window.webkit.messageHandlers.ggxShareUrl.postMessage({'url':shareUrl,"title":title,"text":content});
  } else if(method.isWeiXin()){ //判断是是否是小程序
   // 这里是如果是小程序环境下要做的操作
    Toast({
      message: '请点击右上角转发分享',
      position: 'bottom',
      duration: 5000
    });
     this.isZhanwei = false; // 控制小程序端隐藏
  }
},

注意⚠️ 跟原生交互，上面那只是我们掉原生的方法给原生传递参数，当然有时候我们也是需要原生传递参数给我们，那这时候就产生了回调，什么叫做回调那，首先我们某些功能是需要调原生的方法，完了后我们同时需要些参数是原生传给我们的，那就是我们在我们的页面自定义一个方法名，将定义的方法名报漏给Window 然后将方法名发送给原生，这时候他们就会调我们的方法将我们需要的参数传递过来，而我们这边就需要定义个形参接受即可。下面是详细步骤，还是不理解的可以看下面的图二：

data() {
    return {
        uid :"",
        token:"",
}


第二步：将方法报漏给Window 供原生调用

created(){
//将方法暴漏给window 原生才能调用 window .setUserInfo = this.setUserInfo; // 登录成功或取用户信息
  this.getUserInfo(); //页面一进来就获取用户uid token
},
第一步：自定义方法名
methods:{
//自定义方法名 供给原生调用，获取他们传递的值 注意的是定义好的方法名一定要记得在created或者mounted的钩子函数中报漏出去 将这个方法名发给原生，让原生调
//登录成功后移动端主动传入的用户信息
setUserInfo(userInfo){//这里定义形参接受
     this.userInfo = JSON.parse(userInfo); //解析
     this.uid = userInfo.id;//赋值
     this.token = userInfo.token;//赋值
},
下面这是主动获取原生传递的参数方法，根据自己需求选择需要的方式
//进入页面主动获取uid  token  
getUserInfo(){ //这是我自己获取用户信息的方法 通过这个方法调原生的方法
  let userInfo = {};  //因安卓返回的是一个对象，先定义一下
  if(method.verifyAndroid()){
     //调用安卓的方法安卓会在这个方法中返回参数，所以前面用定义的对象变量直接接受就行，接受后这个userInfo就有值了
    userInfo = JSON.parse(window.webDiscovery.getUserInfo()); //解析对象
    this.uid = userInfo.id; //将接受到的值取出需要用的uid赋值给我们data里定义的变量
    this.token = userInfo.token;//将接受到的值取出需要用的token赋值给我们data里定义的变量
  }
  // else if(method.verifyIos()){ //TODO 这里ios因为我当时没有用到交互所以注释的，忽略即可
  //   // window.webkit.messageHandlers.Admin/image.postMessage(null);
  // }
},
}

// 好啦，上面就是一个vue移动端和原生交互的一些基本知识，从封装验证设备到使用，基本就这些了。如果大家需要就可以直接把代码拷到自己的项目中，封装的那个自己建个文件夹放起来就行，记得在使用的地方引入，使用的时候每个关键的地方都清楚的表明了，不理解的可以看图，如果需要就将代码拿过去按图中的标注进行一步步更换成你自己的方法名字即可，其他的都直接拿去用吧。如果觉得我分享的内容对你有帮助记得点关注互相学习进步哦～谢谢您能耐心的看完我这么啰嗦的一大片内容。

////////////////////////////////////////下面是小案例截图标注下有看不明白的就看图///////////////////////////////

看完了么？明白么？不明白的私信给我，看到会及时回复！大家一起学习进步～

以上是 vue 移动端 验证不同设备工具类封装和使用 的全部内容， 来源链接： utcz.com/z/374631.html

回到顶部