移动端app开发问题及理解

移动端app开发问题及理解框架使用的是vant跟web端不太一样的是事件有点不同web端事件有onload页面中所有标签,文档,图片等资源加载完毕后触发onclick鼠标单击事件ondbclick鼠标双击事件onmousedown鼠标按下onmouseup鼠标按键抬起onmouseover鼠标进入某个元素onmousemove鼠标移动到元素onmouseout鼠标离开元素onfocus元素得到焦点onblur元素失去焦点onchange用户改变文本域内容oninput实时监听输入框

大家好,又见面了,我是你们的朋友全栈君。

前端使用的是
h5+vue+vant3(ui框架)+webpack+Nginx

vant官网地址
https://vant-contrib.gitee.io/vant/#/zh-CN/

移动端跟web端事件有点不同

web端事件有
onload 页面中所有标签,文档,图片等资源加载完毕后触发
onclick 鼠标单击事件
ondbclick 鼠标双击事件
onmousedown 鼠标按下
onmouseup 鼠标按键抬起
onmouseover 鼠标进入某个元素
onmousemove 鼠标移动到元素
onmouseout 鼠标离开元素
onfocus 元素得到焦点
onblur 元素失去焦点
onchange 用户改变文本域内容
oninput 实时监听输入框变化
onpropertychange 与oninput一样,ie专属
onkeyup 键盘按键抬起
onkeydown 键盘按键按下
contextmenu 弹出右键菜单

h5新加事件
ondrag 元素被拖动时运行的脚本
ondragend 在拖动操作末端运行的脚本
ondragenter 当元素已被拖动到有效拖放区域是运行的脚本
ondragleave 元素离开有效拖放目标时运行的脚本
ondragover 元素在有效拖放目标上正在被拖动时运行的脚本
ondragstart 在拖动操作开端运行的脚本
ondrop 当被拖元素正在被拖放是运行的脚本
onmousewheel 当鼠标滚轮整被滚动时
onscroll 元素滚动条被滚动时

移动端事件有
click 单击事件
类似于pc端click,移动端中,连续click触发有200ms-300ms的延迟
touch 触摸类事件
touchstart 手指触摸到屏幕触发
touchmove 手指在屏幕上移动触发
touchend 手指离开屏幕触发
touchcancel 可由系统进行的触发,比如手指触摸屏幕时,突然alert了,或者系统中其他打断了touch行为可触发

tap触碰类事件
一般用于代替click事件
tap 手指碰一下屏幕触发
longTap 手指长按屏幕触发
singleTap 手指碰一下屏幕触发
doubleTap 手指双击屏幕触发

swip滑动类事件
swipe 手指在屏幕上滑动触发
swipeLeft 手指在屏幕上左滑触发
swipeRight 手指在屏幕上右滑触发
swipeUp 手指在屏幕上上滑触发
swipeDown 手指在屏幕上下滑触发

vant组件使用过程中遇到的问题

弹框dialog组件确认回调函数
最开始我绑定的是confirm事件
但是实际调用的时候接口一直调用进入死循环了,控制台报Maximum call stack size exceeded
超出最大调用堆栈大小

后来搜索发现,confirm触发机制是:加载页面会触发,点击按钮打开模态框触发,点击确定触发,点击取消触发。

可以改用beforeClose事件
回调函数有两个参数,第一个判断点击的是确认按钮还是取消按钮。第二个感觉是可以关闭模态框
在这里插入图片描述

移动端消息推送

消息推送跟设备走还是跟人走?
跟人走是根据登录的账号。根据用户权限判断该用户是否可以收到消息的推送
app安装在设备上,跟设备走是根据设备的mac地址。根据mac地址判断该设备是否可以收到消息,给相应的设备推送消息。

本项目消息推送跟设备走

消息推送测试的逻辑:
首先分组长和组员两个成员身份,组长有分配维修单的权限。
当填写完维修单后,所有人都可以收到推送的消息通知,当组长分配维修单后,只有指定的人收到维修单的通知。分配的人会收到两条消息通知。

js如何与app端交互

具体可看下这个
https://zhuanlan.zhihu.com/p/337890794

我的理解
首先了解下
app移动端网页运行在手机应用内嵌的浏览器引擎中,没有UI的内核容器统称WebView。iPhone的UIWebView(iOS2.0-12.0 ),WKWebView(iOS8.0+,macOS10.10+),Android的WebView
WebView可以理解为手机应用中运行和展示网页的界面和接口

我的理解WebView相当于一个中间层,h5和原生应用交互都是通过原生应用中的WebView,h5调用原生应用注入其中的原生对象的方法,原生应用调用h5暴露在该环境中的JavaScript对象的方法,实现指令和数据的传输。

前端通过WebView层和app进行交互获取相关信息,然后把信息当做参数掉接口传参

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148414.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • kubernetes杂谈(一)清除状态为Evicted的pod

    kubernetes杂谈(一)清除状态为Evicted的pod一现象引入使用’kubectlgetpods–all-namespaces’,发现很多’pod的状态为evicted’原因eviction,即’驱赶的意思’,意思是当节点出现异常时,kubernetes将有’相应的机制驱赶’该节点上的Pod,多见于资源不足时导致的驱赶。注意:即使集群’状态恢复’,eviction状态的pod会’在系统中存在’,需要’手动删除’–>只是影响美观解决方案排查’资源和异常原因’,防止新的驱赶产生–&g..

  • idea激活码网站【最新永久激活】

    (idea激活码网站)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/ide…

  • PID控制的MATLAB仿真(1)

    PID控制的MATLAB仿真(1)PID控制应用广泛,说起来PID特别的简单,在比例负反馈的基础上加入微分项实现快速调节,加入积分项实现无静差。MATLAB强大的功能让学习变得非常简单。在学习智能控制这门课的时候,老师推荐了刘金琨老师的先进PID控制一书,边看边学边调程序。下文程序选自此书。首先从模拟PID开始,被控系统一般是下图这种结构:其中PID控制器:一种用模拟PID控制的磁悬浮:电路图左侧是霍尔传

  • 后端框架flask学习小记[通俗易懂]

    后端框架flask学习小记[通俗易懂]1.写在前面最近在和几个伙伴尝试搭建一个新闻推荐系统,算是一个推荐算法的实战项目,里面涉及到了前后端交互,该项目里面,使用了Flask作为后台框架,为了理清楚整个系统的交互,所以就快速参考着资料学习了下flask,主要还是参考伙伴们写的flask简介和基础的内容,加上了一些其他理解和实验辅助,整理一篇心得文章,算是flask初步入门。对于一个算法工程师来讲,后端这块虽然不必详细弄清楚原理,但学习一些开发相关知识还是有好处的,因为在实际工作中经常会调试线上的代码调用策略或者模型,我们至少

  • 软件开发与软件研发的区别「建议收藏」

    软件开发与软件研发的区别「建议收藏」按:这几天我一直在写这篇东西,本来是胸有成竹,没想到后来越写越发现自己在这个题目下有太多话想说,而以我现在的能力又不能很好地概括总结,以至于越写越长,文章结构也变得混乱,到后来修改的时候每次都要考虑好久才能下笔,所以决定拆成两部分来发,以便阅读。这篇写得我心力交瘁,质量不算好,凑合着看吧。同样是写程序,不同的岗位工作内容不一样,对程序质量以及工程师的要求也不一样。程序开发大概可以划分成两类…

  • countdown倒计时安卓软件_倒计时显示装置设计

    countdown倒计时安卓软件_倒计时显示装置设计实现原理拿CountDownTimer的源代码看一下,并不复杂,基本上是对Handler的封装,使用send/postdelay。这套机制仍然首先于Handler的原理,所以在精度上也不能够保证很精确,只能保证不会早于预期执行。详见我另外一篇介绍Handlersend/postdelay的文章:HandlersendMessageDelayed()/postDelayed()机制详解。源…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号