bigboy1010的博客

原创 动画实现滚动公告栏

小程序动画实现滚动公告栏HTML：​<view class="box"> <view class="left"></view> <view id="abc" class="content_box"> <view class="content_text" animation="{{animationData}}"><text id="text">滚动公告栏内容</text></view>

转载 小程序公告栏的实现，注意定时器的开关

小程序公告栏的实现，注意定时器的开关// wxml<view class='notice'> <view class="left"> <text class='iconfont icon-labagonggao voice'></text> <view class="left-box"> <view class="left-text"></view> <view class='.

原创 律师小程序

律师小程序终于完结了

原创 小程序计算器一个

wxml：<view class="calculator-container"> <!-- 标题 --> <view class="cal-title"> <view class="cal-title-h1">CALCULATOR</view> <view class="cal-title-h2">-小桐桐计算器-</view> </view> <!-- 计算器显示框

原创 小程序添加自定义字体

下载需要的字体XX.ttf格式，转换成 base64 编码的就可以了，然后就能使用了转换的网址：https://transfonter.org下载之后，把文件里面的xx.css文件复制到小程序的 . wxss文件里就可以这样的 ????然后就可以在小程序中用font-family 调用了，这里要注意，调用的时候小程序字体库不会显示自定义字体的名字，只要写对自定义的名字就可以（坑）...

原创 小程序从开发到发部的完整流程（例：结婚请帖）

最近在家自学微信小程序开发，完成了一个完整的小程序开发流程，由于所有知识都是疫情期间学习的，小程序做的还不是很完美，分享给大家，希望和大家一块互相学习。因为没有后台数据库的知识，所以这里用的小程序云开发，数据直接存储在现成的数据库中。以下是小程序的二维码小程序的注册申请略过，百度上有很多，这里主要写实现方法；1，确定翻页效果的实现这里利用的是通过transform的动画效果，通过判断手指滑动的距离来让页面向上滑动规定的距离（一个页面），之所以没有利用swiper因为手指不动上滑会提前展示

原创 云函数获得数据后，js中往数组中插入对象（取json中关键几个数据拼接成新的数组）

数据方法：

原创 邀请函第一页初见成效，哈哈

1.音乐播放，创建wx.createInnerAudioContext()2.背景显示， @keyframes 改变opacity3.标题，@keyframes 改变位置3.雪花，js随意位置，@keyframes 改变雪花位置回看挺简单，自学的我用了好长时间

原创 背景图片的透明度过度动画

/*背景图片透明度*/@keyframesmyshow{0%{opacity:0;}100%{opacity:1;}}.active.background_img{animation:myshow4slinear;}

原创 动画封装的经典代码

//自定义方法:图片掉下slidedownshow:function(that,param,px,opacity){this.animation=wx.createAnimation({delay:500,duration:2000,timingFunction:'ease',});this.animation.translateY(px).opacity(opacity).step()//转换为JSON格式...

原创 图标的旋转

方法一： 利用CSS来实现图标的旋转（很棒）@keyframesbox-ani{from{transform:rotate(0)}to{transform:rotate(360deg)}}.songimg{border-radius:50%;position:relative;/*margin-left:-30rpx;*/animation:box-ani4sinfinitelinear;}在组件上利用sty...

转载 image+animaton

最近小程序中有一个图片旋转的需求，最初是想着通过切换多张图片达到旋转的效果，后来发现微信小程序带有动画api，然后就改由image+Animation来实现。wechat animation.gif首先在wxml中定义image<image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image>注意其中的animat.

原创 小程序获取时间并以2020-06-06 20:06 格式输出

//订单时间varyear=date.getFullYear();varmonth=date.getMonth()+1;month=month>=10?month:'0'+month;vard=date.getDate();d=d>=10?d:'0'+d;v...

原创 arr.indexOf(i)，检查数组是否存在相应字符串，不存在返回-1，存在返回对应位置下标

应用实例//存储商品idvarids=[];res.result.data.forEach(v=>{//如果当前商品不存在，即不重复，则将当前商品id推进ids数组中if(ids.indexOf(v.id)===-1){ids.push(v.id);}})...

原创 forEach()为数组中的每一项添加一个属性

//添加一个isSlect属性，用于判断是否勾选商品res.result.data.forEach(v=>{v.isSelect=false;})

原创 关于手机键盘遮挡picker问题

如图所示，当输入完手机号时，点击下面的picker的input输入框，就会出现键盘遮挡picker的问题，input的disable已经设置为true，有没有好多解决遮挡的方法，没办法就只能先写地址，后写电话了

原创 从一个对象中获取特定的成员组成一个新的对象用forEach（）循环遍历

一个存放地址数据的对象从存放地址的对象中获取特定的对象，并从存放到新的对象中

转载 使用 for ，for in和forEach遍历数组

for和for/in语句都可以迭代数组。for语句需要配合length属性和数组下标来实现，执行效率没有for/in语句高。另外，for/in语句会跳过空元素。对于超长数组来说，建议使用for/in语句进行迭代。示例1下面示例使用for语句迭代数组，过滤出所有数字元素。var a = [1, 2, ,,,,,,true,,,,,,, "a",,,,,,,,,,,,,,,4,,,,,56,,,,,,"b"]; //定义数组 var b = [], num ...

原创 检测输入表单是否为空的方法

原创 for(var key in data）循环遍历函数

for in 循环中key在对象和数组代表的值不一样，对象中即为对象名，数组中即为下标index；举例如下：1.获取对象中的键（key）与值（value）：var data = {name:'小花',age:'17岁',sex:'男'};for (var a in data) { console.log(a); /*属性名*/ console.log(data[a]); /*属性值*/};2.获取数组中的值var a =...

原创 picker组件套用input组件，点击弹出手机键盘，该如何关闭键盘

这个问题很简单直接用input的disable属性即可<pickermode="region"bindchange="modifyAddress"><inputclass="flitem-content"placeholder="请输入收货地址"disabled="true"value="{{addressData.address}}"></input>...

转载 正则表达式

字符串是编程时涉及到的最多的一种数据结构，对字符串进行操作的需求几乎无处不在。比如判断一个字符串是否是合法的Email地址，虽然可以编程提取@前后的子串，再分别判断是否是单词和域名，但这样做不但麻烦，而且代码难以复用。正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。所以我们判断一个字符串是否是合法的Email的方法是： 创建一个匹配Email的正则表达式；

原创 检测输入手机格式是否正确的方法

modifyPhone:function(e){ //正则表达式，验证手机号格式//\d:表示[0-9]//^：开头//$:结尾varphoneReg=/^1[3456789]\d{9}$///如果验证失败，返回falseif(!phoneReg.test(e.detail.value)){wx.showToast({title:'手机号格式不正确',...

原创 休息之余，抒情片刻

最近喜欢上了小程序开发，也不算是一时冲动，很早之前就想接触这个行业，但是总是忙着现在的工作而没精力做自己喜欢的事情，也是正好碰到了这次影响深远的疫情，被迫呆在家里不能出门，也正好借此呆在家里的大好时间，专心的学习一下自己一直想学但是又没有时间学习的小程序开发。 到现在已经基本学习快两个月的时间了，通过一些视频和文档的学习，现在初步了解了小程序的一些组件和API的使用，虽然都看了一遍，但是好多地方特别是比较专业的东西对我来说挺难，还好有百度，这个神奇的网址帮助我解决了很多的问题。现在正...

原创 float布局，清除浮动的常用方法

清除浮动时，只能在父元素中清除，父元素的class=“ clearfix”.clearfix::after{content:'';display:block;clear:both;}

原创 小程序API：wx.createInnerAudioContext()的坑

三句话足以OK，但是一定要注意，这里不支持相对路径，而是从根目录开始

原创 navigator组件学习记录

小程序开发文档：navigatorhttps://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

原创 普通选择器中rang-key属性

在picker组件中，普通选择器有一个rang-key的属性，这个属性其实仅仅是方便看到每个数值对应的id，就是对应的e.detail.value值，也就是说没有太大的作用，普通的arr效果页一样wxml（无rang-key）wxml(有rang-key)，注意rang-keky的赋值，“name”或者“{{‘name’}}”都可，后者name需要单引号js效果（效果相...

原创 wx:for-item的一个小坑

使用wx:for-item可以指定数组当前元素的变量名，使用wx:for-index可以指定数组当前下标的变量名：在指定变量名时，字符中不可用“-”符号，负责声明不管用例如：wx:for-item="type-itme"错误写法wx:for-item="typeItme" 正确写法...

原创 swiper不能显示的问题

第一次记录踩的坑，防不胜防swiper中轮番播放三个色块，父容器的class为"container"时不能显示出来，现象为白屏，当把container改为其它即可，container应该为swiper的保留字符，//container改为其他，如：mycontainer<viewclass="container"><swiper>...

原创 倒计时函数

js中显示时分秒的倒计时函数，商城倒计时抢购中，，

原创 小程序搜索框的实现和搜索历史记录的实现

这段时间自学小程序编程，从组件到API的学习后，编写的第一个较为综合的小案列，编写搜索框对初学者来说最重要也是最难理解的就是定位和布局：position和display，大家一定要先把这两个属性理解透彻。这里暂时没有写点击各组件之后对应的事件，.wxml.mxss————————————2.也可以利用label组件让搜索框看着更高级一点，如下.wxml...

转载 Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display:flex; display:inline-flex;}Webkit内核的浏览器，必须加上-webkit前缀.box{ display:-webkit-flex; display: flex;}解决兼容性问题...

原创 弹性布局

记录弹性布局的学习总结弹性布局的属性：display：flex | inline-flex；（适用于父类容器上）两种方式的不同之处在于一个纵向排列，一个横向排列，如下图flex-folw （适用于父类容器上）复合属性。就是可以同时设置以下两个值flex-direction （适用于父类容器的元素上）：设置或检索伸缩盒对象的子元素在父容器中的位置。如果元素的大小超过父容器，元素...

原创 布局（一）——流体浮动布局

记录一下自学过程中对布局的自我理解一，流体布局流体布局通俗的讲就像水上偏流的“盒子”一样，哪有缝隙往哪里流动，前提是缝隙放的下“盒子”的宽度，这里的“盒子”宽度用百分比表示，即：width：40%，（相对整个body的宽度），这也算是流体布局的一大优点，可以铺满屏幕属性用到：float ：(为“盒子”添加浮动特性)值 描述 left 元素向左浮动。 r...

原创 盒子模型的学习记录

盒子模型可以用以下几张图片，直观的展示出来Content：为输入的内容，Padding：与父元素的边框的距离（可比作包裹内容的容器），Border：父元素的边框，（容器的壁）Margin：容器与Body的距离再往外就是浏览器的边框了盒子模型包括的属性：一，padding 属性: 元素的内边距；——————————————————————————————...

转载 escape()、encodeURI()、encodeURIComponent()区别详解

escape()、encodeURI()、encodeURIComponent()区别详解JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent 。下面简单介绍一下它们的区别1 escape()函数定义和用法...

转载 json.stringify()的妙用，json.stringify()与json.parse()的区别

json.stringify()的妙用，json.stringify()与json.parse()的区别一、JSON.stringify()与JSON.parse()的区别最近做项目，发现JSON.stringify()使用场景真的挺多，我们都知道JSON.stringify()的作用是将JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转...

转载 关于let与var在for循环中不同表现效果

比如：如果在微信小程序中要遍历输出 0-9 的数，我们会使用for循环for(var i=0;i<10;i++){ console.log(i); }确实结果也是这样：但是，如果我在循环时同时调用wx的api接口10次，那么输出的结果就会不同（这是产生了闭关的效应）eg：每次调用一次wx.showToast()接口,并在成功时输出循环的值。fo...