移动端
移动端资料文档集合
一键写代码
这个作者很懒,什么都没留下…
展开
-
vue-cli项目中,通过cdn方式引入vchart来解决打包过大问题
1、在index.html中,引入v-charts的cdn地址。因为v-charts 依赖echarts,所有,两者都需要引入。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content原创 2022-04-11 17:29:53 · 1279 阅读 · 1 评论 -
如何自己实现进度条统计图表类的功能
一般我们遇到这种统计图表的需求,都是去找插件完成。譬如,element-ui中的组件,或是echart中的图标工具。那么,遇到简单的图表需求,我们能否自己实现呢? 答案是。当然可以。贴代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc原创 2022-04-02 15:33:13 · 451 阅读 · 0 评论 -
app中使用企业微信sdk分享小程序报错:小程序路径错误,加载超时 解决办法。
问题描述:在app中,需要调用企业微信skd,分享小程序给客户,客户打开小程序。如果客户直接是企业微信中的,可以在企业微信中打开小程序。但是,如果客户是微信中,用户在微信中打开小程序就报错。ios分享出去可以,安卓分享就不行。app开发甩锅小程序问题。小程序打不开,肯定是小程序的问题。这个锅我们不接。甩锅是官方bug,这个不是解决办法。排查原因。我们查官方文档:小程序类型分享示例WWMediaMiniProgram miniProgram = new WWMediaMiniProgr原创 2021-09-24 10:47:16 · 1788 阅读 · 0 评论 -
域名set-cookie报Set-Cookie was blocked because its Domain attribute was invalid with regards to the url
先说坑:api.abc.com这个域名,写cookie重定向到static.abc.com这个域名,发现,cookie没有写成功,前端在代码中获取不到cookie。使用控制台查看,报错this Set-Cookie was blocked because its Domain attribute was invalid with regards to the url 。看字面意思,就是设置cookie非法了,操作不对。查后台代码,后台设置cookie时,是这样玩的:set-cookie: use原创 2021-09-07 11:20:59 · 4717 阅读 · 1 评论 -
关于页面卸载发送请求统计页面浏览时长类似需求的解决办法
需求描述用户离开页面时,发送一个请求,统计用户的浏览时长。衍生譬如上报错误等,类似需要在页面卸载的时候发送请求给后台的。解决办法一样。解决方案页面进入的时候,记录开始时间,页面卸载的时候,记录结束时间,并且请求接口上报数据。最早期方案 if ("onpageshow" in window) { $(window).on("pageshow", loadHandler); $(window).on("pagehide", unloadHandler);原创 2021-09-01 17:55:39 · 335 阅读 · 0 评论 -
如何在h5和小程序中适配iphone X全面屏底部的安全区
1、第一步: h5需要设置页面属性: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">2、在属性样式上加一段判断覆盖样式:示例代码:.load-more { color: #0080ff; padding-bottom: 32px;}@supports (bottom:原创 2021-07-01 11:23:44 · 1026 阅读 · 0 评论 -
使用V-chart实现多Y轴显示图表,不是双轴,是多轴。
需求描述: 使用多Y轴图标显示。我们知道,echart官方demo是有这样的图标的。https://echarts.apache.org/examples/zh/editor.html?c=multiple-y-axis那么,我们引入v-cahrt的又该如何实现这个需求呢?答案是可以的。<ve-histogram height="8rem" :data="chartData" :yAxis="yAxis"原创 2021-06-04 16:33:48 · 1606 阅读 · 0 评论 -
特殊需求解决办法:移动端图片点击放大查看预览,可移动可缩放。
需求描述:移动端图片点击可以放大预览。找了一圈,找到一个github star 星星数不多,但是很满足需要 也很好用的插件。github地址:https://github.com/KyLeoHC/ImageViewer使用方式很简单:简单描述一下:var imageViewer = new ImageViewer();imageViewer.setOption({ // duration: 1000, container: 'body', autoLoadImage:.原创 2021-05-25 16:19:23 · 1784 阅读 · 0 评论 -
vue3去掉了$on、$off后,使用mitt第三方库替代eventBus的原理。
on,on,on,off 和 $once 实例方法已被移除,应用实例不再实现事件触发接口。官方文档推荐mitt这个小库来替代。看了一下mitt的源码,有种豁然开朗的赶脚。贴在这里。源码是用ts写的,这里贴了一个翻译后的,对着看,比较好。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width.原创 2021-05-24 18:25:17 · 2391 阅读 · 0 评论 -
使用v-chart如何实现自定义效果
前言: 我们都知道v-chart 是用e-chart来包装的。使用v-chart,有方便的一面,简化了处理数据的过程。但是,有时候,我们还是需要e-chart那要的配置来实现图标的样式风格自定义的。该如何实现?v-chart 的官方文档最近这段时间有问题,放一个能用的链接:http://woolen.gitee.io/v-charts/#/line答案是: 用v-chart 的 extend 属性来弄。内部就看e-cahrt的文档。示例:<template> <.原创 2021-05-24 16:42:31 · 1166 阅读 · 0 评论 -
移动端H5开发如何避免弹窗、轮播图等当做广告被拦截的问题
这几天弄移动端H5项目的广告,发现,在苹果UC浏览器、华为安卓浏览器的糟糕经历:1、苹果UC浏览器,会把我的首页轮播图当做广告拦截了,闪现一下后变空白,图片看不到了。2、华为默认安卓浏览器,会把我的广告弹窗当做广告屏蔽了,不让弹,也不让点开。虽然,哪怕他们的确是广告,作为用户,是不希望看到广告的。但是 , 我是开发,我们的产品是不能忍受的,测试提了bug给我,我需要解决。解决办法:1、情况1是因为我写了一个样式类名叫xxx-ad 根据这,uc浏览器认出了它是广告。2、情况2,是因为后台渲染.原创 2021-04-29 15:15:36 · 1161 阅读 · 0 评论 -
常见需求:滚动页面到某个位置的时候,对应的导航菜单高亮。点击菜单,可以直接滚动到对应的位置。
常见需求:滚动页面到某个位置的时候,对应的导航菜单高亮。点击菜单,可以直接滚动到对应的位置。如果解决:1、web端参考资料:a:引入navScroll.jshttp://webjyh.com/navscroll/http://demo.webjyh.com/navScroll/2、使用新的版本,可以用在vue项目中https://www.npmjs.com/package/navscroll...原创 2021-04-06 14:47:32 · 1392 阅读 · 0 评论 -
使用vue开发项目的时候,异步请求数据,连续触发多次请求导致的渲染的数据列表数据错误的问题解决办法。
问题描述:在vue类型的项目开发中,我们一般都是发起异步请求从服务器获取数据后,根据数组数据使用v-for来动态渲染数据列表。但是,如果一个请求在pending中,再次发送一个请求,最后导致渲染的list,数据重复,或是错误的问题。原因,就是多次请求了异步接口,一个接口没有返回,另外一个接口就发出去了。因为,ajax是一个异步操作。导致,在回调的时候,两次请求成功后的回调都会执行。就导致数据,错误了。什么情况下发生这种现象呢? 譬如下拉滚动加载更多 或是 tab切换。类似,这种,点击tab标原创 2020-08-18 15:58:05 · 8977 阅读 · 2 评论 -
记录使用mpvue开发小程序常常遇到的坑
1、保存全局状态的问题我们在vue项目中,一般都会使用vuex。在react中,一般都会使用redux。那在小程序中呢?答案是,还是可以使用vuex。mupve初始化项目后,有一个页面模板就是使用了vuex。但是,我一般来说,都是需要全局的store,而不是局部页面的。那如何配置解决呢?新建一个store后,然后在主入口,main.js中来关联配置。import Vue from 'vue'import App from './App'// api请求接口import { userLog原创 2020-08-10 18:07:24 · 1274 阅读 · 1 评论 -
mpvue开发微信小程序用户登录功能的实现过程
资料预习:1.一次性授权常规写法,需要获取用户公开信息(头像,昵称等)时,判断调取授权登录接口,但是此方法如果不经处理的话 用户如果拒绝授权或者删除该微信小程序后 需要重新调取并获取用户公开信息(头像,昵称等),此方法用户体验较差,不建议使用;2.永久授权在不必要使用用户公开信息(头像,昵称等)时,不调取授权登录接口,只有在必要的时候再去判断调取授权登录接口并把获取到的用户公开信息存入数据库,这样在每次登录时直接先运行指定函数从数据库索取需要的用户公开信息(头像,昵称等)即可,此方法在删除小程原创 2020-08-10 17:00:19 · 1242 阅读 · 0 评论 -
vue开发中遇到的坑之返回顶部,在Android端居然不能用的问题。
问题描述:自己按照element-ui的思路写了一个返回顶部的公共居中,使用在移动端。在PC上的模拟器和IOS手机正常,在安卓上跑,居然没有效果。气死人了。原因分析document.documentElement.scrollTop在值,在安卓端,始终是0。解决办法安卓端使用document.body.scrollTop来替代。兼容写法const scrollTop= document.documentElement.scrollTop || document.body.scrollTop;原创 2020-05-15 16:03:14 · 621 阅读 · 1 评论 -
Js判断是安卓Andorid还是苹果IOS系统
isAndroidOrIOS() { let u = navigator.userAgent, app = navigator.appVersion; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isAndroid) {原创 2020-05-14 09:06:46 · 461 阅读 · 0 评论 -
H5中,嵌入式webview中,调用摄像头拍照功能的实现
参考资料:1、https://github.com/robnyman/robnyman.github.com/tree/master/camera-api【老外写的demo】2、https://www.jianshu.com/p/3befaa79e131【只写了ios的实现】3、https://www.jianshu.com/p/877eb9ace1d3 【重点讲的是android方面的写法】...原创 2020-05-13 18:14:06 · 3077 阅读 · 0 评论 -
vue移动端如何使用vconsole调试工具。
开发移动端项目的时候,虽然可以用chrome的模拟器,但是,毕竟和真机,在有些时候,是对不上的。还是需要真机调试。那如何在移动端真机上像chorme devtolls来调试程序呢?推荐工具VConsole第一步,安装npm install vconsole第二步,在main.js中实例化一个vconsole实例,才能生效main.js// 引入vconsole调试,正式上线需要删除import VConsole from "vconsole/dist/vconsole.min.js";le原创 2020-05-13 17:29:17 · 1064 阅读 · 0 评论 -
前端js实现图片选择后进行压缩,然后转换Base64或blob进行上传操作等。
需求描述:手机端用户选择的照片,肯定很大,直接上传到服务器压力很大,图片压缩,本质上后台很容易实现,现在需要前端来实现。用户选择图片后,还能立马在界面上看到预览效果具体的实现过程。首先是html代码,重点只需要看<input>标签 <div class="upload-wrap"> <!-- 图片预览 --> <div class="xl-uploader__preview">原创 2020-05-13 15:05:26 · 1248 阅读 · 0 评论 -
Element-ui 遇到的坑之返回顶部Backtop组件的target如何设置正确的值的问题。
问题描述:element-ui 的Backtop属性中有target的值是需要设置的。设置错了,不仅没有效果,反而还可以导致报错。官方文档说明的是,target触发滚动的对象,String类型。查看示例,是传一个css选择符。查看官方源码,我们会发现, init() { this.container = document; this.el = document.documentElement; if (this.target) { this原创 2020-05-11 18:06:09 · 2976 阅读 · 6 评论 -
vant-ui组件调用Dialog弹窗异步关闭
需求描述:需求描述:官方文档又是组件调用方式,又是函数调用方式。我就需要一个很简单的:点击操作弹窗显示后,我填写一个表单,表单校验通过后,再调用API接口,返回成功后,关闭弹窗。一个很简单的东西,element-ui用的很方便,在这里就懵比了,刚开始做的,弹窗关闭了,才返回异步接口调用的结果。网速慢点,用起来真的很不好。正确的解决方式一: <van-dialog v-model="showDialog" title="提示" show-cance原创 2020-05-11 11:00:57 · 13319 阅读 · 1 评论 -
vue开发公共组件之返回顶部(backtop)
记录一下开发公共组件的流程。背景:pc端使用element-ui框架,本身是有返回顶部的组件的。现在需要在移动端使用。照着葫芦画瓢弄一个。记录如何将公共组件通过install的方式,注册为全局的组件使用。components目录下,新建bacttop文件夹,内部包含一个index.js文件和一个src文件夹。src文件夹内放backtop.vue组件文件。|--components |--index.js |-- backtop |--index.js |-原创 2020-05-09 09:18:25 · 1741 阅读 · 1 评论 -
vue移动端实现滚动加载更多和下拉刷新功能,vant-ui的PullRefresh和List组件结合使用的坑
需求,移动端列表页不再是分页实现点击上一页下一页,需要实现滚动到底部自动加载下一页,页面整个下拉的话,就刷新当前页面的数据。需求很简单。我这边引入了vant-ui,实现起来呢,遇到各种问题。网上找了一大圈,发现一个能打的都没有,都有问题。我整个人都不好了。为什么呢?特此先记录一下,我的实现过程。虽然,不是最好的实现方式,但是,目前各种暴力测试,没有发现bug了。总算能用了。测试遇到的问题...原创 2020-04-29 09:48:19 · 8842 阅读 · 8 评论 -
安卓嵌入式混合开发,使用webview加载vue页面,使用keep-alive缓存的问题。
问题描述在嵌入式开发android app时,使用webview来加载vue开发的web应用,如果只是单纯的使用keep-alive来缓存页面数据。会导致,用户token过期,或是用户退出登录,缓存的页面数据还在,哪怕换个用户登录,页面的数据居然还是上一个用户登录后留下的数据,这个bug怎么能行?怎么解决?第一步:前端肯定从keep-alive入手 <keep-alive>...原创 2020-04-27 18:19:47 · 2951 阅读 · 0 评论 -
vant-ui swiperCell 需要触发实例的open方法实现点击出现滑动
需求:有时候,需求就是这么。。。。。。要求,点击swiper cell ,触发滑动展示,官方文档说明,可以调用实例的open方法,传参,‘left’ 'right’发现传参后,根本没用效果。查看官方ISSUS后,得到了解决办法。 handleClick(event) { event.stopPropagation(); this.$refs["cell"]...原创 2020-04-20 15:27:31 · 3278 阅读 · 9 评论 -
移动端1px解决方案
1、使用伪类 + transform<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-...原创 2020-04-07 17:47:54 · 209 阅读 · 0 评论 -
vue-quill-editor添加图片上传自定义压缩或修改为上传到服务器返回url地址
1、图片压缩方式:代码:<template> <v-container fluid class="white"> <v-form ref="form"> <v-text-field v-model="title" :error-messages="titleErrors" :cou...原创 2020-01-14 16:28:08 · 1746 阅读 · 0 评论 -
Vue实现封装message-box消息提示框
我是vuetify UI框架下进行的项目。不引入框架的话,BlogMessage.vue下的样式文件需要自己按照需求写。1、结构// src/components/MessageMessage文件夹下有两个文件,BlogMessage.vue和index.js文件2、 BlogMessage.vue<template> <div> <v-sna...原创 2020-01-10 16:48:33 · 4421 阅读 · 8 评论 -
vue单页面从详情页面返回列表页面,记录滚动条位置。
这个需求是很常见的。方法一:1、先定义路由时添加关键字{ path: "/", component: Layout, redirect: "/home", children: [ { path: "home", name: "Home", meta: { keepAlive: tr...原创 2020-01-08 18:27:48 · 1371 阅读 · 1 评论 -
移动端布局解决方案
step 1参考链接:https://www.jianshu.com/p/1f1b23f8348f【如何在Vue项目中使用vw实现移动端适配】通过上面的方案,可以构建一个基本的基于vm的移动端兼容性布局方案。除了上诉方案外,还有flexible、网易新闻等其他兼容方案。step 2一般上诉兼容方案,如果引入其他的第三方UI框架,会导致引入的框架样式有问题。这里譬如使用vux框架安装配...原创 2019-12-23 18:07:07 · 201 阅读 · 1 评论 -
web前端文件上传资料收集
1、vue+axios上传图片文件和数据2、萌新用vue + axios + formdata 上传文件的爬坑之路3、使用axios上传照片的方法 (推荐,正解)4、前端本地文件操作与上传(原理型的文章)5、new FormData() 前端上传文件图片到服务器 (提到了node.js,koa框架)6、前端分片点断上传的实现7、express,koa2等node处理前端上传图片并保存到...原创 2019-10-17 14:21:02 · 154 阅读 · 0 评论 -
web文件上传功能知识点
1、一步一步搭建一个图片上传网站(后台服务器用nodejs)2、文件上传那些事3、基于Vue + Node.js + MongoDB的图片上传组件,实现图片的预览和删除原创 2019-10-15 21:30:50 · 139 阅读 · 0 评论 -
移动端上下固定,中间自适应滚动布局方案
移动端对fixed定位支持不是很友好,有两种方案替代,absolute和felx方案一: absolute<body><div class="wrap"> <div class="header">header</div> <div class="main"> 弹性滚动区域 </div>...原创 2019-10-12 11:42:58 · 2195 阅读 · 0 评论 -
Node.js配合移动端开发前的准备
1、session持久化:nedb-session-store解决方案。https://blog.csdn.net/chaoyangsun/article/details/792408882、移动端适配:(1)手淘团队flexible.js布局原理:使用Flexible实现手淘H5页面的终端适配实践:flexible.js 移动端自适应方案(2)手淘团队vw适配如何在Vue项目...原创 2019-09-29 18:13:09 · 311 阅读 · 0 评论