小程序
文章平均质量分 50
羽筠
这个作者很懒,什么都没留下…
展开
-
微信小程序-CANVAS写入图片素材、文字等数据生成图片
微信小程序-CANVAS写入图片素材、文字等数据生成图片微信小程序中,CANVAS写入图片素材、文字等数据生成图片,最终可将生成的 base64 格式图片保存至相册操作Tips:1、canvas 标签默认宽度 300px、高度 150pxcanvas 生成图片时,写入图片素材、文字等数据前,需要根据实际需求,设置 canvas 宽、高,如以下示例中 设置 posterCanvas.width 及 posterCanvas.height2、同一页面中的 canvas-id 不可重复,如果原创 2024-07-22 18:18:11 · 2201 阅读 · 1 评论 -
uniapp日期区间选择器
uniapp日期区间选择器在 uniapp 中创建一个简单的自定义日期范围的日期区间选择器:- 限制有效日期范围开始日期为 2024-01-01,结束日期为当日;- 默认日期区间为当日向前计算的7日区间;- 选择开始时间后,判断不可大于结束时间,且重置开始时间为结束时间;- 选择结束时间后,判断不可小于开始时间,且重置结束时间为开始时间;示例代码:html:CSS:data设置参数数据:created 或 onLoad 中,调用请求接口获取筛选项数据方法:methods 处理方法:原创 2024-05-07 17:35:23 · 1759 阅读 · 0 评论 -
uniapp picker 多列选择器用法
uniapp picker 多列选择器联动筛选器交互处理方法,uniapp 多列选择器 mode="multiSelector" 数据及筛选联动交互处理,通过接口获取数据,根据用户选择当前列选项设置子列数据,实现三级联动效果,本示例中处理了三级无数据时则从数据中删除,处理三级后二级无数据时则亦从数据中删除,删除的数据最终不展示在筛选器中。原创 2024-04-17 11:07:50 · 3585 阅读 · 0 评论 -
uniapp中获取位置信息处理
处理逻辑:一、获取定位时,用户直接同意授权获取定位,得到位置信息; 第1步:获取用户当前的授权状态 => 第2步:判断是同意授权位置时 => 第3步:获取位置 二、获取定位时,用户拒绝授权获取定位的: 第1步:获取用户当前的授权状态 => 第2步:判断是未同意授权位置时,引导用户打开设置界面,重新选择授权功能 => 第3步:用户选择允许授权后 第4步:重新获取位置,得到位置信息 第3步:用户选择不允许授权后 第4步:可至第1步,继续重新获取位置 引用文件可复用的处理逻辑代码:引用文件:需要获取位置代码处执行原创 2024-02-28 17:55:00 · 3627 阅读 · 2 评论 -
小程序中web-view网页中打开或返回小程序页面
小程序中web-view网页中使用JSSDK提供的接口打开或返回小程序页面。1、引入 JSSDK 文件。2、判断是否在小程序环境。3、根据是否小程序环境,执行操作。原创 2023-05-22 11:32:50 · 2037 阅读 · 0 评论 -
小程序中图片转 base64 编码格式
小程序中图片转 base64 编码格式使用例:小程序项目内部图片转 base64 图片并使用 wx.previewImage 查看大图let base64Img = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync('images/aaa.png','base64');wx.previewImage({ urls: [base64Img], current: base64Img});例:小程序中上传的图片转原创 2023-05-04 17:30:36 · 944 阅读 · 0 评论 -
小程序中使用CANVAS实现手写签名并写入模板图片中
小程序中使用CANVAS实现手写签名并写入模板图片中实测,开发者工具中滚动条位置会影响书写,显示有些问题,手机上测试正常原创 2023-05-04 17:56:43 · 921 阅读 · 1 评论 -
小程序canvas生成海报
小程序canvas生成海报,画布转图片后可直接保存图片到系统相册;海报素材使用图片宽750px;注:画布转图片时参数destWidth 值 须 * dpr 否则IOS测试生成的图片是模糊的;.wxml注:canvas CSS样式 不可设置display:none; 开发者工具调试没有问题;IOS调试时是有问题的;canvas CSS样式 宽高(canvasW/canvasH) 须 与海报图片宽高一致 否则IOS测试生成的图片是模糊的;<canvas wx:if="{{!posterU原创 2021-08-19 14:41:07 · 1016 阅读 · 1 评论 -
微信小程序,自定义导航栏组件
可定义设置的内容如下:文字及返回箭头颜色背景图片(优先级高于 背景色)背景色页面标题页面标题显示图片(优先级高于 页面标题)是否显示返回菜单是否显示 页面主体顶部被自定义菜单挡住部分(false则主体内容会被导航栏遮盖)组件相关代码:.wxsspage,view,scroll-view,swiper,swiper-item,button,input,textarea,label,navigator,image{ box-sizing: border-box;原创 2021-08-12 18:36:13 · 1568 阅读 · 0 评论 -
小程序获取手机验证码倒计时
小程序获取手机验证码倒计时test:.wxss.bind_pop_input{ width: 450rpx; height: 80rpx; padding: 0 20rpx; margin: 0 auto 20rpx auto; border-radius: 40rpx; border: #ddd solid 1px; display: flex; justify-content: space-between; align-items: center;}.bind_pop_input i原创 2020-08-08 19:03:01 · 440 阅读 · 0 评论 -
小程序中,image显示不了data中base64格式数据解决方法
BASE64Encoder产生的base64串带换行的,在小程序里用需要自行替换res.data.img : 后台给到的base64格式图片处理方法一:let imgUrl = res.data.img;// imgUrl = imgUrl.substr(22);if(imgUrl.indexOf('base64,') != -1){ let imgUrlArr = imgUrl.split('base64,')//带有(data:image/png;base64,)完整路径,所以需要拆分原创 2020-08-08 15:43:43 · 4291 阅读 · 1 评论 -
微信小程序-转盘抽奖
微信小程序-转盘抽奖代码:lucky-draw.wxss:.lucky_draw_zp{ width: 502rpx; height: 502rpx; margin: 0 auto; position: relative;}.lucky_draw_zp_img , .lucky_draw_zp_btn{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}lucky-draw.wxml:<view cla原创 2020-07-29 15:36:47 · 16019 阅读 · 10 评论 -
微信小程序-收藏
.wxss样式代码swiper .wx-swiper-dots { width: 100%; padding-left: 20rpx; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}swiper .wx-swiper-dot { width: 10rpx;...原创 2019-12-10 14:14:25 · 1435 阅读 · 0 评论 -
小程序中判断左右滑动操作
小程序中判断左右滑动操作test.wxml<view class='body' style='{{moveLeft}}' bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</view>...原创 2019-03-29 11:17:13 · 4879 阅读 · 0 评论 -
小程序设置列表瀑布流(两列)
小程序设置列表瀑布流,当不知道列表数据中的图片元素在等宽时的高度数据时,不太好设置左、右边数据,所以通过:先将当前获取到的列表数据中的图片显示在页面中,用bindload='pubuImgLoad'事件来获取设置所有图片在等宽时的高度,再将计算出的高度数据存储在当前列表项JSON中,再根据左、右边容器的高度,逐个将列表项添加在左、右边容器中的数组中app.js中加处理方法: //处理设...原创 2019-05-05 17:37:50 · 3806 阅读 · 0 评论 -
小程序实现左右滑动切换菜单+瀑布流显示列表
小程序实现左右滑动列表区域,切换菜单(横向滑动菜单,切换时自动设置选中的菜单窗口居中显示),加载显示对应瀑布流数据,页面滚动时,设置菜单栏是否置顶显示自己写的一个demo(下载地址:https://download.csdn.net/download/qq_16494241/11208785)app.js中加处理方法: //处理下页列表数据,追加至列表数据存储变量中 ...原创 2019-05-27 12:26:31 · 6117 阅读 · 3 评论 -
wxParse多数据循环使用方法
微信小程序富文本解析组件wxParse多数据循环使用方法,说明文档:https://github.com/icindy/wxParse/wiki/wxParse多数据循环使用方法说明文档中,没有示例来处理除了富文本以外其它数据的处理,找了几个解决方法感觉有些绕了,自己这边解决后,发现不用多做处理.js 中:let newData = [ { id: 111, conte...原创 2019-06-21 15:53:54 · 2168 阅读 · 0 评论 -
微信小程序刮刮乐
网上找了个插件,scratch.js下载地址:https://github.com/FrontendMing/scratch-in-wx-miniprogram个人对scratch.js做了一些修改,设置清除面积达到一定值时(if (clearNum > .2) ),使刮卡刮干净,并触发(结果交互)方法;测试时 调试基础库(project.config.json 文件中参数:"lib...原创 2019-07-08 14:45:18 · 27338 阅读 · 2 评论 -
微信小程序九宫格抽奖
做了一个微信小程序九宫格抽奖demo截图:代码如下:Luckydraw.js// pages/Luckydraw/Luckydraw.jslet timer;let cjIn = false;let cjChange = 0; //抽奖过程KEYPage({ /** * 页面的初始数据 */ data: { prizeList:[ {id:...原创 2019-07-08 17:35:04 · 3350 阅读 · 2 评论 -
小程序中,处理追加下一页是json格式的列表数据
小程序中,获取的数据是json格式时,不好直接追加至页面列表数组中绑定到页面,要做下处理,如下:app.js中加处理方法: //处理下页列表数据,追加至列表数据存储变量中 addList(oldData, newData) { for (var item in newData) { oldData.push(newData[item]); } r...原创 2019-04-01 18:06:51 · 1054 阅读 · 1 评论