IOS/Android/移动端
文章平均质量分 81
IOS/Android/移动端
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
-
为个人网站提供 微信扫码登录 能力
极大地简化了通过接入微信开放平台实现扫码登录的复杂流程,使非企业认证资质的个人 PC 网站也可以轻松使用微信扫码登录功能,为个人开发者及其用户带来方便,节约时间。转载 2024-08-05 09:11:41 · 44 阅读 · 0 评论 -
个人开发者 提供微信支付 能力
个人开发者可以通过多种方式提供微信支付能力。原创 2024-08-05 09:10:51 · 188 阅读 · 0 评论 -
APP如何与H5通信?
window.postMessage中的window指的是你想发送跨域消息的那个窗口(你需要通信的目标窗口),而不是自身窗口的window父页面中:父页面向子页面发送跨域信息,window就是在父页面中嵌入的iframe指向的子页面的window,即:iFrame.contentWindow子页面中:子页面想父页面发送跨域信息,window就是父页面的window,在这里因为子页面是嵌入到父页面中的,对于子页面来讲,window就是top或者parent。转载 2024-08-01 14:29:31 · 37 阅读 · 0 评论 -
小程序 如何申请长期订阅(设备消息)?
要给用户发送消息提醒的话,需要申请订阅消息。订阅消息分一次性订阅与长期永久性订阅。对于公众号而言,大家先登录公众号的管理平台,找到下面图片所示位置,点击进去。新增加下面两个分类即可,如果原来的分类满了,就删除一个再添加即可。对于小程序而言,大家登录小程序管理平台后,点开下面的网址。一次性订阅没有实际意义,用户订阅一次就只能发送一次。这样在订阅消息管理那里,就有长期的订阅模板选择了。进去后,新加一个分类,分类如下图所示。这样就可以选择长期订阅模板功能了。选择模板后,就复制相应的模板ID。转载 2024-06-20 09:36:56 · 2269 阅读 · 4 评论 -
你知道移动端适配吗?
自适应:根据不同的设备屏幕大小来自动调整尺寸、大小响应式:会随着屏幕的实时变动而自动调整,是一种更强的自适应。转载 2024-05-30 09:01:31 · 26 阅读 · 0 评论 -
一些常见的移动端适配方案,你了解吗?
在项目中,如果设计师要求某一场景不做适配,需为固定的宽高或大小,这时我们就需要利用。方案就是利用了这一点,根据不同的屏幕尺寸,来设置不同的根元素。:初始缩放比例,即当浏览器第一次加载页面时的缩放比例。方案是阿里早期开源的一个移动端适配解决方案,引用。是指视窗、视口,即浏览器用来显示网页的那部分区域。新增的一个相对单位,它是一个相对于页面根元素。:允许浏览者缩放到的最大比例,一般设为1.0。的大小,以此来达到适配不同屏幕尺寸的目的。不一定能完全整除,因此有一定的像素差。中定义一遍不同的尺寸,代价有点高。转载 2024-05-28 09:14:29 · 46 阅读 · 0 评论 -
wx消息推送
什么是WxPusherWxPusher(微信推送服务)是一个使用微信公众号作为通道的,实时信息推送平台,你可以通过调用API的方式,把信息推送到微信上,无需安装额外的软件,即可做到信息实时通知。你可以使用WxPusher来做服务器报警通知、抢课通知、抢票通知,信息更新提示等。转载 2024-05-27 09:31:07 · 89 阅读 · 0 评论 -
uni-app中z-paging插件(上拉加载....)的使用
在template中,我们引入该组件,使用该组件的一个@query方法,该组件会将计算好的pageNo和pageSize两个参数传递到此方法中,我们比如带一个输入框,列表业务逻辑也是写在query方法中。在写移动端中,我们经常会遇到长列表,需要滚动的一些列表,在uni的插件市场中有一个插件,名叫做z-paging。写好之后,我们有搜索输入框,双向绑定了一个name字段,这时候我们给输入框添加一个change时间,发生变化时,我们去调用该组件的reload方法即可。看到大体介绍,我们动手写一写吧。转载 2024-05-23 08:40:27 · 993 阅读 · 0 评论 -
小程序如何实现消息订阅
这种需要用户自主订阅,否则发送失败优点:要求低(用户订阅就行)缺点:订阅有时效性消息条数有限制必须用户手动触发订阅长期模版消息无限制,但只对部分行业开放总体来说,要求低一些,但局限性也很强,适合下订单等操作使用。转载 2024-05-22 08:51:50 · 44 阅读 · 0 评论 -
移动端调试神器 Whistle
在前端开发中移动端开发技能必不可少。当我们遇到类似于这样的问题:移动端Canvas渲染失败微信获取openId回调页不匹配微信浏览器文件上传失败支付宝,微信H5支付域名校验不匹配生产环境BUG,dev,test环境无法复现当后端接口启用cors跨域时,本地环境无法访问Chrome模拟器和微信开发者工具等都无法完美复现我们遇到的问题,这时候我们需要用到whistle来实现真机调试。转载 2024-05-21 09:09:57 · 151 阅读 · 0 评论 -
Composition API 中的 Ref 和 Reactive
Ref()和reactive()用于跟踪其参数的更改。当你使用它们来初始化变量时,你向 Vue 提供了信息:“每当它们更改时,我希望你重新构建或重新评估依赖于这些变量的所有内容”。在下面的示例中,单击按钮后,personRef和都将更改其名称,但普通的 JS 对象person不会更改。它们的基本作用是使你的组件具有响应性(对更改做出反应)。Ref()和reactive()在开始时可能看起来非常相似,但它们的目的有点不同。在这个主题上没有好的编程实践,所以一切都取决于你和你的团队如何决定。转载 2024-05-10 08:41:41 · 18 阅读 · 0 评论 -
uniapp如何实现热更新逻辑
总结:不想自己开发逻辑的可使用官方插件,但后期费用什么的不好说(毕竟之前都是免费的),现在很多东西都收费了。主要是为了在有新版本发布的时候实时通知用户,下载新版本使用,防止出现问题。还要维护全局版本号即最低版本号的判断条件,还可以加入是否强制更新。无论是那种实现,都需要后台上传热更新包告诉APP,是否要更新。可以使用官方的热更新解决方案,这里主要讲述自己实现。包含版本号、下载链接、热更新链接、最低版本号。小程序热更新一般比较简单,各平台都支持。使用简单,无需太复杂的操作。界面美观,可直接使用。转载 2024-05-10 08:40:16 · 131 阅读 · 0 评论 -
uniapp如何实现热更新逻辑
现在热更新已经很普遍了,无论是游戏还是平常的 app 甚至在一些脚手架或者编辑器我们都可以看到他们或许表现不一致,但都有一个最终的效果,那就是能实时更新我们所需要的内容本篇主要讲述的是小程序的热更新以及APP 的热更新(谷歌应用市场应用未试验过)转载 2023-08-08 09:08:08 · 324 阅读 · 0 评论 -
滚动穿透问题探索
然后,当用户在模态框滑动的时候,得到其滑动过程中的y坐标值,当滑动过程中触点的clientY > stratY的时候表明滑动方向向下,在用户往下滑的过程 中,滑动距离为0则表明为用户的滑动位置为模态框的最顶部,此时就得到了用户滑动到模态框顶部的边缘条件。按照上面这样操作以后,模态框里边的内容是正常滚动的,触摸背景也不会随着滚动,这么看来,好像我们的问题已经成功的解决了,但是实际情况并没有 这么乐观,经过反复测试,发现当在模态框的顶部或者底部边缘随意滑动时,仍然能触发底部内容的滑动。转载 2023-08-07 09:01:01 · 54 阅读 · 0 评论 -
vh 存在问题?试试动态视口单位之 dvh、svh、lvh
简单再总结一下,本文通过 vh 在移动存在的问题入手,引出了规范新增的三大类新的和视口相关的单位。大视口(Large Viewport)小视口(Small Viewport)动态视口(dynamic viewport)它们的出现,极大的弥补了之前 vh/vw 等视口单位存在的问题。CSS 的更新迭代一直在快速持续,很多内容还是有必要不断了解学习,在不久的将来就能很快应用在业务中。此外,除了动态视口外,其实 CSS 还更新了与容器大小相关的相对单位 -- 譬如cqw和cqh。cqw。转载 2023-04-11 10:05:24 · 590 阅读 · 0 评论 -
2022年我的面试万字总结(小程序、git)
都是用来描述页面的样子大体相同,但小程序之间this.data的属性是不可以同步到视图的,必须调用this.setData()方法小程序本质就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口;它的架构,是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现; 它从技术讲和现有的前端开发差不多,采用JavaScript、WXML、WXSS三种技术进行开发;功能可分为webview和APPService两个部分:webv转载 2023-02-24 10:24:37 · 193 阅读 · 0 评论 -
Web开发的拖放实例练习
Demo地址:https://codepen.io/gabrielferreira/pen/jMgaLe。Demo地址:https://codepen.io/hexagoncircle/pen/pjLewv。Demo地址:https://codepen.io/nikkipantony/pen/qoKORX。Demo地址:https://codepen.io/larrygeams/pen/udorw。Demo地址:https://codepen.io/larrygeams/pen/GuaEy。转载 2023-02-22 09:36:44 · 76 阅读 · 0 评论 -
响应式布局,你需要知道的一切
我们从响应式布局的设计角度出发,介绍了响应式的设计理念,前置知识(像素,DPR,视口等),相对单位(em,rem,百分比,vw,vh等),布局方案(FlexBox,Gird)以及媒体查询等技术,其中不乏很多前辈们的最佳实践,作为开发者我们应该用这些经验,以更好地优化不同尺寸大小设备的用户体验。响应式布局中,常用的设备特征有,我们期望页面可以根据用户的设备环境,比如系统,分辨率,屏幕尺寸等因素,进行自发式调整,提供更适合当前环境的阅读和操作体验,对已有和未来即将出现的新设备有一定的适应能力。转载 2023-02-16 10:06:53 · 109 阅读 · 0 评论 -
uni-app关闭系统侧边滑动返回的方法总汇
打开manifest源码视图,app-plus下配 "popGesture": "none"iOS上是否支持屏幕左边滑动关闭当前页面。设为none则不响应左滑动画。在pages.json该页面加入"popGesture": "none"转载 2023-02-15 09:55:41 · 412 阅读 · 0 评论 -
我们如何从 Wxml2Canvas 迁移到 Painter
项目使用库来生成分享海报。这个库的功能就是将 Wxml 转换成 Canvas,并最终生成一张图片。但是,这个库非常不稳定,经常会出现各种奇怪的 BUG,只能说勉强能用。。因此,我们一直希望能找到一个更好的替代方案。在社区搜索后,我们发现非常不错。然而,它与 Wxml2Canvas 的使用方式有很大的差异,我们的项目中有二十多个地方使用了 Wxml2Canvas,所以迁移起来并不容易。但 2022 即将结束,我们希望能在最后时刻做点事情来让自己找回一丝慰藉,所以才有了这篇文章。转载 2023-02-15 09:52:59 · 248 阅读 · 3 评论 -
vh 存在问题?试试动态视口单位之 dvh、svh、lvh
简单再总结一下,本文通过 vh 在移动存在的问题入手,引出了规范新增的三大类新的和视口相关的单位。分别是:大视口(Large Viewport)小视口(Small Viewport)动态视口(dynamic viewport)它们的出现,极大的弥补了之前 vh/vw 等视口单位存在的问题。CSS 的更新迭代一直在快速持续,很多内容还是有必要不断了解学习,在不久的将来就能很快应用在业务中。此外,除了动态视口外,其实 CSS 还更新了与容器大小相关的相对单位 -- 譬如cqw和cqh。cqw。转载 2023-02-13 09:47:29 · 627 阅读 · 0 评论 -
12 个常见移动端 H5 与 Hybrid 开发问题
最终我在。转载 2023-02-09 09:55:10 · 537 阅读 · 0 评论 -
H5如何与原生App(ios,安卓,RN)通信?
由于安卓和ios的处理方式不一样,所以我们要分开处理先贴上判断访问终端的代码//判断访问终端return {trident: u.indexOf('Trident') > -1, //IE内核presto: u.indexOf('Presto') > -1, //opera内核webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核。转载 2023-01-16 17:33:12 · 1876 阅读 · 0 评论 -
响应式布局,你需要知道这些
2011年,Google 发布了 Android 4.0,在经历了 Cupcake,Donut,Froyo 等多个甜品名称版本的迭代后,安卓终结了 Symbian(塞班)的霸主地位,迅速占领了手机市场跃居全球第一。同年,腾讯发布了微信开始进军移动互联网,阿里也在 2013 年宣布 ALL IN 无线,随着智能设备的普及和移动互联网时代的到来,这个词开始频繁地出现在 Web 设计和开发领域,作为一名优秀的前端攻城狮,。转载 2023-01-13 17:50:11 · 179 阅读 · 0 评论 -
非常详细的Taro入门教程
得益于与React保持一致API的特性,Nerv可以无缝兼容到React的相关生态,例如react-router,react-redux,以及使用React开发的组件,所以对于旧的React项目,可以无痛地将React替换成Nerv。可以看出小程序和 Web 端上组件标准与 API 标准有很大差异,这些差异仅仅通过代码编译手段是无法抹平的,例如不能直接在编译时将小程序的 直接编译成 ,因为他们虽然看上去有些类似,但是他们的组件属性有很大不同。转载 2022-09-30 10:27:27 · 1952 阅读 · 0 评论 -
实现Web端自定义截屏
当客户在使用我们的产品过程中,遇到问题需要向我们反馈时,如果用纯文字的形式描述,我们很难懂客户的意思,要是能配上问题截图,这样我们就能很清楚的知道客户的问题了。那么,我们就需要为我们的产品实现一个自定义截屏的功能,用户点完"截图"按钮后,框选任意区域,随后在框选的区域内进行圈选、画箭头、马赛克、直线、打字等操作,做完操作后用户可以选择保存框选区域的内容到本地或者直接发送给我们。转载 2022-09-30 10:23:23 · 766 阅读 · 0 评论 -
移动端开发H5调试方案
莫名奇妙的白屏,适合页面无异常日志,同时无请求发送,问题集中在单一页面的情况。上面说了很多,但是实际开发过程中,我们不会等上线了才去验证兼容性,所以你可能需要提前「真机调试」。这时候,「代码注释法」将是你的最佳选择,逐行去注释可以代码,直到定位问题。说了这么多钟方案,这里总结一下各个方案的适用场景,根据不同的场景去选择最佳的调试方案,这样才能更快速的输出,,但是额外的第三方类库如果有不兼容的语法,低版本的移动设备就会异常。看起来很完美,但是有个小缺点:网络请求,需要刷新页面,可是很多内嵌的。转载 2022-09-28 09:57:02 · 484 阅读 · 0 评论 -
Vue.js开发移动端经验总结
layoutviewport布局宽度,就是网页的宽度visualviewport可是宽度,就是浏览器窗口的宽度,这个值决定了我们手机一屏能看到的内容;visualviewport和layoutviewport的大小关系,决定了是否会出现滚动条,当visualviewport更大或者刚好等于layoutviewport时是不会出现滚动条的。idealviewport为浏览器定义的可完美适配移动端的viewport,固定不变,可以认为是设备视口宽度device-width。转载 2022-09-26 09:40:19 · 416 阅读 · 0 评论 -
H5 移动端调试全攻略
随着移动设备的高速发展,H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧,修 Bug 于无形。转载 2022-09-22 10:42:30 · 642 阅读 · 0 评论 -
小程序如何生成海报分享朋友圈
项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。转载 2022-09-22 10:36:15 · 2350 阅读 · 0 评论 -
H5 移动端调试全攻略
随着移动设备的高速发展,H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧,修 Bug 于无形。转载 2022-09-21 10:16:15 · 2407 阅读 · 0 评论 -
H5 移动端调试全攻略
随着移动设备的高速发展,H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧,修 Bug 于无形。转载 2022-09-16 10:28:49 · 799 阅读 · 0 评论 -
Web移动端实现自适应缩放界面的方法汇总
实现没办法,我后面尝试,通过userAgent对ipad机型(ipad、macintosh)特殊处理,直接获取所有包含了文字的div、p、span等元素,放大font-size。position:fixed,宽高显示有问题 -- 设置固定宽度,比如375px,固定高度;发现可以处理,没毛病!但是也有些缺陷,没办法在一开始处理字体,因为元素还没有初始化,而等界面加载后再刷字体大小,界面会闪现一次。但是坑来了:真机有问题,发现在ipad的safari上,页面是放大了,但是字段根本就没变化!转载 2022-09-14 10:55:49 · 3918 阅读 · 0 评论 -
初步理解 WebView
详细了解这些 bridge 的内容超出了本文的范围,但要点如下:为 Web 编写的相同 JavaScript 不仅可以在 WebView 中运行,还可以调用原生 API 并帮助你的应用更深入地集成酷炫的系统级功能,如传感器,存储,日历/联系人等。事实上,这些应用所做的唯一原生操作就是托管 WebView,而 WebView 又加载 Web 内容和用户交互的所有 UI。如果你必须使用纯原生应用,不仅需要为构建应用的每个平台更新项目,你可能必须经历耗时的应用审核过程才能使你的更新在所有的应用商店获取到。转载 2022-09-07 10:51:54 · 2699 阅读 · 0 评论 -
前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
首先先聊聊响应式设计,这个与移动端开发有着密切的联系。响应式设计即是 RWD,Responsive Web Design。这里百度或者谷歌一下会有各种各样的答案。这里一段摘自知乎上我觉得很棒的一个答案:什么是响应式布局设计?(地址:https://www.zhihu.com/question/20976405)根据维基百科及其参考文献,理论上,响应式界面能够适应不同的设备。转载 2022-09-05 09:32:32 · 1147 阅读 · 0 评论 -
中后台管理系统如何更优雅的支持移动端
因此,仅仅依靠css的动态响应,只是让PC端的页面在Mobile端可用,但远远达不到原生Mobile端的效果。我们知道,市面上大多数中后台管理系统,都是优先适配 PC 端,然而Mobile端交互体验却不佳,处于勉强可用,但不好用的阶段。可以打开F12开发者工具,将页面调整为Mobile尺寸,就可以进入Mobile布局,从而体验原生Mobile的交互效果。效果:只需要一套代码,同时兼容Mobile端和PC端,并且Mobile端达到原生交互体验。:根据当前页面尺寸决定采用何种布局:Mobile布局/PC布局。原创 2022-08-23 09:52:06 · 3925 阅读 · 0 评论 -
本机号码一键登录原理
中国移动中国电信中国联通很多APP的目前都支持“本机号码一键登录”功能。本机号码一键登录是基于运营商独有网关认证能力推出的账号认证产品。用户只需一键授权,即可实现以本机号码注册/登录,相比先前的短信验证码流程体验更优。目前市面上有很多厂商提供三网验证的服务,只不过是对三大运营商的包装。要了解具体的原理可直接看三大运营商相关的介绍。...转载 2022-08-09 10:00:37 · 2672 阅读 · 0 评论 -
手写flexible.js的原理实现,我终于明白移动端多端适配
就这么简单的两步就实现了移动端的适配。转载 2022-08-09 09:25:35 · 348 阅读 · 0 评论 -
一文深入了解 Hybrid 的实现原理
简单来讲,hybrid技术就是通过webview和 file、schema协议来实现页面的加载、渲染、显示,以及与native、服务端之间的通信。hybrid不是完美的,是否使用取决于你的实际应用场景和需求。hybrid技术 https://blog.csdn.net/yexudengzhidao/article/details/82811185WebView加载页面的两种方式——网络页面和本地页面:https://www.cnblogs.com/zxxiaoxia/p/6831085.html。...原创 2022-08-09 09:24:09 · 1841 阅读 · 0 评论 -
从一个 bug 中延伸出 canvas 最大内存限制和浏览器渲染原理
为什么要学习原理(不管是编程领域还是其他领域),因为世间无穷的现象都可以用有限的原理解释,如果只停留于现象就会陷入经验主义。httpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttps。......转载 2022-07-22 14:02:11 · 538 阅读 · 0 评论