uniapp开发h5
文章平均质量分 55
柑橘乌云_
希望我的博客,能帮你解决学习或工作中所遇到的问题
展开
-
uniapp h5 touch事件踩坑记录
经过很久的排查发现,是uniapp在h5项目运行时给一个表情加了position。众所周知如果给悬浮球设置定位,并且其祖先元素并未设置定位,那么悬浮球是相对body来定位的。但是uniapp给body内其中一个元素设置了定位,那么悬浮球的参照物就改变了。然后监听悬浮球的touch事件,从事件对象中拿到clientY和clientX赋值给悬浮球的left和top属性。注意鼠标相对悬浮球的位置,应该就是左上角,因为left和top属性是从左上角作为起点的。这里就不贴啦,有很多解决办法,难不倒各位程序猿!原创 2024-03-28 17:33:55 · 595 阅读 · 0 评论 -
uniapp开发h5,引入微信开放标签实现h5跳转小程序功能,全网最全最细踩坑记录
首先需要在项目中引入微信的sdk,具体引入方式详见我写的另一篇文章,里面包含了引入sdk以及配置wx.config的详细教学以及踩坑记录。如果引入完微信sdk的前提下接下来就是根据微信文档提供的demo来引入开放标签debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印appId: '', // 必填,公众号的唯一标识timestamp: , // 必填,生成签名的时间戳。原创 2024-03-26 17:23:58 · 1292 阅读 · 0 评论 -
uniapp优化h5项目-摇树优化,gzip压缩和删除console.log
安装插件webpack和compression-webpack-plugin。compression-webpack-plugin插件。勾选摇树优化,打包删除死代码。原创 2023-11-18 13:51:22 · 1253 阅读 · 0 评论 -
uniapp的Vue2,Vue3配置跨域(proxy代理)
【代码】uniapp的Vue2,Vue3配置跨域(proxy代理)原创 2023-11-18 12:24:22 · 961 阅读 · 0 评论 -
uniapp开发h5 监听用户物理返回键 类似拼多多返回后弹窗
在当前vue页面(A页面)加载时往浏览器历史里备份一份当前的url地址(B页面),此时用户点击返回,就会从B页面跳到A页面,由于这两个页面地址一致,就会产生点击回退却没有效果的错觉。h5既然监听不到物理返回键,那么用户点击了物理返回键自然会路由返回上一页,那么我们监听路由,由于路由是uni自己封装的,我测试的项目是hash路由,所以我监听了onhashchange事件 ,然后由于。如果想禁用一个页面的返回操作,只需要在这个页面的历史记录中写入大量的历史。详情页:/pages/detail/detail。原创 2023-10-25 10:47:50 · 1536 阅读 · 0 评论 -
移动端web调试工具vConsole使用详解
是框架无关的,可以在 Vue、React 或其他任何框架中使用,类似于微信小程序体验版打开时候vConsole绿色按钮。简介:平时在web应用开发过程中,我们可以console.log去输出一些信息或者看接口返回的信息及接口性能等情况,但是在移动端,也就是在手机上,我们是看不到的。这种情况下,可以选择使用alert弹出一些信息,但是这种方法不怎么方便,也会阻断JS线程,导致后面的线程都不执行。也影响调试体验。第三方插件:一个轻量、可拓展、针对手机网页的者调试面板。诞生功能特性。原创 2023-10-21 17:25:26 · 2837 阅读 · 0 评论 -
uniapp开发h5引入第三方js(sdk)
起初以为是在原有的index.html基础上再新建一个html文件,最后发现不是,而是赋值文档里面的hmlt模板基础代码覆盖之前的index.html中的所有代码。在manifest.json里配置"template": "index.html" 就好啦。使用文档里的html代码覆盖,并通过script标签引入第三方js。原创 2023-10-20 14:07:25 · 2390 阅读 · 0 评论 -
h5的扫一扫功能 (非微信浏览器环境下)
【代码】h5的扫一扫功能 (非微信浏览器环境下)原创 2023-10-19 14:13:55 · 1315 阅读 · 0 评论 -
uniapp开发微信小程序,webview内嵌h5,h5打开pdf地址,解决方案
h5 和pc页面 都需要配置业务域名,但是读到这里,大家就有疑问了,不就是多嵌套了一层页面然后还是iframe嵌入的pdf吗,对的!)但是众所周知,微信小程序内嵌webview的域名是需要配置业务域名的,以及该域名内的iframe网址也是需要配置业务域名,那么就没办法配置这个oss地址为业务域名。根据公司要求,让我写一个h5,后续会嵌入到合作公司的微信小程序的webview中,如果是自己公司微信小程序,可以采取先下载下来pdf,然后通过wx.openDocument,进行单纯的预览操作,这个可以根据这个。原创 2023-10-19 14:10:54 · 2860 阅读 · 0 评论 -
unapp项目发布h5 详细操作流程以及注意事项 (hash模式)
接下来点击hbx上面的 发行====》网站-PC Web或手机H5(仅适用于uni-app)(H)首先需要在manifest.json文件中的web配置中。此时查看控制台会显示打包后的存放路径。接下来就直接给后端同学就好了。原创 2023-10-16 14:55:53 · 1098 阅读 · 0 评论 -
uniapp开发h5 调用微信sdk 全网最全指南!!!! 血泪史!!!
场景:公司需求是在h5调用扫一扫来识别条形码,经调研发现使用微信sdk是最好的方式。技术栈:uniapp、微信sdk版本:1.6.0先贴(踩的所有坑文档里是一句都不提!!!麻蛋)遇到的问题先抛出来:1.通过后端同学获取调用微信sdk所需的签名过程中,遇到的跨域问题2.使用微信sdk前提必须是微信容器,换句话说就是微信浏览器打开,才能使用微信sdk3.如何在开发本地环境去测试微信sdk的调用情况4.在微信容器使用微信sdk报错,config报错:config:invalid signature。原创 2023-09-21 14:47:16 · 7482 阅读 · 15 评论 -
uniapp开发h5 遇到一个刻度尺的需求 实现记录
遇到的难点:因为项目需求是不仅要滑动这一个交互,还多了一个加减号的按钮,经过查看源码发现,new SlideRuler 用一个变量接收,然后通过这个变量就可以访问class类中的方法,关键类方法是dreawCanvas方法,所以我在点击加减按钮后,除了让value 加加减减,然后需要将这个加加减减后的值重新赋值给 option的currentValue,然后再调用dreawCanvas重新渲染canvas。实现这个功能使用的是github上找的一个库 叫slide-ruler。第三步:建议阅读这个。原创 2023-09-19 11:45:43 · 401 阅读 · 0 评论 -
uniapp开发h5,修改原生导航栏,自定义按钮
关于修改原生导航栏样式的。原创 2023-09-18 14:23:38 · 1079 阅读 · 0 评论 -
uniapp开发h5,解决项目启动时,Network: unavailable问题
网上搜了很多,发现都说是要禁用掉电脑多余的网卡,这方法我试了没有好,不晓得为啥子,之后在网上看,uniapp的devServer vue2的话对标的就是webpack4的devserver(除了复杂的函数配置项),所以我去查了webpack4文档,发现一个属性很合适,这里是。之后就可以正常开启,正常局域网访问了。原创 2023-09-15 09:41:46 · 1564 阅读 · 0 评论