Vue, App与我(七)

最新推荐文章于 2024-05-07 17:05:25 发布
最新推荐文章于 2024-05-07 17:05:25 发布
阅读量467 收藏
点赞数 3
分类专栏： 趣味前端 文章标签： app 前端 手机 移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XXJ19950917/article/details/77351570
版权

Vue, App与我(七)

  • 评论框的书写：

    • 要用前端的代码书写一个适合与所有移动端的手机设备，想到了几种解决的方式，但是都不太适用，但是还是想要把这几种方式更新出来，供大家评判一下我这个失败之笔的。
  • js来书写评论框的位置：
  • a、用定位来解决：
var oHeight = $(document).height(); // 浏览器当前的高度
    $(window).resize(function()) {
        if($(document).height() < oHeight) {
            $('#footer').css("position", "static"); 
        } else {
            $('#footer').css("position", "absolute");
        }
    });

  • 这是获取浏览器的位置，判断位置来确定定位的方式，当手机键盘出现的时候，这个页面也就会重新定位，也就是resize, 但是不同手机上的手机键盘出现的方式和方法都不一样， 比如华为手机会出现一个虚拟界面，手机键盘会随着虚拟界面的变化，手机键盘出现的时候会在虚拟界面上，虚拟界面下去也会改变页面的效果。如图所示：

    华为手机桌面

  • 感觉有了这张图，就比较好明白我的意思了，但是有一个情况就是写的项目在浏览器里面打开，这种方式的处理又是没有问题的，所以在本地随便写了一个输入框进行浏览器中的测试，输入框在浏览器中打开都是不存在问题的，Big-man遇到了这个问题也是非常大的疑惑。后来他进行了排除思考，觉得是因为浏览器中对于手机键盘和虚拟界面进行了处理然后再调用本地的代码，就不会出现差乱了。

  • b、改变可视区域的高度：
var localHeight = $("section").height(); // 获取可视区域的高度
$("input, textarea").focus(function() {
    var keyboardHeight = localHeight - $("section").height(); // 获取键盘的高度
    var keyboardY = localHeight - keyboardHeight;
    var addBottom = (parseInt($(this).position().top) + parseInt($(this).height())); // 文本域的底部
    var offset = addBotton - keyboardY; // 计算上滑的距离
    $("section").scrollTop(offset);
});

  • 这个的原理就是手机键盘的高度判断出来，然后页面向上滚动手机键盘的距离就可以了，但是在适配手机端的所有机型的时候，Big-man又遇到了一些问题，iOS的手机上的问题。对于类似于Big-man现在在做的是一款WebApp项目，也就是所谓的你在浏览器中也是可以访问的网站，所以在iOS的页面会出现页面可以滑动的情况，也就是评论框出现在iOS的手机上进行上下滑动的效果。这让Big-man有点“丈二的和尚，摸不着头脑了”。如图所示：
    ios

  • 评论框在下面，ios可以滑动出现评论框，但是正常的情况不会出现这样的情况。

  • c、display: flex;流式布局来尝试解决此bug：
.chatting {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .chatting-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      width: 100%;
      background-color: $blue;
      color: white;
      padding-left: 10px;
      padding-right: 15px;

      .chatting-back {
        width: 32px;
        height: 32px;
        .icon-back {
          background: url('../../common/icons/icon-ai.svg') no-repeat;
          background-size: contain;
        }
        .icon-back2 {
          background: url('../../common/icons/icon-ai2.svg') no-repeat;
          background-size: contain;
        }
      }

      .chatting-title {
        i.icon-group {
          vertical-align: top;
          width: 30px;
          height: 30px;
          background: url('../../common/icons/icon-group.svg') no-repeat;
          background-size: contain;
          margin-right: 3px;
        }
      }

      .chatting-menu {
        width: 30px;
        height: 30px;
        i.icon-menu {
          background: url('../../common/icons/icon-index.svg') no-repeat;
          background-size: contain;
        }
      }
    }

    .chatting-content {
      flex: 1;
      width: 100%;
      background-color: rgba(0, 0, 0, .1);
      overflow: auto;
      .chatting-item {
        padding: 10px;
        width: 100%;
        .msg-date {
          text-align: center;
          color: gray;
          font-size: 80%;
        }
        .msg-from {
          display: flex;
          align-items: center;
          span.loc {
            color: gray;
            font-size: 60%;
            margin-right: 5px;
          }
          .msg-author {
            font-size: 1.2rem;
          }
          img {
            width: 30px;
            height: 30px;
            border-radius: 15px;
          }
        }
        .msg-content {
          margin-top: 5px;
          background-color: white;
          width: 200px;
          padding: 6px 10px;
          border-radius: 10px;
        }
      }

      .chatting-item + .chatting-item {
        margin-top: 10px;
      }
      .self {
        .msg-from {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          img {
            margin-left: 10px;
          }
        }

        .msg-content {
          float: right;
          word-wrap: break-word;
          word-break: break-all;
          margin-right: 10px;
        }


      }

      .other {
        .msg-from {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span.loc {
            color: gray;
            font-size: 60%;
            margin-right: 5px;
          }
          img {
            margin-right: 10px;
          }
        }

        .msg-content {
          float: left;
          margin-left: 10px;
          word-wrap: break-word;
          word-break: break-all;
        }

      }

      .online {
        width: 200px;
        // max-width: 100%;
        margin: 3px auto;
        border-radius: 4px;
        text-align: center;
        background-color: #FFFDE7;
      }


    }

    .chatting-input {
      position: relative;
      display: flex;
      height: 40px;
      width: 100%;
      .emoji-display {
        position: absolute;
        width: 100%;
        height: 210px;
        background-color: white;
        top: -210px;
        left: 0;
          overflow-y: auto;
        ul {
          display: flex;
          flex-wrap: wrap;

          li {
            padding: 2px 3px;
            font-size: 2.2rem;
          }
        }
      }
      .emoji {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 100%;
        background-color: rgba(0, 0, 0, .1);
        .icon-emoji {
          width: 40px;
          height: 100%;
          background: url('../../common/icons/icon-emoji.svg') no-repeat;
          background-size: contain;

        }
      }

      textarea {
        flex: 1;
        resize: none;
        padding-left: 3px;
        padding-top: 7px;
        padding-right: 3px;
        height: 100%;
        font-size: 1.4rem;
      }
      button {
        width: 60px;
        height: 100%;
        background-color: $blue;
        color: white;
        font-size: 16px;
      }
    }
  }

  • display: flex; : display 属性规定元素应该生成的框的类型。框的类型就有横框和竖框，Big-man所想的这个页面是竖直的布局，所以使用了flex-direction: column;也就是列框来进行布局，至于详细的流式布局，可以参见阮大神的blog。

  • Big-man在这里尝试地就是这样的做法，webApp项目在浏览器中打开是为这样的:
    chatting

  • 这是在不同手机机型上单独访问这个文件也就是这个链接都会存在评论框和手机键盘的位置处理正常的效果，但是应用到软件中的时候就会出现错乱的效果，出现这个问题的原因也就是上述所说的webApp对于适配的手机机型存在较大的差异。

  • 所以需要去研究一下用native的思想来进行这个问题的解决。

Jackdan9

前端Baymax
关注
专栏目录
vue和app之间的通信
m0_64288662的博客
07-24 197
H5与APP之间的通信（调用app方法，传参）
Vue与原生App(Android、IOS)交互
weixin_69474776的博客
12-12 3425
Vue项目与原生App交互
vue框架和uniapp框架区别,前端vue和uniapp哪个好用
aifans_bert的博客
09-14 1万+
第三，跨平台的能力，uni-app能够跨多个终端，H5，安卓，Ios，微信小程序，百度小程序，头条小程序，支付宝小程序，真正实现了一套代码，多端运行，而且很好适应了我国的市场。为什么会选择它呢，第一，vue语法，学习成本低，上手速度快，只要之前你做过vue的项目，那么就能很快上手，其实是vue和微信小程序的结合体，一半vue，一半微信小程序。2，低端机跑程序的话，如果内容复杂了，会比较卡，我们在测试直播连麦的时候，有些操作反复做，比如连麦挂断，在低端机会闪退，究其原因我也不清楚是怎么回事。
uniapp和vue的区别？
zybijiso666的博客
03-31 1613
而 Uni-app 则是基于 Vue.js 的封装，提供了一些特定于跨平台开发的 API 和组件，使得开发者可以更方便地进行跨平台应用的开发。由于 Uni-app 提供了一套完整的跨平台开发解决方案，使得开发者可以使用相似的语法和工具来开发不同平台的应用，因此在一定程度上简化了开发流程。总的来说，Uni-app 是 Vue.js 的一种衍生，旨在解决跨平台开发的问题，提供了一套完整的解决方案。Uni-app 是为了解决一套代码多端运行的问题而设计的，支持在多个平台上运行，包括微信小程序、App、H5 等。
uniapp与vue的区别
zzx262625的博客
12-17 2489
它通过使用Vue的语法和组件化开发模式，实现了一套代码可以在多个平台上运行的能力。而Uniapp在Vue的基础上，还提供了一些专门用于跨平台开发的组件和API，如uni-ui组件库、uni.request等。需要注意的是，虽然Uniapp是基于Vue的，但并不代表Uniapp中所有Vue的特性和功能都可以完全支持。在使用Uniapp时，需要根据Uniapp的文档和规范进行开发，了解其特有的API和组件。总结：Vue是一种用于构建Web界面的框架，而Uniapp是基于Vue的跨平台框架，用于开发多端应用。
vue与原生app的对接交互的方法(混合开发)
10-17
本文将重点介绍在混合开发模式下，Vue如何与原生APP实现对接交互，并分享在开发过程中可能遇到的一些问题及其解决方案。 ### Vue与原生APP交互的基本概念 Vue.js是一种构建用户界面的渐进式JavaScript框架，主要...
VueApp
02-09
blog_vue 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue音乐：vue音乐app
02-12
Vue音乐 根据q音乐模拟音乐播放器h5项目## first ...│ │ App . vue │ │ main . js │ │ axios . js │ │ global . js │ ├─components │ ├─router │ │ index . js │ └─views │ index
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
10-16
主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue中的.$mount(#app)手动挂载操作
01-21
在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$mount(‘#app’)进行挂载。 配置了el属性： new Vue({ el:#app, router }); 如果没有配置el属性，可以使用手动挂载$mount(“#app”) new...
uni-app怎么用？和vue对比记忆一文教会你
haixtx的博客
05-07 1485
这篇文章记录了我学习uni-app以及在项目中使用uni-app过程中所总结的笔记，以这篇文章记录下来，供你们和我自己对uni-app进行整体的复习和巩固
记一次利用vue.js完成的h5与app的交互
胡小念
10-18 9894
记一次利用vue.js完成的h5与app的交互唠叨：最近接收一个用vue写的项目，对我来说甚是头大。不得不说这是对传统前端的一次大过滤，之前仗着html，css,js混饭吃的前端儿们，压力越来越大，我就是这样的一个例子。压力越大，只要不放弃，成长的也越快啊，所以，咬牙就咔咔开始干。需求：一个H5分享页面，要分享的页面上的东西是动态的，需要app在h5页面的url后面拼接参数（为防止渲染时出现乱码现象
vue 增加删除和修改操作
WangDaLi_的博客
06-21 7941
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/axios.min.js"> </script&gt...
vue h5与app交互心得
光
08-27 1万+
app（ios、安卓）与h5交互的原理： 1、app向h5发送信息：调用window下的全局方法并向方法内传参 2、h5向app发送信息：以url跳转的形式完成，app会拦截h5的链接跳转，当监测到特定的url时，即触发h5与app的交互，如window.loacation.href = 'http://appName.local.com?action=actionName'，action即为...
使用手机预览Vue项目（移动端）
我竟然是凡人
04-08 4535
1、在命令行中输入npm run dev ，启动自己的vue项目，例：http://localhost:8081/#/goods，可以在浏览器预览2、那么如何在手机端预览vue项目呢？WIN+R，输入cmd启动命令行工具，输入ipconfig查看本机ip3.将vue项目中的index.js 文件中的host：“自己IP地址”4.本机ip替换localhost，例：http://192.168.1....
Vue项目打包成移动端APP
追梦&天空的博客
09-25 3万+
Vue项目打包成移动端APP 需要准备的工具：Hbuilder 目录 Vue项目打包成移动端APP 首先打包vue到dist目录 然后再Hbuilder中打开dist目录 然后将dist包含的 web项目 转换为 移动 APP项目 前几步配置完成后，就可以在手机上进行真机调试了 真机测试没有问题，就可以进行下一步---》打包apk了 最后将apk安装包安装到手机上就可以正常使用了...
使用vue H5与App交互
qq_26833853的博客
01-19 1382
onClick=&amp;amp;quot;window.handleTrunTo()&amp;amp;quot; mounted () { //接收app通知 window.typeAndAddressNative = this.typeAndAddressNative; var url = this.data.url; var title = this.data.title; var data = ...
利用HBuilder将vue项目打包成移动端app
热门推荐
zhoudan232的博客
06-19 7万+
事先准备，开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目 1，将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './' 2，执行npm run build之后生成dist文件夹 3，打开HBuilder，文件->打开目录，如下图
vueapp.vue
最新发布
06-28
`vueapp.vue`通常是指使用Vue.js框架编写的单文件组件（Single-File Component，简称SFC）。在Vue中，`.vue`扩展名的标准格式是一个包含HTML、CSS和JavaScript的文件，用于组织和管理应用程序中的视图层。 一个基本的`vueapp.vue`文件结构可能如下所示： ```html <template> <div id="app"> <h1>Hello, {{ message }}!</h1> </div> </template> <script> export default { data() { return { message: 'World' } }, methods: { sayHello() { this.message = 'Vue App'; } } } </script> <style scoped> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; color: #2c3e50; } </style> ``` 解释一下各个部分： - `<template>`标签内是组件的HTML结构，这里是显示"Hello, {{ message }}"的文字。 - `data()`函数定义了组件的数据，这里我们有一个`message`属性，初始值为'World'。 - `methods`对象包含了可调用的方法，如`sayHello()`，当调用这个方法时，message的值会变为'Vue App'。 - `<style scoped>`标签内的CSS只作用于这个特定组件，`scoped`关键字防止样式污染其他组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值