- 博客(36)
- 收藏
- 关注
RSS订阅原创 uni-app 全端动态换肤方案 (Vue2 + uView 1.0)
uni-app 全端动态换肤方案摘要 本方案实现了H5、App和微信小程序的全端主题切换功能，采用CSS变量和JS API结合的方式： 技术实现： 页面元素使用CSS变量实现无感切换 原生控件通过JS API动态修改导航栏和底部菜单 解决了多端兼容性问题 核心结构： 主题配置文件定义颜色变量和原生控件配置 Vuex管理主题状态和切换逻辑 标准化图标资源命名规范 特色功能： 支持Tabbar图标动态替换 包含错误处理机制 提供主题样式注入方法 该方案实现了秒级主题切换，适用于Vue2+uView1.0技术栈的
2026-01-07 12:25:25
480
原创 uniapp_tabbar_safearea
UniApp H5 TabBar安全区适配终极方案，通过四层保护实现100%全平台兼容：1）在index.html设置viewport-fit=cover；2）App.vue全局CSS使用env(safe-area-inset-bottom)；3）JS自动检测不支持env()时fallback到34px；4）为TabBar添加safe-area-bottom类。该方案完美适配iPhone刘海屏、iOS Safari、微信浏览器、抖音WebView等多种环境，确保TabBar在任何设备上都不会被安全区遮挡。
2025-11-14 18:17:41
778
原创 UniApp 多个异步开关控制教程
本文介绍如何在 UniApp + uView1.0 + Vue2 中实现多个异步控制的开关组件。每个开关可独立切换并调用接口，切换时显示加载状态。教程包含完整代码示例，通过loading状态防止重复点击，controlStatus避免循环触发，并演示如何替换为真实接口调用。适用于需要独立控制多个设备开关的场景，支持异步状态更新和加载动画显示。
2025-11-08 18:37:11
326
原创 UniApp 全局使用字体教程
UniApp 全局字体设置指南 在 UniApp 项目中实现全局字体统一： 1️⃣ 将字体文件（如 YouYuan.ttf）放入 /static/fonts/ 目录 2️⃣ 在 App.vue 中通过 @font-face 注册字体 3️⃣ 设置全局样式 font-family: 'YouYuan' 4️⃣ 注意不同平台路径写法差异（H5用/static/，App用@/static/） 5️⃣ 遇到问题可排查路径、文件名或重新打包 6️⃣ 支持单独页面使用或全局应用 ✨ 完成设置后，项目所有页面将统一显示指
2025-11-08 10:30:47
1132
原创 AMapWX 微信小程序 SDK 方法详解 amap-wx.js
高德地图微信小程序SDK提供了多种地图相关功能，包括逆地理编码、天气查询、POI搜索、路线规划等。开发者可通过初始化AMapWX类并调用对应方法实现，如getRegeo获取地址信息、getWeather查询天气、getPoiAround搜索周边兴趣点等。各方法需要传递经纬度或城市名等参数，并通过回调函数返回结果数据。该SDK仅适用于微信小程序环境，使用前需申请高德专用Key并正确引入amap-wx.js文件。
2025-10-29 17:04:16
1205
原创 手把手教你使用uniapp对接facebook登录
本文详细介绍了在Facebook开发者平台注册账号并创建应用的完整流程。主要内容包括：1）注册开发者账号并创建新应用；2）完善应用信息，包括绑定证书和获取密钥散列；3）在Uniapp中配置Facebook登录插件；4）编写Facebook登录代码；5）注意事项，如密钥散列获取、测试账号权限等。文章特别强调了开发过程中可能遇到的常见问题及解决方法，如密钥散列验证、测试账号权限、网络环境要求等，为开发者提供了实用的参考指南。
2025-10-13 16:39:42
667
1
转载 iOS Universal Links(通用链接)详细教程
iOS Universal Links配置指南 Universal Links是iOS 9推出的应用跳转机制，通过HTTPS链接实现应用无缝跳转。配置步骤包括：1)获取Bundle ID和Team ID；2)在Xcode中添加Associated Domains；3)创建apple-app-site-association文件并部署到服务器.well-known目录下。测试时需重新安装应用，在Safari或备忘录中输入配置的域名即可验证。常见问题排查包括核对文件格式、应用是否首次启动等。该技术可实现应用与网
2025-10-10 16:58:47
522
原创 uniapp 开发实现全部页面添加水印方案
本文介绍了两种在Vue项目中添加水印的方法。第一种是全局混入方案，通过创建mixin文件并使用Vue.mixin全局注册，适用于全站水印；第二种是组件方案，创建独立的水印组件并在需要的页面局部引入，适合个别页面使用。两种方案均实现了文本水印效果
2025-07-30 16:55:43
690
原创 uiniapp uview Slider 滑动选择器 在弹框中使用异常，无法正常滑动解决方案
滑动选择器在弹框中使用时容易出现宽度获取异常问题，导致滑动失效。解决方案是：在弹框显示时延迟渲染内容，确保选择器能正确获取宽度。具体实现方法是为弹框内容添加显示开关，弹框打开前隐藏内容，打开后延时400ms再显示，这样滑动选择器就能正常工作了。该方案适用于uView等多种滑动选择器组件。
2025-07-30 15:20:29
427
原创 uniapp uview Switch 开关选择器 实现开关异步控制
本文展示了如何使用uView的Switch开关选择器结合接口请求实现状态控制。代码示例通过watch监听开关状态变化，在请求过程中使用loading状态防止重复操作，并通过controlStatus变量避免循环触发。方法getRestultFromServer模拟异步请求，最终根据后端响应更新开关状态。该方案解决了开关状态与接口请求的同步问题，确保UI状态与业务逻辑的一致性。
2025-07-30 14:43:45
272
原创 uniapp uview input开发技巧-被禁用的输入框搜索框如何触发点击事件
本文探讨了在禁用状态下如何触发搜索框点击事件的问题。作者发现uView搜索组件在disabled状态下仅点击图标区域才能触发事件，尝试将click事件绑定在外层view标签仍无法解决。最终通过给搜索框添加CSS属性pointer-events: none成功实现全区域点击触发。该方法同样适用于原生input标签，有效解决了禁用元素的事件穿透问题，为类似场景提供了实用的解决方案。
2025-07-29 18:33:51
408
原创 git 的基本使用 gitHub基本使用(个人学习记录)
安装完git之后第一件事就是设置自己的用户名字和邮件 因为通过git 对项目进行管理的时候需要使用这些基本信息,记录是谁对项目进行了操作。当对已经提交的文件进行修改后 该文件的此次修改还没有放到暂存区 查询状态会发现 红色M 表示内容被修改但没有被放到暂存区。git status --short 或者 git status -s 精简方式显示文件状态。git add . 一次提交多个文件 一次性将新增和修改文件加入暂存区。git checkout -b 分支名称 创建并切换到新分支。
2023-06-24 22:48:18
253
原创 三种css 文本处理方式
3.最后使用text-overflow: ellipsis设置超出内容为省略号。2.然后使用white-space: nowrap设置内容不换行；1.使用overflow: hidden把超出的内容进行隐藏；
2023-06-24 10:45:05
220
原创 page.route获取当前页面路由
page.$getAppWebview() 获取当前页面的webview对象实例page.route 获取当前页面的路由
2022-06-14 09:53:13
1073
1
转载 处理html中的换行字符“↵”
1.textarea赋值直接把后端返回文本类型通过v-model绑定给textarea，就会有默认的换行，但是问题是textarea可能会在样式上有所不同，他不能随内容高度增加textarea高度实现自适应(可以通过js实现，比较麻烦)，然后就有了第二种方法2.使用v-html输出文本<div v-html="value.replace(/(\r\n|\n|\r)/gm, '<br />')"></div>“↵”在html中会识别别为\r,\n等转义字符，所以需
2022-05-31 11:05:17
667
原创 navigationBarTextStyle动态修改状态栏颜色
手机状态栏就是这个区域近期项目有一个需求 ， 手机状态栏是需要进行动态修改颜色的 虽然他也就只有两个取值，一个白色一个黑色，翻阅文档 ，uniapp和微信小程序都写了相关的在页面动态修改的方法 ，但是代码写上去却不生效。onPageScroll(e) { if (e.scrollTop > 360) { this.isTopBg = true wx.setNavigationBarColor({ frontColor: "#000000", }) } else
2022-05-28 14:07:36
7686
2
原创 uniapp 微信小程序 去除button默认样式
一般情况下 我们需要去掉的默认样式就是button按钮的背景和边框.btn{ width: 50%; color: #008DF8; text-align: center; border: none; border-radius:0; background-color:transparent; }此时你会发现 按钮 的边框并没有去掉 ，通过控制器定位到这个按钮的边框样式可以看到 ，这个边框线是通过伪元素实现的， 我们只需要多加一个处理即可将这个边框线去除.btn::aft
2022-05-23 11:21:31
3933
原创 uniapp判断当前运行环境 app h5 微信小程序 百度小程序
hbuilderX最新版本现在已经支持在代码中获取当前所处环境仅3.4.10+版本以上才支持，如果您的hbuilderX版本不是这个版本的需要先升级一下版本 hbuilderx下载选择3.4.11及以上版本const type = uni.getSystemInfoSync().uniPlatformconsole.log(type) // app uniPlatform 可取值如下：值生效条件appAppwebH5mp-weixin微信小程序mp-
2022-05-21 16:26:50
13335
3
转载 git小乌龟，svn代码托管
1.先下载git，按照相应的系统，https://git-scm.com/downloads，然后，一直next即可完成安装
判断当前页面是不是第一个，获取当前页面相关信息，多语言切换刷新，跨页面修改数据
2022-04-22 10:27:44
4241
原创 微信开发者工具H5网页调试设置跨域
桌面应用鼠标右键 > 属性 > 目标后添加 –disable-web-security --user-data-dir后缀开始处不要忘记一个空格
2022-03-23 14:23:44
2193
1
原创 hbuilder报错npx browserslist@latest --update-db
hbuilder X 启动项目报错Browserslist: caniuse-lite is outdated. Please run:npx browserslist@latest --update-db尝试 在项目目录下执行npx browserslist@latest --update-db还是不行解决方案 ：HBuilderX的安装目录找到HBuilderX/plugins/uniapp-cli 运行npx browserslist@latest --update-db...
2022-03-07 14:37:00
5023
原创 JS返回浏览器历史第一页
需求: 不管打开多少页面，如果页面出现了错误，就要返回第一页。然后偶然间发现window.history属性含有length属性。historyLength =window.history.length;window.history.go(-(historyLength -1));这样就成功了。
2022-02-26 15:33:19
814
1
原创 HTML5经典面试题
html5经典面试题1.html5新增标签布局标签header section footer article aside nav<header>头部</header><nav>导航栏</nav><article>文章</article><aside>侧边栏</aside><section>主题</section><footer>脚部</foot
2020-09-10 13:29:12
335
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人