- 博客(110)
- 收藏
- 关注
RSS订阅原创 cocos多手机端简单适配
摘要：在Canvas画布绑定的TypeScript脚本中添加this.node.scale = cc.winSize.height/750代码，可实现基于屏幕高度的自适应缩放。该语句以750为基准高度，通过计算当前窗口高度与基准值的比例来动态调整节点缩放比例，确保UI元素在不同分辨率设备上保持相对一致的显示效果。这种适配方式常用于Cocos Creator游戏开发中的多分辨率适配场景。
2025-12-21 10:51:59
84
原创 cocos拆包
摘要：该代码片段展示了如何在Cocos Creator中从资源包(bundle)加载背景音乐。首先创建res2资源包，然后通过assetManager加载该bundle并获取音频文件。加载成功后创建AudioSource组件播放音频，设置为循环播放并存储为全局变量globalBGM。包含错误处理机制，会在加载失败时输出错误日志。
2025-12-11 17:24:32
93
原创 4399小程序banner广告和插屏广告，激励广告
本文介绍了移动端游戏广告的实现方案，包含Banner广告和插屏广告两种形式。Banner广告通过获取设备像素比计算广告位尺寸，实现底部居中显示，并设置2分钟定时刷新机制。插屏广告创建实例后添加加载、关闭和错误事件监听，采用失败重试机制，每6分钟展示一次。两种广告类型都提供了完整的生命周期管理，包括事件监听/取消、展示控制和错误处理等功能，为游戏开发提供了标准的广告集成方案。
2025-12-11 17:21:13
121
原创 抖音小程序上传：小游戏必须接入侧边栏复访能力，否则将被平台审核拒绝，请接入该能力后重新上传代码，要求必须使用 tt.navigateToScene 调用。
文章摘要：该代码片段展示了如何在JavaScript文件中(如game.js)插入一段条件跳转逻辑。代码使用if(false)包裹了一个场景跳转函数tt.navigateToScene，其中包含跳转到"sidebar"场景的配置，并定义了成功和失败的回调函数。由于条件为false，这段代码实际上不会执行，但保留了跳转功能的实现示例。
2025-12-10 13:46:48
95
原创 小游戏必须接入侧边栏复访能力，否则将被平台审核拒绝，请接入该能力后重新上传代码，要求必须使用 tt.navigateToScene 调用。
文章摘要：介绍了在Cocos打包项目中通过修改game.js文件实现侧边栏跳转功能的方法。关键代码展示了使用tt.navigateToScene方法跳转到预定义的'sidebarEntry'场景，并传递source参数，同时包含成功和失败的回调处理。最后提示该修改可直接上传通过审核。全文约100字，简明扼要地说明了技术实现要点。
2025-12-07 15:00:29
98
原创 4399广告位添加
这段代码展示了如何在游戏中实现激励视频广告功能。主要包括：1) 创建广告实例并预加载；2) 处理广告加载、展示和关闭事件；3) 在用户完整观看后发放奖励；4) 错误处理和资源释放。关键点包括：广告展示成功后立即销毁实例释放资源，通过onClose回调判断是否发放奖励，以及提供按钮点击触发广告的示例。该实现考虑了广告加载失败时的重试机制，确保用户体验流畅。
2025-12-05 15:12:37
117
原创 抖音小游戏分享
摘要：该代码片段定义了一个分享功能模块，通过调用tt.shareAppMessage方法实现小程序分享功能。其中包含APPID常量定义和startShare函数，函数接收成功回调参数，在分享成功或失败时分别执行相应操作。代码展示了小程序分享功能的基本实现方式，包括模板ID配置、回调处理等核心逻辑。
2025-12-01 11:05:08
109
原创 H5 页面中实现返回时恢复滚动位置的功能
本文介绍了实现页面滚动位置记忆功能的代码方案。通过在onUnload生命周期中保存当前滚动位置到sessionStorage（带路由路径防冲突），在onLoad时读取并恢复位置（使用setTimeout确保DOM渲染完成）。同时提供了restoreScrollIfNeeded方法供手动调用恢复位置，操作完成后会自动清除缓存。该方案兼容不同浏览器环境，能有效提升用户体验。
2025-10-24 16:45:26
117
原创 高德地图vue页面距离当前位置多远
本文介绍了如何使用高德地图API在Vue项目中实现位置距离计算功能。通过安装@amap/amap-jsapi-loader并配置免费API密钥，开发者可以加载地图、获取用户位置、解析目标地址坐标，并计算出用户当前位置到目的地的距离（以米为单位）。文章提供了完整的Vue组件代码，包含地图初始化、位置获取、地址解析和距离计算的核心方法，以及响应式UI设计。组件采用现代化卡片式布局，支持加载状态显示，并在地图上标记目标位置。该方案适合需要展示位置距离信息的应用场景，如配送、导航等。
2025-10-20 15:32:37
239
原创 路由跳转回页面不刷新
摘要：该代码片段展示了Vue组件在路由进入时自动刷新的实现方案。通过beforeRouteEnter钩子函数，在组件实例化后调用refresh方法更新数据。同时使用Vue.mixin混入全局路由守卫，为所有组件自动添加进入路由时的刷新逻辑（当组件具有refresh方法时）。这种设计实现了页面数据的自动更新，提高了代码复用性，确保用户在导航到不同路由时都能获取最新数据。
2025-10-17 11:56:25
100
原创 scroll-view点击跳转到指定位置，scroll-into-view利用id跳转
代码实现了一个可滚动视图的ID跳转功能。通过scroll-into-view属性绑定toViewId变量，点击不同区域时修改toViewId值实现视图跳转。midToEndOfGoodsData方法实现了可重复跳转逻辑：当当前视图ID为"scrollYendOfGoods2"时跳转到"scrollYendOfGoods"，反之亦然，若都不是则默认跳转到"scrollYendOfGoods"。该功能适用于商品列表等需要快速定位的场景。
2025-10-09 10:23:20
132
原创 div全屏放大功能
【摘要】该代码实现了元素全屏显示功能：1.通过按钮点击触发screenMap方法；2.检测当前全屏状态，使用不同浏览器API（requestFullscreen/exitFullscreen等）实现全屏切换；3.维护fullscreen状态变量控制切换逻辑。代码兼容主流浏览器，包含Chrome(webkit)、Firefox(moz)和IE(ms)等前缀方法。使用时需为目标div设置特定ID（screenfullId2），点击按钮即可实现该元素的全屏/退出全屏切换。
2025-09-13 17:32:32
209
原创 智能识别地址弹窗
摘要：这段代码实现了一个智能地址识别的功能。前端通过点击事件触发识别弹窗，将用户输入的地址文本发送到后端API（https://wangzc.wang/smAddress）进行解析。后端返回解析结果后，前端分别将姓名、电话、详细地址和省市县数据填充到对应字段，并显示识别成功的提示。整个过程包含弹窗显示/隐藏、API请求和数据处理等交互逻辑。
2025-09-09 17:07:31
170
原创 添加地址页面，可以添加复制粘贴，自动识别地址的功能uniapp实现方式
该代码实现了一个地址识别功能，通过读取剪切板内容自动解析不同电商平台（拼多多、淘宝、京东）的地址信息。当检测到有效地址时，会弹出提示询问用户是否添加该地址，若确认则自动填充收件人、手机号、详细地址和所在地区等字段。代码包含三个解析函数分别处理不同平台的地址格式，并进行了必要的字段判断以确保数据完整性。
2025-09-08 11:38:36
373
原创 echarts图库
本文介绍了两种ECharts图表配置及Vue组件实现方法。第一部分展示了环形图和柱状图的配置代码，包括颜色设置、数据格式和样式调整。第二部分详细说明如何将ECharts封装为Vue组件，通过props接收数据参数，在mounted钩子中初始化图表，并实现响应式调整。组件支持点击事件跳转路由，提供了完整的模板、脚本和样式实现方案，便于在Vue项目中复用图表功能。
2025-09-04 21:26:48
163
原创 uniapp的上拉加载H5和小程序
本文介绍了小程序分页加载功能的实现方案。主要包含：1) 配置页面下拉刷新和上拉加载功能；2) 实现onReachBottom触底事件处理，通过页码控制数据请求；3) 使用防抖机制避免重复请求，通过isfinish标志位控制加载状态；4) 数据请求函数getCommodityList的实现，处理分页参数和响应数据；5) 前端页面展示，包括滚动视图、数据列表和加载状态提示；6) 优化方案包括防抖处理、加载状态管理和错误处理等。整个方案实现了流畅的分页加载体验，具备良好的性能和用户体验。
2025-09-04 11:53:15
554
原创 H5和小程序的支付功能实现
本文介绍了如何基于uni-app框架实现小程序和H5支付功能。代码展示了通过调用后端接口获取支付参数，并根据平台类型（小程序或H5）分别处理支付流程。小程序支付通过wx.navigateToMiniProgram跳转至微信小程序支付页面；H5支付则根据运行环境判断，微信内通过弹窗确认后跳转支付链接，其他环境直接在新窗口打开支付链接。支付完成后，小程序端会跳转至支付结果页。代码中还包含参数拼接、环境判断等实用方法，为移动端支付功能开发提供了完整实现方案。
2025-09-02 20:57:07
315
原创 支付成功页面
支付成功页面交互逻辑 摘要：该代码实现了一个支付成功页面，包含5秒倒计时自动跳转功能。主要逻辑包括： 显示支付成功状态和倒计时提示 5秒后自动跳转至课程列表页 支持手动点击立即跳转 包含错误处理机制，最大重试20次获取支付结果 页面离开时自动清除定时器 采用flex布局，包含160rpx的成功图标和文字提示 核心功能通过定时器实现倒计时，并提供完整的生命周期管理确保内存安全。
2025-09-02 10:14:18
221
原创 省市区三级联动选择器-组件
中国省市区三级联动选择器组件 该组件是一个基于Vue.js实现的中国省市区三级联动选择器，适用于需要选择地区信息的场景。 主要功能 三级联动选择：支持省、市、区三级联动选择，数据完整准确 数据管理：包含全国所有省份、城市和区县的数据 事件触发：提供选择变化、确定和取消等事件回调 UI自定义：可通过CSS样式自定义选择器外观 使用方法 导入组件和数据文件 绑定显示状态、当前选择值和事件处理函数 通过方法获取选择的地区信息 技术特点 使用picker-view实现流畅的滚动选择效果 采用响应式数据绑定，自动更新
2025-08-28 15:52:12
418
原创 uniapp的图片点击放大
本文展示了一个图片预览功能的实现代码片段。通过v-for指令循环渲染图片数组，每张图片绑定点击事件调用previewImage方法。该方法使用uni.previewImage API实现图片预览功能，传入当前点击图片的索引和整个图片数组作为参数，支持查看当前图片和滑动浏览其他图片。这是一个简洁的图片预览组件实现方案，适用于需要展示多张图片并提供预览功能的移动端应用场景。
2025-08-28 11:08:12
109
原创 uniapp返回上一级页面并刷新
本文介绍了如何在uni-app中使用uni.navigateBack和uni.$emit实现页面返回时的数据刷新功能。当从当前页面返回时，通过uni.$emit触发'refresh'事件，携带refresh参数；上一页面通过uni.$on监听该事件，在onShow生命周期中判断条件并执行refreshData方法刷新数据，最后调用uni.navigateBack完成返回操作。这种事件总线机制实现了跨页面通信，确保页面返回时数据能及时更新。
2025-08-26 09:54:51
248
原创 uniapp的图片上传
这篇文章介绍了一个微信小程序订单退款功能的前端实现。代码部分主要包含图片上传、表单提交等核心功能：1) 使用uni.chooseImage选择最多3张图片并显示；2) 通过uni.uploadFile实现图片上传；3) 提交退款请求时包含订单ID、退款说明和图片数据。视图部分展示了已选图片和上传按钮的界面布局。整个功能模块实现了从图片选择到表单提交的完整退款流程。
2025-08-25 18:33:42
94
原创 uni地图选择展示和地图的展示导航
摘要：本文介绍了在uni-app中实现地图定位和导航功能的方法。核心功能包括：1）通过uni.chooseLocation获取用户位置信息；2）处理位置授权流程，包括检测授权状态、引导用户授权；3）使用uni.openLocation实现地图导航，并计算当前位置与目标位置的距离。实现中需注意配置manifest.json的位置权限，并使用Haversine公式计算两点间距离。代码提供了完整的授权检测、失败处理流程，以及通过经纬度计算距离的辅助函数。该方案适用于需要地图定位功能的微信小程序开发场景。
2025-08-21 16:46:50
248
原创 预约时间组件
摘要 本文展示了一个基于uni-app框架的时间选择器组件hbxwTimepicker的实现代码。该组件具有以下功能： 支持选择日期和时间范围（可设置最小/最大小时） 提供多种配置选项：标题、副标题、日期范围、快捷选项等 包含动画效果和遮罩层 支持自定义插槽（标题和按钮区域） 响应式设计，适配不同屏幕尺寸 组件通过v-model控制显示/隐藏，并通过change事件返回用户选择的时间数据。实现包含了完整的模板结构、JavaScript逻辑和SCSS样式代码。
2025-08-07 16:31:16
273
原创 暂无数据组件
摘要：本文介绍了一个名为common-empty-page的Vue组件，用于展示无数据时的空页面状态。组件提供两种尺寸模式（常规/小型），通过isSmall属性切换，默认显示"暂无数据"提示文本和图标。样式部分使用rpx单位适配不同屏幕，包含容器布局和图标尺寸的响应式设计。同时展示了配套的imgFiles.js文件，该文件集中管理系统中的图片资源路径，采用哈希命名方式管理各类业务图标，包含登录、首页功能模块、数据看板等多个场景的图片资源。组件与图片资源管理相结合，形成一套完整的空状态展示
2025-08-07 14:48:39
200
原创 微信小程序input错乱问题,兼容问题处理
摘要：本文展示了如何在微信小程序中使用scroll-view包裹input组件，实现昵称输入功能。代码示例包含一个带v-model绑定的input输入框，用于获取或输入用户昵称，并通过CSS设置右对齐样式和向左微调12rpx的定位。该实现结合了scroll-view的滚动特性和input的输入功能，适合需要弹性布局的表单场景。
2025-08-06 14:47:00
163
原创 滚动条隐藏----微信小程序和预览器
CSS 容器样式代码摘要：该代码定义了一个容器样式，采用浅灰色渐变背景（#f5f5f5到#F4F6F8），设置了10px的内边距。容器高度占满视窗（100vh），并强制隐藏水平滚动条（overflow-x:hidden）。注释显示开发者曾考虑过其他滚动条处理方案，如启用垂直滚动或完全隐藏溢出内容，但最终选择了当前配置。
2025-08-06 09:25:50
117
原创 登录弹窗，cv直接使用
本文展示了一个用户登录提示功能的Vue组件实现，包含未登录状态弹窗提示功能。通过popup组件实现未登录弹窗，点击触发显示登录提示。代码结构分为template模板、JavaScript逻辑和CSS样式三部分，其中template使用双插槽定义弹窗标题和内容，JavaScript通过ref引用控制弹窗显示，实现了点击触发弹窗的交互功能。该实现采用模块化开发方式，分离了视图层和逻辑层，展示了前端组件化开发的基本模式。
2025-08-04 19:03:54
149
原创 cv弹窗,退款确认弹窗
摘要：该代码实现了一个居中显示的退款申请弹窗组件，包含标题、备注输入框和取消/提交按钮。弹窗宽度为80%，圆角24rpx，背景色为#f9f9f9。输入框包含"备注"标签和原因输入区域，使用v-model绑定退款原因数据。底部按钮采用flex布局，取消按钮为灰色边框，提交按钮为黄色背景。可通过refs的open()和close()方法控制弹窗开关，并支持绑定change事件监听开关状态。整体设计简洁，符合移动端UI规范。
2025-08-02 17:17:04
248
原创 cv快速input
该代码片段展示了一个快递信息输入表单的UI实现，包含两个输入框：快递单号和备注。采用微信小程序的WXML和CSS语法，设计简洁大方。表单元素设置了圆角边框(24rpx)和固定高度(92rpx)，使用rpx单位确保多设备适配。标题文本采用加粗字体(#333333)，输入框提示文字为灰色(#ADB1BB)，通过padding和margin实现合理的间距布局。整体界面风格统一，注重文本可读性和表单操作的易用性。
2025-08-02 16:33:01
162
原创 cv使用，好看的下拉框
本文介绍了一个基于Vue的支付方式选择组件实现。该组件包含两个主要部分： 主组件通过import引入select-pay.vue子组件，定义支付方式数据(支付宝和微信支付)，并通过selectitem方法处理选项选择事件。 select-pay.vue是一个可复用的下拉选择组件，主要功能包括： 支持搜索过滤选项 显示placeholder提示 提供清空选项功能 响应式监听value变化 支持禁用状态 包含完善的样式和交互效果 该组件通过props接收配置参数，如选项列表、禁用状态等，并通过emit触发选择事
2025-07-28 11:42:27
213
原创 H5和小程序兼容适配（顶部导航h5公众号不展示）
【摘要】该配置代码展示了小程序和H5公众号端的全局样式设置。主要包含：导航栏文字颜色为白色，标题显示"共创美好社区"，背景色采用#007AFF蓝色；页面背景设为#F8F8F8浅灰色。特别针对H5端（通过条件编译）启用了自定义导航样式，实现更灵活的页面布局。这些配置统一了多端UI风格，同时兼顾了不同平台的特性需求。（98字）
2025-07-24 18:08:01
187
原创 粘贴直接用，底部购买组件，各占一半
这是一个固定底部购物操作栏的微信小程序样式代码。包含两个主要按钮：左侧黑色圆角"加入购物车"按钮和右侧红色圆角"确认购买"按钮。布局采用flex定位固定在底部，使用rpx单位适配不同屏幕，通过z-index确保悬浮显示。按钮样式设置了圆角边框、高度100rpx、白色加粗文字，并保持水平居中排列。外层容器宽度100%占满屏幕，设置margin和padding调整间距，整体呈现简洁现代的商品购买交互界面。
2025-07-23 17:56:53
132
原创 瀑布效果布局的使用，u-waterfall的使用
本文展示了一个使用Vue瀑布流插件(u-waterfall2)实现的商品展示页面。通过左右双栏布局展示商品列表，每个商品项包含图片、名称、标签、价格（支持现金+积分组合）和销量信息。代码实现了响应式布局，商品图片采用aspectFill模式，名称支持两行省略显示，并包含圆角边框、标签样式等UI细节。整体采用浮动布局，适配移动端展示需求，点击商品图片可跳转详情页。样式部分定义了商品卡片的圆角、价格颜色、折扣标识等视觉元素。
2025-07-23 10:38:51
310
原创 uniapp删除弹窗
这段代码实现了一个订单取消功能：通过uni-app的showModal弹窗提示用户确认取消操作，确认后调用后端接口删除订单数据。流程包括：显示加载状态→发送删除请求→处理响应结果（成功刷新地址/失败提示错误信息）→隐藏加载状态。使用Promise链式调用确保最终执行隐藏加载操作。
2025-07-23 09:34:16
195
原创 cv粘贴直接使用，放商品组件
这段代码实现了一个商品列表展示组件，包含商品图片、名称、规格、价格和购买数量等信息。组件采用flex布局，左侧显示商品图片，右侧展示商品详情。价格显示支持纯金额、纯积分或"金额+积分"三种形式，并带有数量显示功能。样式部分定义了容器尺寸、边框、圆角等外观属性，以及字体、颜色等文本样式，确保整体布局清晰美观。组件通过v-for循环渲染商品列表，并针对不同价格组合进行条件渲染处理。
2025-07-22 14:56:14
144
原创 CV粘贴，uniapp弹窗
这是一个退款审批弹窗组件，采用居中显示模式。弹窗包含一个拒绝原因输入框（带占位提示）和底部两个按钮（同意/拒绝）。输入框通过transform水平偏移102rpx，按钮采用flex布局平均分布。按钮样式设置200rpx宽度、1rpx浅灰色边框和白色背景。组件支持关闭操作，关闭时触发closeApproveRefund方法，点击按钮分别触发submitRefundPass和submitRefundReject方法。整体高度400rpx，宽度602rpx，顶部留白180rpx。
2025-07-22 11:07:41
194
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人