小程序
文章平均质量分 61
青衫折扇
互联网发展迅速,使我们的脚步更快,生活更好,环境变差,使人变得懒惰,有压力才会 让自己变得更强...
展开
-
前端防止快速连续点击,节流函数
// 防止快速连续点击,节流函数function throttle(fun, delay) { let oadDate = Date.now(); return function() { let _this = this; let args = arguments; let newDate = Date.now(); if(newDate-oadDate > delay) { fun.apply(_this, args); oadDa.原创 2021-12-07 19:42:36 · 870 阅读 · 0 评论 -
uni-app前端解密微信小程序手机号加密数据
在官方下载地址:https://res.wx.qq.com/wxdoc/dist/assets/media/aes-sample.eae1f364.zip获取手机号:<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="button base-button-box"></button>刚才下载的解密文件我们只需要引入WXBizDataCrypt.js就可以了,node文.原创 2021-07-14 19:50:37 · 4996 阅读 · 15 评论 -
微信小程序跳转另一个微信小程序携带参数并接收参数
当前微信小程序wx.navigateToMiniProgram({ appId: 'xxx', // 跳转小程序的appId path: '', // 跳转小程序的路径 extraData: { // 需要带的的参数 id: 1, }, envVersion: 'release', // 有效值 develop(开发版),trial(体验版),releas...原创 2021-03-30 09:17:40 · 10309 阅读 · 1 评论 -
js二维数组去重
var arr = [{ key: '1', value: '乐乐' }, { key: '2', value: '博博' }, { key: '3', value: '淘淘' },{ key: '4', value: '哈哈' },{ key: '1', value: '乐乐' }]; // 方法1:利用对象访问属性的方法,判断对象中是否存在ke...原创 2021-03-10 10:30:18 · 887 阅读 · 0 评论 -
微信小程序更新机制
在app.js// app.jsApp({ onLaunch() { this.autoUpdate() }, // 更新机制 autoUpdate: function() { var _this = this; // 获取小程序更新机制兼容 if(wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() // 1.检查小程序是否原创 2021-02-18 09:38:12 · 692 阅读 · 0 评论 -
微信小程序使用wxParse,解决图片显示路径未拼接问题
另外附上小程序 wxParse的使用方法小程序 转换富文本编辑器的方法先到github下载一个库 https://github.com/icindy/wxParse包含文件夹 -wxParse --wxParse.js(必须存在) --html2json.js(必须存在) --htmlparser.js(必须存在) --showdown.js(必须存在) --wxDiscode.js(必须存在) ...原创 2021-02-18 09:31:55 · 554 阅读 · 0 评论 -
微信小程序实现跑马灯效果(自定义组件详解)
首先看一下效果吧首先我们在项目根目录建一个公共文件夹,这里我命名为components在components里面创建一个组件, dt-horse-race-lamp > index 最后我会把我的目录结构给大家看一下, 代码都有注释,这里我就不做过多的解释了组件wxml<view class="horse-race-lamp"> <!-- 跑马灯效果 --> <view class="example"> <vie...原创 2021-01-27 14:02:01 · 3542 阅读 · 0 评论 -
微信小程序将html转为wxml(超详细)
微信小程序开发虽说是比较偏向前端开发,但是它们的语法结构又不太一样。例如,wxml跟html就有本质的不同,就拿a标签来说吧,wxml是不支持a标签的,还有就是wxml不兼容html,下面小编就针对这个问题来分析一下怎么才能将html转换成wxml。具体步骤如下:到https://github.com/icindy/wxParse下载这里我直接上代码了,不是太难,百度也有很多先看一下我的数据结构创建一个common文件夹,把wxParse放进去在需要的页面js里面引用const原创 2021-01-21 11:36:38 · 7886 阅读 · 16 评论 -
微信小程序截取数组每两个为一组
data:{ currentSwiper: 0, recom_list: [{ avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png', name: '小禾', college: '圣迪斯哥美容博士', praise: '666', advisory: '999' }, { avata.原创 2020-12-17 14:51:45 · 1430 阅读 · 1 评论 -
微信小程序如何本地测试太阳码(二维码)分享功能(参数接收调试)
小程序如何在本地测试获取到太阳码(二维码)中的参数?第一步:把生成的太阳码保存在本地。第二步:在微信开发中工具中运行好项目然后选择添加编辑模式第三步:选择上传文件, 上传之前保存的太阳码,上传过后就在启动参数中获取到了太阳码中的参数,然后点击确定...原创 2020-12-08 17:12:45 · 5913 阅读 · 2 评论 -
前后端分离,前端怎么判断一维数组{}是否为空? (以及解决办法)
一般的逻辑,如果后端返回空,就不往下执行了,这样可以减少消耗性能,也可以提升程序运行的速度这里我就举例说一下了;let list = { a: ["1"], b: ["5"]}; // 例一 //我们想拿到列表里面的数据要执行for循环遍历出来a.forEach((item, index) => { console.log(item) // 这样是不是拿到了,如果list是空数组, 前端不做处理,每次都会执行这个for循环})// 优化原创 2020-12-01 15:11:32 · 2474 阅读 · 0 评论 -
微信小程序setTimeout实现单个倒计时以及循环倒计时(超详细,项目需要做个笔录)
先来看一下效果图吧循环倒计时单个倒计时接下来看一下具体代码吧循环倒计时wxml<!--pages/commodity/commodity-time-limit/index.wxml--><wxs module="format" src="../../../../wxs/format.wxs"></wxs><wxs module="filter" src="../../../../wxs/filter.wxs"></w原创 2020-11-26 11:39:56 · 2731 阅读 · 4 评论 -
微信小程序删除数组指定元素
// 删除方法 remove: function(array, val) { for (var i = 0; i < array.length; i++) { if (array[i] == val) { array.splice(i, 1); } } return -1; }, var array = that.data.compressImg; //你的数组数据 var val = that.data.com..原创 2020-11-21 16:57:34 · 12449 阅读 · 0 评论 -
微信小程序: 动画效果集合(收集的,说不定会用上)
微信小程序:心跳动画https://blog.csdn.net/wtdask/article/details/82734944文字跑马灯效果:http://www.wxapp-union.com/portal.php?mod=view&aid=1038触摸水波涟漪效果:http://www.wxapp-union.com/portal.php?mod=view&aid=1350下拉菜单效果:http://www.wxapp-union.com/portal.php?mod=v原创 2020-11-21 15:05:38 · 2267 阅读 · 0 评论 -
微信小程序实现跑马灯效果(适用场景: 横幅广告,纵向广告等)
<view class="warm-prompt"> <view class="text" style='left:{{offsetLeft}}px'>{{text}}</view> </view>.warm-prompt { background-color: #FFFFFF; height: 82rpx; margin: 0 20rpx; border-radius: 10rpx; display: flex; .原创 2020-11-21 14:03:02 · 3872 阅读 · 3 评论 -
微信小程序web-view的使用教程
最近公司有需求,需要点击小程序首页banner,跳转到别人的h5页面。首先是域名的问题:步骤:先登录小程序开发平台,将页面需要跳转的域名写上去,注意了,域名不是指服务器的域名,而是服务器下面的业务域名 !!!配好了域名之后就可以开始调用web-view了。1.如果你不需要通过点击小程序里面的按钮或者某个view,那么你可以直接在小程序里面直接调用下面的代码即可<web-view src="https://hi.xxx.com/Tickets/html/getScanCode..原创 2020-11-19 11:26:45 · 32344 阅读 · 3 评论 -
微信小程序仿拼多多首页导航按钮
这里我也是参考别人实现的https://blog.csdn.net/zhaohanqq/article/details/84389049https://www.jb51.net/article/143782.htm原创 2020-11-05 18:00:29 · 870 阅读 · 0 评论 -
微信小程序setTimeout实现循环倒计时(根据自己需求写的, 分享一下,有什么问题请指教)
我们先来看一下效果图,我不知道怎么弄动态的,也没时间研究,将就着看吧wxml<view class="like-overall"> <view class="like-chunk back" wx:for="{{list}}" wx:key="index"> <view class="like-image-over" > <image class="like-img" src="{{item.原创 2020-10-27 19:41:59 · 912 阅读 · 0 评论 -
微信小程序实现搜索功能(搜索历史, 清空历史, 搜索发现等操作)
先看看效果图比较简单,不做过多的解释了,直接看代码:html<!--pages/commodity/commodity-search/index.wxml--><!-- 自定义顶部导航 S --><view class="navbar custom-class" style='height:{{navHeight}}px;'> <view class="navbar-action-wrap navbar-action-group row i原创 2020-10-19 11:08:11 · 12314 阅读 · 6 评论 -
微信小程序授权订阅消息判断用户取消或允许
wx.requestSubscribeMessage({ tmplIds: ["brWVvPuoLPI9_i1qo_37LPVLK2jDyTGLuGqLK9Ur9PA"], success: function (res) { if (res["brWVvPuoLPI9_i1qo_37LPVLK2jDyTGLuGqLK9Ur9PA"] == "accept") { console.log("用户允许了") }.原创 2020-10-10 10:00:20 · 4812 阅读 · 2 评论 -
微信小程序开发:禁止输入表情的控制
我们在input输入的时候直接监听输入的value,做一个筛选let reg = /([^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n])|(\s)/g ,如果value中包含表情,我们直接替换掉f(str.match(reg)) { str = str.replace(reg, '原创 2020-09-18 16:18:45 · 1540 阅读 · 0 评论 -
微信小程序点击软键盘搜索按钮(confirm-type=“search“)之后的取值
<input name="search" type='text' confirm-type="search" bindconfirm="bindconfirm" focus='{{focus}}' bindinput='bindinput' ></input>// 点击键盘上的搜索 bindconfirm:function(e){ var that=this; var discountName=e.detail.value['search - inpu.原创 2020-09-14 15:18:50 · 2477 阅读 · 0 评论 -
微信小程序正则匹配手机号
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;if (this.data.Del.length == 0) { wx.showToast({ title: '输入的手机号为空', icon: 'success', duration: 1500 }) return false;} else if (this.data.Del.length < 11) {...原创 2020-08-29 09:18:17 · 921 阅读 · 0 评论 -
微信小程序实现商品轮播图(视频+图片)播放滑动暂停, 点击预览图片等功能
我们现在看看代码,最后看一下效果:核心代码: jsPage({ data: { videoSrc: '', videoImg: '', //视频封面,缓冲时会出现黑屏,加视频封面会提升用户体验,但是ios手机封面图会闪现,不知道怎么解决 autoplay: true, touchX: 0,原创 2020-08-27 16:20:55 · 5445 阅读 · 13 评论 -
关于微信小程序boolean值遇到的坑
我之前在做多商城购物车的时候用的是布尔值做选中效果,但是看到的是true和false当时一时不知道该怎么去解决,也不知道为什么,自己传后端是布尔值,但是返回的却是字符串,所以前端在使用的时候要将字符串转布尔值来使用,这样就没问题了JSON.parse()这样就完美解决了...原创 2020-08-25 14:52:07 · 1942 阅读 · 0 评论 -
微信小程序正则匹配文字不被包含(如包含用空代替)
let provincename = "河南省"; let reg = /['省', '市', '区', '自治区', '壮族自治区', '回族自治区', '维吾尔自治区']/g; if (reg.test(provincename)) { let regroup = provincename.replace(reg, '') console.log(regroup) }...原创 2020-08-22 02:38:05 · 887 阅读 · 0 评论 -
微信小程序的picker使用对象数组
在网上看到《发现微信小程序的picker组件不能直接使用索引数组({key : value}) 正确的使用方法是这样的:data: { Data: [{id:0,value:'a',name:'A' },{id:1,value:'b',name:'B' }], Index: 0, currentId }, <picker class="picker" bindchange="bindChange"...原创 2020-08-22 01:59:36 · 2310 阅读 · 0 评论 -
微信小程序实现电商(商品详情自定义顶部以及滚动监听,瞄点效果)
我们先来看一下效果吧很简单,这里直接复制全部代码了index.wxml<!-- 顶部 S --><view class="index" style="position:fixed;height:{{globalData.CustomBar + 4}}px;padding-top: {{globalData.StatusBar}}px;background-color:#fff;z-index:9999;background: rgba(255, 255, 25原创 2020-08-20 10:39:11 · 609 阅读 · 0 评论 -
微信小程序setTimeout实现无限循环倒计时
适用场景:循环播放视频, 广告,等我这里用一个签到送积分场景广告视频来实现该效果:我们先来看一下效果:原创 2020-08-18 17:13:54 · 1793 阅读 · 0 评论 -
微信小程序自定义tabBar(超详细简单以及tabBar选中效果不改变解决办法)
我们可以先去了解一下官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html老规矩先看一下效果图:项目结构:custom-tab-bar/index.wxml<cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> &.原创 2020-08-16 15:56:16 · 5769 阅读 · 1 评论 -
微信小程序实现吸顶效果
更新中...原创 2020-08-15 09:56:21 · 1425 阅读 · 0 评论 -
微信小程序自定义顶部(实现搜索栏)
wxml<!-- 自定义顶部导航 S --><view class="navbar custom-class" style='height:{{navHeight}}px;'> <view class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;'> <image style="width: 17.5px; height: 2原创 2020-08-10 18:04:26 · 8700 阅读 · 6 评论 -
微信小程序向数组的对象里添加新属性
比如 arr 是数组那么arr.forEach(item => {item.a= 1;}(a:就是添加的属性 1是值)console.log(arr)也可以 直接arr[i][‘a’]=’’原创 2020-08-01 09:08:26 · 4701 阅读 · 0 评论 -
微信小程序对数组的增删改查
微信小程序 数组(增,删,改,查)等操作实例详解微信小程序 数组(增,删,改,查)等操作首先这是原始数据,json的数组。我们尝试对改数据进行操作,同时渲染到页面。1,数据的添加在获取到表单的数据后,自己组装一个对象,然后通过push()的方法添加一条数据,注意push的数据的index是+1的,也就是说原本数组中index依次为0,1,2,新增加的就是3,依次类推。如果想在前面插入数据,就要用到数组合并的操作了,concat()方法可以选择合并到前面或者后面例如..原创 2020-07-31 11:31:51 · 884 阅读 · 0 评论 -
微信小程序 wxs 配置工具函数(时间格式化)
效果图timeUtil.wxs 文件代码 var formatNumber = function (n) { n = n.toString() return n[1] ? n : '0' + n} var regYear = getRegExp("(y+)", "i"); var dateFormat = function (timestamp, format) { if (!format) { format = "yyyy-MM-dd hh:mm:ss";原创 2020-07-18 17:57:13 · 410 阅读 · 0 评论 -
微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器.上gif:上代码:1.index.js//index.js//获取应用实例var app = getApp()Page({ data: { date: '2016-11-08', time: '12:00', array: ['中国', '巴西', '日本', '美国'], index: 0, }, onLoad: functi...原创 2020-07-17 16:25:13 · 759 阅读 · 0 评论 -
微信小程序在WXS中使用split实现金额小数点前的数比后面的大的效果
摘要:在这次微信小程序开发中,有一个关于价格的样式调整。小数点前的数值比小数点后面的的,主要是突出一下。由于接口返回的只有一个字段,所以前端要利用split对相关参数的值进行分割,再配合wxss样式实现最终效果…大纲 一、原型 二、思路分析 三、split()方法 3.1、新增split 类型 3.3、细节优化 3.3.1、方案一:整数时不显示小数 3.3.2、方案二:统一保留两位有效小数 四、demo源码 五、其他说明 一、原型.原创 2020-07-15 13:34:43 · 3581 阅读 · 1 评论 -
微信小程序携带参数返回上级页面
前提:这里我们举例说明, 选择地址的时候,我们一般会在其他页进行选择然后在回到选择页,在这个时候我们跳转到地址列表的时候一定要用wx.navigateTo({})去跳转,为什么用它呢,使用它跳转会保留上页地址,这样我们就可以使用:wx.navigateBack({delta: 1})跳转回来,不详细说了,直接上代码了var username = "123" let pages = getCurrentPages(); let prevPage = page原创 2020-07-13 18:05:05 · 480 阅读 · 0 评论 -
微信小程序 运算符
基本运算符示例代码:var a = 10, b = 20; // 加法运算console.log(30 === a + b);// 减法运算console.log(-10 === a - b);// 乘法运算console.log(200 === a * b);// 除法运算console.log(0.5 === a / b);// 取余运算console.log(10 === a % b);加法运算(+)也可以用作字符串的拼接。var a = '.w' , b =原创 2020-07-10 14:09:23 · 2097 阅读 · 1 评论 -
微信小程序将时间戳转化为年月日时分秒
时间戳注:时间戳包括10位和13位两种,小程序中默认生成的时间戳是13位的。两者的区别是精度不同,13位精确到毫秒,10位精确到秒。实际上,13位时间戳只是比10位的末尾多了000,如果想要转化只要乘除1000即可。直接在util.js定义两个函数一://数据转化function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n}二:/** * 时间戳转化为年 月 日 时 分 秒 * nu..原创 2020-07-06 09:35:59 · 5276 阅读 · 0 评论