- 博客(35)
- 收藏
- 关注
RSS订阅
原创 微信小程序开发附源码——css + js 实现转盘
摘要：本文介绍了一个纯前端开发的微信小程序幸运转盘工具（1/30）。采用CSS+JS技术方案实现，核心原理是利用clip-path属性创建多边形扇形区域，解决了首尾元素层级冲突问题。开发过程中AI工具辅助完成了关键代码编写，包括扇形区域样式计算和文本位置处理。最终实现支持自定义转盘内容和颜色的功能，基于uniapp框架开发。完整源码已通过网盘分享，读者可通过"口袋工具包"小程序体验该工具。（149字）
2025-11-04 23:59:24
855
原创 微信小程序skyline渲染遇到的问题
Skyline 不支持原生导航栏，需在页面配置加上 “navigationStyle”: “custom”（使之与 WebView 保持兼容），并自行实现自定义导航栏。也无效，要实现横向滚动 要再嵌套一个sroll-view。app.json 或者 页面的.json 配置 “defaultDisplayBlock”: true。这是写代码习惯问题，一般row 的时候，我都不会去写这个属性，这点不一致小坑了一下。我配置完开发者工具仍然无效，真机正常，就这样吧~不知道是不是我代码问题，就挺难受的，排查了N久。
2025-03-12 17:44:59
2312
原创 微信小程序开发——PC端预览怎么清除缓存
摘要 微信小程序在PC端突然出现兼容性问题，开发者尝试通过百度搜索、删除缓存和开发版小程序等方式解决PC端预览不更新问题，均未奏效。最终发现需要按照特定顺序操作：先刷新→删除开发版小程序→再次刷新→预览，才能成功更新PC端开发版本。文章分享了这一解决问题的具体步骤，提醒开发者注意微信基础库更新可能导致的适配问题。
2025-11-20 11:05:56
123
原创 微信小程序uniapp开发附源码——图片加水印
本文介绍了一个纯前端微信小程序图片加水印工具的实现方案。该工具支持文字和图片两种水印类型，可调整透明度、位置等参数。核心技术通过Canvas实现，核心逻辑包括： 使用createImage和drawImage加载并绘制原图 文字水印处理：支持单水印和多水印平铺模式
2025-11-13 15:36:33
453
原创 微信小程序uniapp开发附源码——图片九宫格切割
本文介绍了一个纯前端微信小程序实现的图片九宫格切割工具。该工具主要利用Canvas技术实现图片的裁剪和分割，支持多种切割模式（如2×2、3×3等）。核心功能包括：1）通过微信裁剪API将图片预处理为1:1比例；2）使用Canvas绘制预览网格覆盖在图片上；3）通过循环绘制多个Canvas完成图片切割。文中提供了关键代码片段，展示了网格绘制和图片切割的实现逻辑，其中特别处理了不同切割模式下的比例适配问题。该工具操作简便，可直接生成多张切割后的小图，适用于微信社交分享等场景。
2025-11-13 11:02:09
432
原创 微信小程序开发附源码——生成二维码、二维码解码
本文介绍了一款纯前端微信小程序二维码工具，集生成与解码功能于一体。采用weapp-qrcode.js实现二维码生成，支持自定义颜色、添加LOGO、WiFi/联系人等类型二维码；通过微信API实现扫码解码功能。基于uniapp开发，核心代码展示了二维码生成画布实现及保存功能，以及扫码解码的API调用方式。项目已开源，提供完整源码链接，可作为微信小程序开发的实用参考案例。该工具是系列小工具开发中的第四个项目，后续将持续开源更多功能模块。
2025-11-12 08:59:14
565
原创 微信小程序开发附源码——图片压缩、视频压缩
图片也可以用canvas 来实现压缩，但是会麻烦一点，而且如果没有调整好参数小图片压缩 会越越压缩越大，源码中也有canvas 压缩图片的代码。这个图片压缩、视频压缩开发起来其实没有什么难度，主要就是用到微信小程序的API，直接调用图片压缩跟视频压缩的API接口即可。开发三十个纯前端微信小程序小工具之图片压缩、视频压缩（30/3）一个开箱即用的图片压缩、视频压缩。图片压缩、视频压缩页面截图。打代码不易，希望对你有帮助。
2025-11-11 14:12:00
342
原创 微信小程序开发附源码——抛硬币
本文分享了一个纯前端微信抛硬币小程序的开发过程。重点介绍了三个关键技术点：1）通过CSS动画实现硬币翻转效果，为正面和反面分别设计了不同的旋转动画；2）使用JavaScript随机生成抛硬币结果，并统计正反面出现次数；3）利用Canvas API将结果绘制成图片，支持分享功能。文中还提供了AI生成硬币图片的技巧，包括使用在线抠图工具处理素材。该小程序核心代码约150行，主要实现了动画效果、结果随机化和图片生成分享功能，可作为简单前端小工具的开发参考。
2025-11-06 13:46:29
512
原创 微信小程序分享朋友圈注意事项
从朋友圈打开的单页模式点击进入小程序时 res.scene 等于1155 这里可以做一些分享闭环的操作，比如分享成功埋点，跳到别的页面等等。朋友圈打开小程序单页模式时 res.scene 等于 1154 这里可以根据这个对分享的页面做单独的适配优化。6、本地存储与小程序普通模式不共用（这意味着页面如果需要根据本地存储的来处理一些逻辑这里就需要单独做适配）3、不允许跳转到其它页面，包括任何跳小程序页面、跳其它小程序、跳微信原生页面。2、页面无登录态，与登录相关的接口，如 wx.login 均不可用；
2025-11-03 16:38:56
181
原创 vue 使用 keep-alive 需要注意的几个点
1、v-if="$route.meta.keepAlive" 需要放在router-view上，不能放在keep-alive上<template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view
2022-04-01 14:06:38
882
原创 学习flutter的布局笔记
// Flutter Column row宽高自适应mainAxisSize: MainAxisSize.min,// Flutter Column 占满水平空间crossAxisAlignment: CrossAxisAlignment.stretch,
2022-03-30 16:44:44
457
原创 如何在win10自带的Edge浏览器中切换成IE浏览器浏览网站
如何在win10自带的Edge浏览器中切换成IE浏览器浏览网站1、打开edge的设置界面选择默认浏览器1、Internet Explorer 兼容性 =>让 Internet Explorer 在 Microsoft Edge 中打开网站 选择’从不’2、让 Internet Explorer 在 Microsoft Edge 中打开网站 选择‘允许’3、Internet Explorer 模式页面 选择添加，将需要用IE浏览器的网址填入4、重启浏览器5、输入你刚刚添加的网址2、打开
2022-03-30 13:16:35
16316
原创 父子组件中定义的方法相互调用
父子组件中定义的方法相互调用1、子组件调用父组件中定义的方法子组件代码<template> <div> <button @click="clickCloseHandle()">点我关闭子组件弹窗</button> <div></template>export default { methods: { // 跳转到点亮主页 clickCloseHandle() { this.$emit('c
2022-01-19 11:50:06
664
原创 将vsCode添加到windows电脑右键菜单
一 打开vscode1、打开注册表快捷键： win+r 输入 regedit2、知道对应文件目录HKEY_CLASSES_ROOT\Directory\Background\shell ；(1)、background 下的 shell 新建一个项，名字起名叫 open in vsCode(可以自己起名字)(2)、 在open in vsCode 再新建一个项command(这个应该是必须起名叫command) 右键修改填入vscode的’code.exe’ 的路径，（桌面快捷方式右键打开文
2022-01-15 14:27:59
1449
原创 JavaScript 获取url中参数的几种方法
JavaScript 获取url中参数的几种方法// 获取query 参数export function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("=
2022-01-07 10:32:09
743
原创 js自执行函数的两种写法
1 (function(){ alert(1); })()2 !function(){ alert(1); }() // 或者 +function(){ alert(1); }()
2021-12-29 10:20:01
474
原创 vs code 常用快捷键
打开文件位置：Ctrl + O新建文件：Ctrl + N打开一个新的vsCode窗口： Ctrl +Shift + N代码编辑复制、粘贴选中内容/复制、粘贴当前行：Ctrl + C 、Ctrl + V在当前行下方插入一行: Ctrl+Enter在当前行上方插入一行: Ctrl+Shift+Enter代码格式化: Shift+Alt+F向上或向下移动一行: Alt+Up 或 Alt+Down复制选中文本到下一行：Alt+Shift+下键（上下左右的...
2021-12-21 10:02:06
180
原创 vue根据路由的title设置每个页面html的title
// 定义路由 { path: '/sign-up', name: 'SignUp', component: () => import('@/views/signUp/SignUp'), meta: { title: '报名页面', keepAlive: false } }, { path: '/signup-success', name: 'SignUpSuccess', component: () => import('@/
2021-12-21 09:29:24
290
原创 js常用的处理方法
数组1、数组排序：var list= [40, 100, 1, 5, 25, 10];list.sort(function(a, b){return b-a}); // 按降序对数组中的数字进行排序list.sort(function(a, b){return a-b}); // 按升序对数组中的数字进行排序2、根据数组项中的对象的key的值大小来排序数组：let list = [{value: 1,name:'测试'},{value: 3,name:'测试'},{value: 2
2021-12-16 18:14:22
238
原创 uniapp填过的坑
最近公司一个项目要求使用uniapp写小程序，写的过程中遇到的一些坑点记录一下，方便之后查阅动态绑定style:style="[{ height: 'calc(100vh - ' + statusBarHeight + 'rpx - 188rpx - env(safe-area-inset-bottom))'}, {top:'calc(' + statusBarHeight + 'rpx + 88rpx)' }]"tip: 这里的 ‘-’ 两边必须加空格待新增…………...
2021-10-18 18:00:36
422
原创 css常用样式处理（经常用经常忘记的样式）
以下均以scss预处理语言格式书写隐藏滚动条div{ -ms-overflow-style: none; &::-webkit-scrollbar { display: none; }}
2021-10-12 16:45:03
199
原创 sublime 的插件安装
sublime 安装插件的方法有两种，一种是直接下载插件压缩包，放在browse packages 中还有就是线上安装，就是本次要详细记讲的，写这篇文章主要为了记录下，下次方便查找sublime的插件安装方法插件安装：如果在preferences 下没有Package Control 可以输入下面的代码来安装，打开命令行的方式 ctrl + `import urllib.request,os; pf = 'Package Control.sublime-package'; ..
2021-05-22 12:45:18
1124
原创 前端开发环境解决谷歌浏览器跨域问题（个人学习笔记）
声明只是解决谷歌浏览器的跨域问题，方便开发环境与后端联调使用右键谷歌浏览器的快捷标签，打开属性，在快捷方式下的目标最后中输入--disable-web-security --user-data-dir=C:\chromedata注意与原有内容中间有一个空格，且要在当前设置的快捷方式打开有效参考文档：https://www.cnblogs.com/xinheng/p/12922327.html个人学习笔记...
2021-05-18 00:03:50
229
原创 vue项目全局引入scss
最近在写一个vue框架的项目，为了方便后期维护，实现对颜色，字体，边框等统一管理我们需要将对应的样式颜色的属性放在scss中，让后引入调用属性，然后维护时我们只需对scss中的值进行修改，这样维护会相对方便在网上找了好久，回答都不是特别的详细，我是参考d2-admin 实现的，这里记录一下，以备不时之需，话不多说上代码：项目src目录：首先我们要做的是对vue.cpnfig.js 进行修改，没有这个文件可以新建一个（这里只针对vue项目，且是vue-cli搭建的vue项目
2021-04-23 10:13:43
1679
原创 vue 项目中的echarts的使用
目录echarts官网：https://echarts.apache.org/zh/index.html2D可视化图标3D可视化绘图目前做的一个项目需要用echarts做可视化图标，之前没有接触过这一块，今天在学习的过程中顺便记录一下，以备不时之需echarts官网：https://echarts.apache.org/zh/index.html本文介绍的是在@vue/cli 4.4.6版本下建的vue项目中使用Echarts,通过 npm 获取 echarts，np.
2021-04-23 01:04:26
1170
原创 vue框架中Vuex的简单使用（Vue学习笔记）
目录Vuex是什么：Vuex基于单项数据流：Vue脚手架中使用Vuex安装：使用：使用案例Vuex是什么：首先了解下什么是Vuex，官网定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化Vuex基于单项数据流：以下是一个表示“单向数据流”理念的简单示意：state，驱动应用的数据源； view，以声明方式将state映射到视图； actio..
2021-04-11 14:13:43
448
原创 Promise (ES6学习笔记)
目录什么是Promise使用PromisethenPromise 处理错误catch()finally()Promise的三种状态Promise.all() 与 Promise.race()Promise.all() 方法Promise.race()方法Promise.resolve() 与 Promise.rejcet()Promise.resolve()Promise.rejcet()什么是PromisePromise对象用于表示一个异步操作的最终状态（完成或失败）以及其返回值 ——MDN使用Pr
2021-04-09 16:59:23
324
原创 vue中子组件的methods中获取到props中的值方法（vue 学习笔记）
说一下为什么会有这个需求：如果不需要处理props的值直接用，是不用这么麻烦的，直接用页面上用{{name}}就好了。在做项目的时候由于要对props的值做处理后才能使用，当我在method、mounted 用this.xxx,发现取出来的值是空对象，有点疑惑于是就上网查了原来：通过这个方法传过来的值，在子组件mounted函数中如果直接去获取的话有可能会获取不到。因为此时父组件的值还没有传过来，但是如果你是写在methods中的方法中获取值的话，此时值已经传过来了，可以直接使用this.name获取
2021-04-09 16:31:49
9809
原创 ES6变量的解构赋值（ES6学习笔记）
目录数组的结构赋值数组与扩展运算符 "..."对象的解构赋值对象与扩展运算符 "..."字符串解构赋值字符串与扩展运算符数组的结构赋值简单的解构赋值const arr = [1,2,3,4]let [a,b,c,d] = arrconsole.log([a,b,c,d])//输出：[1,2,3,4]复杂点的数组解构赋值const arr = ['a','b',['c','d'],['e','f','g','h','i']]//要拿到'a','b' 的值const [a,b] = arr
2021-04-06 12:10:23
281
原创 var，let，const 声明变量的区别（ES6学习笔记）
目录var 声明变量变量提升let 声明变量块级作用域暂存死区const 声明变量常量 - 不可以改变的量ES6之前声明常量var 声明变量var 可以重复声明变量，先声明的值被覆盖变量提升var 声明变量存在变量提升，如在声明前先打印，不会报错，输出undefined，原因是JavaScript 会将var 声明的变量先提升占位let 声明变量块级作用域ES6之前的作用域 全局作用域 &n
2021-04-06 02:24:47
586
原创 Windows 安装MongoDB数据库（学习笔记）
Windows 安装MongoDB数据库官网安装：https://www.mongodb.com/由于MongoDB现在是非开源的，个人学习建议使用社区版： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABPwAAALOCAIAAACyPZo9AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR4nOzdeVwU5f8A8M8zM7s7e3F5gKh4A14I3nmUmJR4YF..
2021-04-04 12:26:52
143
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人