- 博客(28)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Skyline配置指南-微信小程序
Skyline 是微信小程序推出的新一代渲染引擎，提供了更强大的渲染能力和更流畅的性能体验。开发者本地设置-开启Skyline渲染调试。
2025-04-09 11:10:01
415
原创 检查对象是否包含特定属性，String in Object 用法及返回结果
检查对象是否包含特定属性，String in Object 用法及返回结果。
2025-03-28 14:21:02
204
原创 动态添加view方法-微信小程序
在 JS 文件中，定义一个数组 views，并通过按钮点击事件向数组中添加新元素，从而动态生成 view。如果 views 数组中的数据量较大，可能会导致页面渲染性能下降，因此在实际开发中需要注意优化。wx:for 中的 wx:key 是用于优化列表渲染的，建议为每个项指定一个唯一的键值。你可以根据需要在 views 数组中存储更多的数据，并在 view 中显示这些数据。当用户点击“添加 View”按钮时，会动态添加一个新的 view 到页面中。以下是一个简单的示例，展示如何根据数据动态添加 view。
2025-03-24 17:11:57
473
原创 防重复请求方法总结 wx.request-微信小程序
在请求中，使用 wx.showLoading 显示加载动画，请求完成后使用 wx.hideLoading 隐藏加载动画。通过 Promise 封装 wx.request，并在请求前检查是否有未完成的请求。如果你希望在一定时间内只允许一次请求，可以使用防抖函数来控制请求的频率。可以通过设置一个标志位来标记当前是否有请求正在进行，从而防止重复请求。如果你希望按顺序处理请求，可以使用队列来控制请求的顺序。
2025-03-20 16:20:14
461
原创 防止重复点击方法总结-微信小程序
以上方法都可以有效地防止微信小程序中的重复点击问题。根据具体场景选择合适的方法即可。如果需要给用户反馈，可以使用 wx.showLoading。在点击事件中，使用 wx.showLoading 显示加载动画，并在操作完成后隐藏加载动画。通过 Promise 和 async/await 来确保异步操作完成前不会重复触发点击事件。在点击事件中，通过设置 disabled 属性来禁用按钮，防止用户重复点击。在点击事件中，通过设置一个标志位来防止重复点击。通过防抖函数来限制点击事件的触发频率。
2025-03-20 15:44:13
489
原创 运算符 ?. 、?? 、 ! 的介绍和用法
运算符是JavaScript与TypeScript中都可以使用，!TypeScript中常用的操作符，表示表达式一定不是null或者undefined，可直接调用无须额外验证。逻辑运算符，当左侧的表达式为null或undefined时，它会返回其右侧的表达式。允许我们读取位于连接对象链深处的属性的值，而不必显式地验证链中的每个引用是否有效。在运算中合理使用这几种运算符，可以更简洁方便的编写代码，也更容易理解。与||运算符区别：||当左边为false时，就会取右侧的表达式。
2025-03-17 14:53:18
179
原创 微信小程序-实现锚点跳转，页面加载后自动跳转、点击跳转到指定位置
二、点击事件，跳转到指定ID位置，需要位置bind:tap就可以了。一、页面加载后滚动到指定位置，onLoad或onReady里执行。三、完整代码下载链接。
2025-03-12 14:36:48
690
原创 纯css编写多边形
代码资源：https://download.youkuaiyun.com/download/weixin_43951315/90439628。
2025-02-28 15:05:40
150
原创 滑动验证组件-微信小程序
微信小程序滑动验证组件：1.enable-close：是否允许关闭，默认true。wx:if用于控制组件显示，在需要的地方改变参数值就行。2.bind:onsuccess：验证后回调方法。
2025-02-25 16:11:46
387
原创 【微信小程序】Source Map文件使用 快速定位错误位置
1.进入We分析后台（https://wedata.weixin.qq.com/），左侧菜单：性能质量-JS分析，可以进行Source Map文件下载。2.打开开发者工具，在顶部菜单栏找到设置-扩展设置-调试器插件，然后安装Source Map匹配调试插件就可以了。3.打开调试器-选择Source Map，然后选择对应报错文件，输入报错行号。操作很简单，可以快速找到报错位置，精准解决问题。
2025-02-25 10:57:02
386
原创 微信小程序实现锚点效果 scroll-view的scroll-into-view属性
小程序中实现锚点效果，可以直接使用scroll-view的scroll-into-view属性就可以实现锚点效果，比较方便简单。那么需要用到scroll-view那些参数呢，下面具体讲讲：效果展示：wxml**注意：**viewid值是动态的，通过setData设置即可。jswxss......
2022-06-06 17:38:50
4878
2
原创 微信小程序设置git提交、代码管理
首先，把已建好git库（如未创建请先对git进行配置【git下载、安装及常规环境配置】）项目导入开发者工具。1.点击开发者工具右上角版本管理，然后点击设置。2.设置用户信息（填写你的git账号：昵称+邮箱），下次提交时将会使用此用户信息。3.设置用户名和密码（git的账号密码）4.设置远程git地址5.设置完成，可以在操作区进行代码推送、拉去等操作了。...
2022-05-25 11:28:30
4358
1
原创 [微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言navigationBarTitleText用于小程序设置当前页面标题，可以给每个页面设置独立的标题，但是这样不能满足一些特殊业务场景；比如说商城，商品详情页面的标题，会根据获取到的数据动态修改，下面就来说说如何动态修改标题以及导航条相关设置。正文一、wx.setNavigationBarTitle1.设置整个小程序通用标题，在app.json里设置："window": { "navigationBarTitleText": "默认标题"}2.单独设置页面标题，在对应页面json
2022-05-24 15:28:04
22545
原创 获取view宽高度、获取自定义组件宽高度
一、获取view宽高度给view设置一个id（class）名，用法和jQuery类似，用来获取指定id相关信息。<view id="test">测试view</view>把方法写在onReady，是为了再页面初次渲染完成后，再去获取，避免不准确或获取不到的情况。onReady: function (e) { const query = wx.createSelectorQuery(); query.select('#test').boundingClientRect(f
2020-06-18 15:19:58
761
1
原创 微信小程序：setData函数详解及注意事项
前言在微信小程序中经常会使用到setData函数把变量渲染到视图层，那么什么是setData呢？如何使用？注意事项有些什么？下面我们就来详细了解一下！正文setData是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。setData函数用于将数据从逻辑层渲染到视图层（异步），同时改变对应的this.data的值（同步）。实例1：简单实现点击修改变量值<text&g...
2020-04-30 16:13:10
4229
原创 微信小程序：获取地理位置
一、wx.getLocation(OBJECT)获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定highAccuracyExpireTime作为超时时间。属性类型默认值必填说明typestringwgs84否wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标alt...
2020-04-13 16:51:30
4380
原创 CSS3布局：多列布局、分栏
以前，如报纸类型排版，要用CSS动态实现其实是比较困难的，因为内容是动态的，每个div显示多少文字是很难控制的。现在CSS3提供了个新属性columns用于多列布局，下面我们就来详细看看。正文一、column-count指定了需要分割的列数；语法：column-count: number | auto；<div class="box"> FaxMiao个人博客是一个we...
2020-04-03 18:51:51
1515
原创 微信小程序开发那些事，你都知道吗？
在开发小程序的时候，或多或少都会遇到些问题，也有很多容易被忽略的问题；前端以提升用户体验为主，适当规避问题、优化代码可提升性能，可大大提升用户体验。注意事项：1.自定义组件内wxss里不能使用标记选择器、ID选择器、属性选择器；/* 错误 */#id{...}image{...}a[href]{...}/* 正确 */.class{...}2.wx:for必须和wx:ke...
2020-04-01 15:57:52
315
1
原创 微信小程序：动态设置页面标题、导航条
前言navigationBarTitleText用于小程序设置当前页面标题，可以给每个页面设置独立的标题，但是这样不能满足一些特殊业务场景；比如说商城，商品详情页面的标题，会根据获取到的数据动态修改，下面就来说说如何动态修改标题以及导航条相关设置。正文一、wx.setNavigationBarTitle1.设置整个小程序通用标题，在app.json里设置："window": { ...
2020-03-30 17:26:53
2929
原创 微信小程序：消息提示框
本文首发自个人自有博客：【FaxMiao个人博客】，一个关注Web前端开发技术、关注用户体验、记录前端点滴，坚持更多原创，为大家提供高质量技术博文！前言相比H5弹出框的实现方式要么用插件，要么自己写；微信小程序则提供了几个弹出框api，使用起来更简单、方便；每个api都有不同的使用方式、场景，今天我们就来说说小程序的几种弹出框。目录wx.showToast()wx.showModa...
2020-03-29 16:23:35
4835
原创 微信小程序：页面跳转及参数传递
本文首发自个人自有博客：【FaxMiao个人博客】，一个关注Web前端开发技术、关注用户体验、记录前端点滴，坚持更多原创，为大家提供高质量技术博文！前言小程序的跳转方法有很多种，有的人一直只用wx.navigateTo跳转，由于页面栈限制，跳着跳着小程序就没反应了，今天就来说小程序的跳转几种跳转方式及作用。正文一、wx.switchTab跳转到 tabBar 页面，并关闭其他所有非...
2020-03-28 16:30:14
2801
1
原创 微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
前言navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。正文1.隐藏原生的navigationBarwindow全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。"window": { "navigation......
2020-03-26 09:38:27
12556
9
原创 深入理解CSS3动画：animation、transform、transition
前言在CSS3之前，动画主要都是以JavaScript或者Gif图片来实现，但是实现效果并不是很理想或者很麻烦，有了CSS3之后很多动画几句代码即可实现，方便，快速，性能好。目录animationtransformtransition一、animation我们通过一个简单的例子来理解：延迟1秒执行，从左0往右100px无限循环来回移动；div { width: 80px...
2020-03-22 17:54:44
460
原创 快速学会小程序参数传递与路径获取
首先在小程序中，所有页面的路由都由框架统一管理。getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。// 获取加载的页面对象const pages = getCurrentPages();// 获取当前页面的对象const currentPage = pages[pages.length - 1];tip...
2020-03-18 14:25:08
1074
原创 [微信小程序] 单张、多张图片上传(图片转base64格式)实践经验
定义初始数据：data: { imgList: [], // 图片集合 baseImg: [], // base64图片集合 maxImg: 8, // 图片上传最高数量（根据需求设置）}第一步：从本地相册选择图片或使用相机拍照（wx.chooseImage）// 选择图片selectPictures: function() { const that =...
2020-03-17 15:20:51
5703
4
原创 Git下载、安装及环境配置（超详细）
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2020-03-17 14:59:19
46998
9
微信小程序-实现锚点跳转，支持页面加载后自动跳转、绑定点击事件跳转，简单方便非scroll-view方法
2025-03-12
微信小程序-滑动验证组件
2025-02-25
[微信小程序] 自定义顶部导航栏(navigationBar)，兼容适配所有机型（完整实例）
2022-05-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人