小程序
文章平均质量分 67
怪哈哈
这个作者很懒,什么都没留下…
展开
-
微信小程序连接蓝牙汉印HM-A300L标签打印机
微信小程序连接蓝牙汉印HM-A300L标签打印机原创 2022-11-19 21:37:18 · 37541 阅读 · 4 评论 -
微信小程序 表单 选择跳转新页面,选择后,返回上一页面保留原页面已填写的值
表单页有很多项需要填写,个别项数据较多,需要跳转到新的页面去选择后,带着结果返回。此时,想要返回时,已经填写过的内容保留不变,不被清空。在下一页去获取上一页data中的数据,并修改,再通过。返回上一页,页面不会刷新,且所有数据都在。原创 2022-10-28 21:04:14 · 3775 阅读 · 1 评论 -
微信小程序提交表单多个input输入框,通过一个bindinput方法实现双向数据绑定
微信小程序提交表单多个input输入框,通过一个bindinput方法实现双向数据绑定原创 2022-10-28 20:51:43 · 3311 阅读 · 0 评论 -
微信小程序scroll-view重新加载数据,滚动条回到顶部
问题:微信小程序切换了筛选条件后,列表滚动条没有滚动回顶部。场景:wepy+原生通过<scroll-view>实现列表滚动方案:1、通过wx:if设置列表元素的展示隐藏通过给<scroll-view wx:if="{{flag}}"> 设置显示隐藏,去重新加载列表。直接设置无法生效,滚动条依旧保留在上次滚动的地方;加一个延迟,放在定时器里去setTimeout(() => { this.flag = true }, 100) 设置flag的值。目的是等到页面渲染完原创 2022-05-05 21:11:53 · 3900 阅读 · 0 评论 -
请求接口报400,token携带的数据过多,后端修改
请求接口报400,token拼接的内容过多过长了,需要后端修改长度原创 2022-01-27 14:31:27 · 871 阅读 · 0 评论 -
小程序跳转H5实现长截图功能;vue-cli3通过rem适配
Error:Loading PostCSS Plugin failed: Cannot find module ‘postcss-pxtorem‘报错解决原创 2021-08-05 17:39:28 · 2276 阅读 · 1 评论 -
微信小程序预览pdf,页面缓存下载过的pdf
需求: 点击预览图标查看该pdf报告问题: 1、最早是直接将请求倒的url放入到<web-view src="{{realUrl}}"></web-view>中展示,ios可以,安卓显示无法查看。 2、通过微信自身的API实现:wx.downloadFile({})、wx.saveFile({})、wx.openDocument({}) 3、对于文件较大的,下载较慢,需要点击过的进行缓存,再次点击无需下载,直接打开。 将点击过的下载的url添加给list的tem原创 2021-07-12 19:42:11 · 2805 阅读 · 0 评论 -
小程序中动态改变月历数组的数据
需求: 月历循环2017年1月至当前年当前月数组结构如下:// 想要的格式是 // serviceTypes该数组需要显示2017年1月至当前年当前月 // 每一年都是个大对象{ type: '2021年',id: '2021',services: []}// services该数组是该年的所有月份,如果是当前年则显示到当前月份 serviceTypes: [ { type: '2021年', id: '2021', service原创 2021-06-23 14:21:43 · 98 阅读 · 0 评论 -
深拷贝和浅拷贝---操作临时变量时,原始数据不改变
需求:如下图,点击更多指标时,底部弹出多选项,选中的选项则替换列表后两列的表头及该表头对应的表体数据。最多可选两项,当选择后没有点确认按钮则不改变列表数据;只有点了确认才会改变列表数据。思路:1、选择选项的时候,需要将选中的项放到临时数组里,如果点击了确认则将临时数组的数据赋值给原始数组;如果点击了关闭,则将原始数组的数据重新再赋值给临时数组。始终保持关闭弹框时,临时数组和原始数组的数据一致。2、最初,直接讲原始数据赋值给临时数组,导致改变临时数组时,原始数组里的数据也会被改变。后面通过..原创 2021-06-09 12:43:04 · 461 阅读 · 0 评论 -
echarts饼图series里的label超出边界显示不全
问题: 小程序中使用饼图,在分布均匀的情况下label内容不会被遮挡(如图一);如果存在几个小数据分布在一侧的话会出现个别label超出上边界被遮挡(如图二);需要调整使label文字不被遮挡,调整后的(如图三)。解决方案:推荐修改 startAngle 的起始角度值,让图表重新摆放 label 的位置。通过修改echarts饼图角度起始角度位置和生长方向minAngle: 15,//最小角度 startAngle:270, //起始角度代码:import * as echarts原创 2021-05-26 19:46:38 · 23459 阅读 · 1 评论 -
小程序scroll-view滚动组件,左边导航栏与右边内容联动,选择区间实现
效果具体思路同 小程序scroll-view滚动组件,左边导航栏与右边内容联动效果实现不同的是上面的文章为单选,这里是选择范围可以选择两个月份。思路主要是在选择月的时候通过判断一个数组,如果数组里有两个值,则再次点击会清空数组重新选择第一个push进数组;如果数组里有一个值,点击的时候会push进第二个;可以允许选择的两个值相等。具体代码<!--pages/monthOfficeModule/monSectCalendar/monSectCalendar.wxml-->..原创 2021-05-24 13:35:53 · 870 阅读 · 0 评论 -
小程序scroll-view滚动组件,左边导航栏与右边内容联动效果实现
效果左侧为年份,右侧为该年对应的月份,点击左侧2020年,则右侧的2020年灰色区域的标题滚动到最顶部;滚动右侧区域当2020年滚动到顶部时,左侧选中2020年高亮显示。思路使用scroll-view组件分别包裹左侧及右侧内容,点击左侧年份时,给其动态设置样式并让右侧区域滚动到指定位置;通过给右侧的scroll-view标签绑定scroll-into-view属性,值为某子元素id,根据id滚动到该元素。给右侧每一年份区域设置id值,左侧点击事件携带该点击项的id值,并将该值动态绑定给scroll.原创 2021-05-24 13:16:04 · 3884 阅读 · 3 评论 -
微信小程序中使用vant中的Calendar 日历组件
需求: 小程序需要实现日历的需求,可以单选、可以选择区间、节假日和周六颜色高亮、返回本月。具体如图,类似猫眼app的日历选择。思路:参考市场上含有日历的小程序及app,确定是自己实现还是使用组件,骨朵使用的是Pikaday。确定使用Vant Weapp组件库中日历。需要对源码进行一些修改,首先样式的修改、包括顶部周日到周六、节假日及周六日日期的颜色、返回本月按钮的添加及样式。前后实现了三种展示日历的不同方式4-1. 第一种,根据官方示例引入日历组件,平铺整个页面。选择日期后会跳转返回列表原创 2021-05-17 12:31:09 · 8260 阅读 · 2 评论 -
微信小程序体验版new Data(data).getTime()返回NaN的问题
场景:在开发者工具上,没有任何问题;发布了体验版后,在苹果手机看的时候,所有的日期都显示NaN定位问题:苹果手机,new Date(data).getTime()如果传入的时间格式是2020-07-22 12:00:00,就会返回NaN。解决办法:new Date(date.replace(/-/g, ‘/’)).getTime(),将横杠转为斜线格式。参考文章:苹果中的new Data(data).getTime()返回NaN的问题微信小程序new Date()方法失效问题解决方法..原创 2021-04-25 15:57:30 · 1244 阅读 · 1 评论 -
微信小程序如何通过npm安装组件库
微信小程序中引入组件库vant1、安装npm包 微信开发文档在小程序项目的目录下打开终端,执行命令npm install2、安装组件库npm i @vant/weapp -S --production3、构建npm点击开发者工具中的菜单栏:工具–>构建npm4、勾选“使用 npm 模块”选项:详情–>使用 npm 模块5、具体的组件引入和使用根据官方文档示例即可。参考文章:微信小程序如何引入npm包?如何在微信小程序用npm引入组件库...原创 2021-04-25 15:35:51 · 1456 阅读 · 1 评论 -
微信小程序实现一键长图并保存图片到相册
效果:类似骨朵的一键长图骨朵剧集排行榜通过点击按钮实现长截图,并可以滚动,长按保存或者转发。思路:参考骨朵数据,使用的是html2canvas,骨朵的小程序是个空壳,所有的页面都是H5写的,是一整个H5项目通过<web-view src="{{realUrl}}"></web-view>嵌入到小程序中,一键长图通过用html2canvas插件生成长图。原生小程序是无法使用html2canvas插件的。微信小程序提供了webview组件以承载web页面。有了这个组件就可原创 2021-04-19 11:24:58 · 7459 阅读 · 1 评论 -
微信小程序中当底部弹出框时,背景色置透明灰并覆盖echarts图表
需求需要解决下方图中的问题,当底部弹出弹出框时,需要除弹出框外的元素置为透明灰色。下图是真机效果。此时,echarts图表依旧高亮显示,需要去掉该高亮效果。下图是微信开发者工具效果,开发者工具显示正常,真机echarts图表则会高亮。问题所在通过微信小程序Echarts覆盖正常组件问题解决该文章知道:Echarts使用的是微信原生canvas,优先级高,z-index完全无效。cover-view 可以覆盖在原生组件之上。解决方式将写弹出层使用的 view 组件全部替换成 c..原创 2021-04-18 16:51:33 · 2293 阅读 · 0 评论 -
微信小程序中列表滚动到顶部表头吸顶效果
效果具体实现// 通过样式实现顶部吸顶效果// 核心样式.stickyClass{ position: sticky ; top: 70rpx; // 距离顶部还有多少时候产生吸顶效果 z-index: 9999;}<view class="tableList"> <view class="listHead stickyClass"> <view>排名</view> <view>日期.原创 2021-04-18 16:21:38 · 882 阅读 · 0 评论 -
小程序中通知消息栏的内容自动上下滚动
效果图通过微信小程序swiper组件实现swiper | 微信开放文档<view class="newNoticeBox"> <view class="newNoticePicBox"> <image class="newNoticePic" src="../../../images/newNotice.png"></image> </view> <swiper class="swiper_zi" v..原创 2021-04-18 15:48:31 · 991 阅读 · 0 评论 -
在微信小程序中使用 ECharts
示例下载首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。其中,ec-canvas 是官方提供的组件,其他文件是如何使用该组件的示例。引入组件创建图表原创 2021-04-18 15:34:29 · 346 阅读 · 0 评论 -
原生小程序实现对称加密AES
需求: 前端请求到后端返回的数据,涉及到一些敏感的数据,需要进行加密处理,前端进行解密。思路:后端加密,前端解密;后端生成加密的key值,告诉前端,前端解密的时候也需要使用该key值去解密。小程序无法引入cdn插件crypto.js,复制该插件的源代码:https://blog-static.cnblogs.com/files/gygg/crypto-js.js,将源码粘贴在utils下新建crypto-js文件下封装一个公共的解密函数。在具体的vue组件中直接调用解密函数。步骤:原创 2021-03-24 17:12:14 · 349 阅读 · 0 评论 -
原生小程序实现页面水印效果(自定义组件)
需求: 小程序页面动态水印,水印内容是用户名+电话后四位。思路:水印内容通过变量进行赋值,登录成功后,将用户名及手机号后四位拼接。均匀平铺在页面上,之前pc端是有多种方案实现,因为pc端和h5支持dom操作;小程序和uniapp等相关的框架不支持dom操作,编译不了。有想过让后端生成一个用户名和手机号的图,返回给前端,后端生成的快,前端生成较慢,尤其是进到页面就需要加载,影响用户体验。还是要前端自己做,该思路pass。有想过使用canvas画布,画布填充水印内容,未验证。看到有人说使用ca原创 2021-03-18 14:26:03 · 995 阅读 · 0 评论 -
小程序scroll-view区域滚动计算可滚动高度
需求: 微信小程序区域滚动,头部是标题、日期切换、下面是表头,可滚动的只有列表表体的内容;通过scroll-view组件实现表体内容的区域滚动。思路:列表页主要有标题、日期时间切换、列表表头在滚动的时候是不能动的,只有表体的数据内容可以区域滚动。表体的内容写在<scroll-view></scroll-view>组件里。在列表页还可以切换到图表页;图表页的头部和列表共用,相当于筛选条件是一样的。图表需要滚动的也要放到<scroll-view></scr原创 2021-01-08 19:02:46 · 2821 阅读 · 1 评论 -
小程序项目生成步骤
1、在桌面创建文件夹2、打开 开发者工具点击新建项目输入项目名称目录:将桌面新建的文件夹导入进来AppID必须填写,需要到微信公众平台登录账号(若小程序未认证,暂时使用测试号进行开发查看小程序是否认证:在设置里的基本设置,看微信认证是否认证)点击查看详情,就可以看到AppID3、点击新建,对应的文件就直接生成了页面文件都放在pages里面...原创 2020-11-18 14:40:00 · 251 阅读 · 1 评论