精华内容
下载资源
问答
  • js+vue手机app租房

    2018-10-03 17:45:36
    JavaScript,vue框架,手机App项目
  • 主要为大家详细介绍了vue2手机APP项目添加开屏广告或者闪屏广告的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue阅读App

    2019-02-25 22:02:03
    最近学习Vue.js,想写个项目练练手,借助每日一文API的帮助,仿照观止开发了一个阅读App 项目功能 获取每日一文每天推荐文章、随机文章、前后一天文章 收藏文章 阅读设置(颜色、字体、夜间模式) 注:由于API支持...

    项目背景

    最近学习Vue.js,想写个项目练练手,借助每日一文API的帮助,仿照观止开发了一个阅读App

    项目功能

    • 获取每日一文每天推荐文章、随机文章、前后一天文章
    • 收藏文章
    • 阅读设置(颜色、字体、夜间模式)

    注:由于API支持不足,暂不支持文章分享功能

    阅览地址

    点我预览

    注:有时由于每日一文服务器的原因,App数据请求可能失败,可换个时间重试;请尽量用手机端访问,或打开浏览器调试模式,选择手机视图进行预览

    项目截图

    图1 文章上部分
    图2 文章下部分
    图3 右侧栏
    图4 文章分享
    图5 左侧栏
    图6 阅读设置
    图7 夜间模式
    图8 我的收藏

    项目地址

    daily-read,欢迎star

    展开全文
  • // BBBB.vue mounted(){ // 如果支持 popstate 一般移动端都支持了 if (window.history && window.history.pushState) { // 往历史记录里面添加一条新的当前页面的url history.pushState(null, null, ...
    // BBBB.vue
    mounted(){
      // 如果支持 popstate 一般移动端都支持了
      if (window.history && window.history.pushState) {
        // 往历史记录里面添加一条新的当前页面的url
        history.pushState(null, null, document.URL);
        // 给 popstate 绑定一个方法 监听页面刷新
        window.addEventListener('popstate', this.backChange, false);//false阻止默认事件
      }
    },
    
    
    // BBBB.vue
    destroyed(){
      window.removeEventListener('popstate', this.backChange, false);//false阻止默认事件
    },
    
    
    methods:{
    // BBBB.vue
      backChange() {
          const that = this;
          console.log("监听到了");
    }
    
    
    展开全文
  • H5 引用vue 打开app(如何该手机内有某个app则直接打开app,如果没有则跳转app下载页面) **ps: 一定一定一定一定先向 ios要 ( ios下载地址 和 ios对应的app协议 ),找安卓要( android下载地址 和 andriod对应的...

    H5 引用vue 打开app(如何该手机内有某个app则直接打开app,如果没有则跳转app下载页面)

    **ps: 一定一定一定一定先向 ios要 ( ios下载地址 和 ios对应的app协议 ),找安卓要( android下载地址 和 andriod对应的app协议 )

    在这里插入图片描述

    在这里插入图片描述

    • 点击按钮 有两种情况
    • 1.该手机没有app,则跳转下载页面
      在这里插入图片描述
    • 2.该手机内有app,即可打开app

    在这里插入图片描述

    ------------------------步骤如下:------------------

    1. 判断是否是微信打开页面还是浏览器打开(并强制让用户使用浏览器打开)
      强制让用户使用浏览器打开代码:
      <div id='guideZfbPayPage' v-if="iosApp">
        <div class="wx-open" >
          <p>1.请点击右上角 • • •</p>
          <p>2.选择在浏览器中打开</p>
          <img src="./images/arrow_right.png" />
        </div>
      </div>
    

    mounted时 判断该页面是微信打开还是浏览器打开,强制让用户使用浏览器打开代码
    代码如下:

        mounted(){
          if (this.isWeixin()) {
            this.iosApp = true
          } else {
            //显示手动打开外置浏览器提示
            this.iosApp = false
          }
        },
    
    methods:{
          isWeixin() {
            return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
          },
    }
    
    1. 点击按钮
    <div @click="openApp> 打开app</div>
    
       methods:{  
          openApp() {
            const ua = window.navigator.userAgent.toLowerCase();
            // 非微信浏览器
            if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
              const loadDateTime = +new Date();
              window.setTimeout(function () {
                const timeOutDateTime = +new Date();
                if ((timeOutDateTime - loadDateTime) < 5000) {
                  window.location.href = '// ios下载地址'; 
                } else {
                  window.close()
                }
              }, 2000);
              window.location.href = '// ios对应的app协议'; 
            } else if (navigator.userAgent.match(/android/i)) {
              const state = null;
              try {
                window.location.href = '// 安卓对应的app协议'; 
                setTimeout(function () {
                  window.location.href = '// android下载地址'; 
                }, 500);
              } catch (e) {
              }
            }
          }
        }
    

    纯H5 原生js 代码

    代码如下:

    // =======================  Dom  ==========================
    
    <div id='guideZfbPayPage' style="display: block;" >
      <div class="wx-open" >
          <p>1.请点击右上角 • • •</p>
          <p>2.选择在浏览器中打开</p>
          <img src="./image/arrow_right.png" />
      </div>
    </div>
    
    // =======================  css 样式  ==========================
    <style>
    /* 提示浏览器打开 */
    #guideZfbPayPage {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 777;
    }
    .wx-open {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 888888;
    }
    .wx-open p {
        position: relative;
        top: 38%;
        margin-block-start: 0;
        color: white;
        font-size: 18px;
        line-height: 20px;
    }
    .wx-open img {
        width: 25%;
        border-style: none;
        position: absolute;
        transform: rotateZ(246deg);
        top: 6%;
        right: 28px;
    }
    </style>
    
    // =======================  js  ==========================
    <script>
    // 页面加载时,立即执行代码
    (function(){
      var u = navigator.userAgent,
      app = navigator.appVersion
      var isAndroidNum = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
      var isIOSNum = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isAndroidNum) {
        isAndroid = true
        schemeUrl= 'android://com.xpx.watercamera/open'
        downloadUrl = 'https://www.pgyer.com/8PGW'
      }
      if (isIOSNum) {
        isIos = true
        schemeUrl= 'iOSXPXMJCamera://'
        downloadUrl = 'itms-apps://itunes.apple.com/app/id1549495554'
      }
      if (isWeixin()) {
        console.log(11111111);
      document.getElementById("guideZfbPayPage").style.display=  "block"
      } else {
        //显示手动打开外置浏览器提示
        document.getElementById("guideZfbPayPage").style.display=  "none"
      }
    })();
    
    //判断当前是什么浏览器
    function isWeixin() {
      return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
    };
    function openApp() {
      const ua = window.navigator.userAgent.toLowerCase();
      // 非微信浏览器
      if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
        const loadDateTime = +new Date();
        window.setTimeout(function () {
          const timeOutDateTime = +new Date();
          if ((timeOutDateTime - loadDateTime) < 5000) {
            window.location.href = '// ios下载地址'; 
          } else {
            window.close()
          }
        }, 2000);
        window.location.href = '// ios对应的app协议'; 
      } else if (navigator.userAgent.match(/android/i)) {
        const state = null;
        try {
          window.location.href = '// 安卓对应的app协议'; 
          setTimeout(function () {
            window.location.href = '// android下载地址'; 
          }, 500);
        } catch (e) {
        }
      }
    }
    </script>
    
    

    此方法存在一个小问题
    如果该手机已存有app时,会弹出是否打开app的弹框,在这期间会继续执行跳转链接页面,如果要求不是很大,这样足以;
    目前还没找到合适的方法,如果有哪位同僚也在解决这个,知道一些解决方法希望能在下方告知一二。

    开发工程中 参考链接:
    1.https://blog.csdn.net/qq_36710522/article/details/100769219
    2.https://www.dazhuanlan.com/2020/03/09/5e65d7366b6aa/
    3.https://blog.csdn.net/w18246390463/article/details/81707961

    展开全文
  • vue 开发App监听手机 返回键返回上级路由以及退出 一、mui进行手机物理键的监听 首先安装 vue-awesome-mui npm i vue-awesome-mui 二、在main.js注册vue-awesome-mui import Mui from "vue-awesome-mui" ...

    vue 开发App监听手机 返回键返回上级路由以及退出

    一、mui进行手机物理键的监听

    首先安装 vue-awesome-mui
    npm i vue-awesome-mui

    二、在main.js注册vue-awesome-mui

    import Mui from "vue-awesome-mui"
    Vue.use(Mui)
    

    三、在index.html中监听手机返回键

     <script>
      mui(' body').on('tap', 'a', function() {
    document. location.href = this.href;
    
    });
    mui.init({
    swipeBack: false, //关闭右滑关闭功能(默认就是false)
    keyEventBind: {
    backbutton: true //开启back按键监听( 默认就是true)
    }
    });
    var quitTime = null;
    mui.plusReady(function(){
    mui.back = function(){
    //首次按键,提示“再按次退出应用’
    if(!quitTime){ 
    //记录第次按下回退键的时间 
    quitTime = new Date().getTime();
    //回退到上一页面
    window.history.go(-1); 
    setTimeout(function(){
    //1s中后清除
    quitTime = null;
    },1000);
    }
    else{
    if((new Date().getTime()-quitTime) < 1000){
    
    plus.runtime.quit();
    }
    }
    };
    });
    
    
      </script>
    
    展开全文
  • vue框架对接手机app

    千次阅读 2017-06-09 15:24:20
    最近在参与一个移动端的项目,要做一个功能模块接入到已有的手机app中。从要确定要做就开始参与,记录下整个流程过程吧。  制作手机采用的框架是vue和SUI共同使用,使用grunt及webpack进行自动化构建代码。 一、...
  • mui进行手机物理键的监听 首先安装 vue-awesome-mui npm i vue-awesome-mui 在main.js注册 import Mui from 'vue-awesome-mui'; Vue.use(Mui); index.html <script> mui.init({ swipeBack: false, //关闭....
  • nuxt-vue-test-task 构建设置 # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ npm run build $ npm run start # ...
  • vue 开发app处理手机返回键问题

    千次阅读 2019-03-26 17:54:57
    安装依赖:npm i vue-awesome-mui 在main.js注入: import Mui from "vue-awesome...在index.html中监听手机返回键 <script> mui(' body').on('tap', 'a', function() { document. location.href = thi...
  • vue-app开发入门

    万次阅读 2018-01-09 14:43:16
    因为微信小程序的原因, 我开始学习vue框架. vue的响应式模板语法真的很让我惊喜(虽然确实是... 使用 标签就可以将vue.js导入并且使用它来构建vue app了. 这种方法是官方建议的, 像我这种新手当然也是使用这种方案的
  • Web App,顾名思义是指基于Web的...一个web app如何拔地而起:需要用到的技术有Vue全家桶,H5。这三样我觉得是最重要的,其他的还包括js那些等等技术。 vue参考文档https://cn.vuejs.org/ H5参考接口Api http://www....
  • Vue, App与我(十二)

    2017-09-18 09:52:32
    VueApp与我前言:预想: Big-man现在的App的头像是两种方式; 第一种:快速的手机登录的用户头像是公司默认的头像,
  • 在电脑上调试没有出现路由跳转闪动,但发布成app手机上就出现了闪动的情况,这是什么原因呢
  • Vue打包app实现检查更新功能 最近接收到一个需求,就是把移动h5的代码打包成安卓app 这个确实很符合这个时代“一套代码,多处编译”的趋势 而且混生App发展到这个时期 也已经可以做到很多原生app所能做到的事情 我的...
  • 这个组件是基于H5app的移动端列表组件。 UI组件:Vant-ui 框架:Vue 在移动端存在很多列表,所以就封装了list列表组件,在实际项目中很多特殊情况,使用vant的list组件还是有很多bug,就在vant-ui的list组件上再进行...
  • 记一次Vue Hybrid App(混合APP)开发

    千次阅读 2019-06-12 11:57:43
    一、 项目开始前的思考 1.浏览设计图、产品原型 2.需要用到分享功能 3.怎么与Android和iOS原生方法互...1.使用vue-cli直接创建项目,vue-router、vuex都有用到 2.划分目录 api-将项目的api抽离出来单独放置 assets...
  • 使用HBuilder打包vue客户端app

    万次阅读 2018-01-05 10:27:07
    1、使用npm run build 命令 将vue项目打包,生成打包文件dist。 2、使用HBuilder打开dist文件目录 3、在HBuilder中右键项目目录名,点转换成移动App,会生成manifest.json文件 4、在线打包移动App 右键...
  • vue 嵌入app内部,调用app的选择图片和录制视频功能的时候,当前的.vue文件方法失效
  • HBuilder打包vue项目时,发现app按返回键就直接退出应用了,用了大佬提供的方法,链接如下: https://blog.csdn.net/qq_25252769/article/details/76913083 我用的是需要mui.js版本的代码,再模拟运行的时候可以按...
  • Cordova+Vue打包APP

    千次阅读 2018-12-07 14:47:54
    打包APP步骤:(除非特殊说明,以下步骤均为Windows环境) 1.安装node环境 2.安装cordova插件 3.配置安卓的SDK和JDK环境变量(Android),配置iOS的xcode环境(iOS) 4.整合vue到cordova 安装node环境: 首先去官网...
  • 写代码总避免不了会出错需要调试,Quasar混合开发的app调试方法也很简单,就和平时写web端代码调试一样。 此处列几种常用的调试方法 真机调试 真机调试也就是用自己的手机进行调试,完全真实环境。 手机连接电脑,...
  • vue实现app下载引导页,目标:手机微信打开时提示用户从浏览器打开。手机浏览器访问时,点击下载按钮自动识别安卓IOS跳转对应下载页面。 例子使用的是vue+脚手架(vue-cli)搭建,具体流程网上例子很多,文章不做...
  • 这几天有空闲时间去网上找了找vue的相关的ui框架,看到有网友推荐quasar-framework,去它官网看了下,然后看到了Hybrid Mobile Apps (that look native,意思就是混合移动应用程序,这不就是混合app吗,还是基于Vue的...
  • mall-vue-app(1).zip

    2021-04-13 14:14:58
    仿小米商城
  • vue-app之H5 plus调用

    千次阅读 2020-06-18 11:22:36
    在做H5APP时会用到很多手机本机的api就需要调用相关的api了,那么就要借鉴H5 api。 需要注意的是在H5APP还没有打包时在window运行时调用**H5 api**时会报错 plus is not defined,在打包后在手机端运行时才能正常的...
  • travel_project 使用Vue写的手机app
  • 其支持调用手机系统(Android、IOS、Windows phone)原生 API,它可以将你写的 Web 程序包裹进原生的 APP 壳中,也就是我们常说的 Hybrid APP (混合应用)。本文是一个前端开发者如何从 0 开始结合 Vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,165
精华内容 8,466
关键字:

vue手机app

vue 订阅