star-focus-timer制作笔记

2019/07/13

搞清楚module.exports 和 exports，以及ES6的export 和 export default

1.小程序语法

image.png
image.png

2.es6语法也可以

image.png
image.png

不写export default { sayHello}，报错

2019/07/14

如何满铺背景图片 还不变形

一个优秀的api-----mode="aspectFill"
（本地图片就是事多，，网络图片：background-size: cover;）

<view class="container">
 <image src="../../images/time2.jpg" class="imageStyle" 
   mode="aspectFill"></image>
 <t-button class="timerButton" text="开始专注" color="transparent"></t-button>
</view>

.imageStyle{
  position: fixed;
  z-index: -99;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.timerButton{
  position: absolute;
  bottom:160rpx;
}

小程序的开发文档，发现image容器有一个mode属性来控制图片的缩放和裁切方式。
mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
模式 值 说明
缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变
裁剪 top 不缩放图片，只显示图片的顶部区域
裁剪 bottom 不缩放图片，只显示图片的底部区域
裁剪 center 不缩放图片，只显示图片的中间区域
裁剪 left 不缩放图片，只显示图片的左边区域
裁剪 right 不缩放图片，只显示图片的右边区域
裁剪 top left 不缩放图片，只显示图片的左上边区域
裁剪 top right 不缩放图片，只显示图片的右上边区域
裁剪 bottom left 不缩放图片，只显示图片的左下边区域
裁剪 bottom right 不缩放图片，只显示图片的右下边区域

按钮按下的样式怎么不改变？？？

微信小程序中，可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意，大部分组件是不支持该属性的。
目前支持 hover-class 属性的组件有三个：view、button、navigator。
不支持 hover-class 属性的组件，同时也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 这三个属性。
当 hover-class 的值为 none 时，组件上不会有任何点击态效果。

除了写：hover-class="button-hover"
还有 权重问题！

.button-hover {
  opacity: 0.8 !important;
}

<button class="default-button hover-class="button-hover">{{text}}</button>

就搞定了~~

垂直居中

上代码。哎，老是把display:flex写到子组件里

image.png

2019/07/15

如何实现唱片转动和暂停效果

先不谈兼容问题，一直以为是兼容没效果，结果是少一行代码
状态叠加？？？？

/* 动画 */
@keyframes spin {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}
.spin{
    animation: spin 10s infinite linear;
}
.pause {
    animation: spin 10s infinite linear;
    animation-play-state: paused;
  }

参考文章个人感受：
👍https://www.quackit.com/css/css3/properties/css_animation-play-state.cfm
👀https://segmentfault.com/a/1190000015808298
https://www.cnblogs.com/yangrenmu/p/7085815.html
👍https://blog.csdn.net/wojiong132/article/details/70148190/
https://blog.csdn.net/hello_java_/article/details/82975314
最后，真机（iOS）真的会失败吗？留个坑

iphone6里 1rpx=0.5px ，但真没感觉有多细啊~~~

用投影的做法，叠加透明的投影 很难看！实验失败

考虑：计时中 、已暂停、已完成 3种状态的界面UI

所以造轮子的时候要灵活

这么写回到首页会报错 不知道为啥

image.png

注意改变变量的原因，决定了不同写法

this.setData({ totalSecond: 1500 })
this.data.totalSecond = 1500

2019/07/16 （今天要把基本页面、基本功能写完）

小程序特有 api scroll-view 横向和纵向scroll-view组件

scroll-view为滚动视图，分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面。在此是个列表 image.png

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

差点又忘记~~~传说中的热区？

image.png

删某个列表

1.给这个列表做标记： data-index="{{index}}"
2.取到这个做了标记的对象

image.png

数组两个api concat splice

好用哟！

navigateor的跳转api

image.png

<scroll-view>有坑!有默认标签样式

设置flex啊position啊不管怎么弄，都不能水平居中，，，压根不需要什么水平居中，设置宽度有默认的居中。。。。。哈哈哈哈

两层循环还是要想一想

2019/07/17

艾玛，，jsonp ajax axios Promise aync...await我得复习一下。。。都忘啦

const { host } = getApp().globalData

第一步都是要让页面与App.js产生关联。所以在页面的对应的JS中，第一句话就要写上：
//获取应用实例
var app = getApp()
那么，globalData是个啥？！

image.png

host又是什么?哦，对，之前已在globalData里定义的一个属性，管路件的。
太智能了 这参数是自动生成了~

image.png

2019.7.18

报错大抓狂😩

封装个HTTP昨晚就开始各种抓狂，先是没有认证域名信息，只写了一个request，结果是4个都要填。然后就是PUT请求403，，检查的时候要看Preview，响应回来的数据，，这个功能很强大。结果是我把中划线写成了下划线。。。搞了大半天

登录按钮

<button open-type='getUserInfo' bindgetuserinfo='login' withCredentials="true">登录</button>

又给我报错!!!

image.png

搞清楚 wx.request 的文档，各种debug了好久。过程是~~.put可以 .push不行，，，原来是data和params没搞清楚：

- GET - 从指定的资源请求数据。

- POST - 向指定的资源提交要被处理的数据

GET 方法的 http body 服务器都不去读取的。因为 GET 传输数据本来就应该通过 url 的 prarameters 来传。如果要通过 http body 来传，应该用 POST 。

- PUT - data和params都可以嘛？！！

403 （禁止） 服务器拒绝请求。
500 （服务器内部错误） 服务器遇到错误，无法完成请求。（解决办法传参数不正确）
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
404
422

如何保存传来的值

image.png

读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符。

我重置了小程序的秘钥，然后悲剧了~~~~~~

2019/07/19

怎么拿到数组对象中，所有completed值为true的数量?----filter

有个问题啊~~~删掉的todolist只是界面的，服务器上并没有删除，一刷新就又出来了！！！！

了解一下：本地缓存wx.setStorageSync()使用技巧

同一个微信用户，同一个小程序 storage 上限为 10MB。
任何一种缓存都存在过期时间，只不过微信默认的机制是设置了无限长的过期时限，但是对于我们的应用开发中，这确是一个致命的缺陷。

• 一个小改动，引发大思考，，哈哈哈，，，所谓的前端和后端是分离的，，代码还要再改过来~~~

2019/07/20 （一天天的过得好快！！）

• data-indexdata-id 微信小程序自定义属性设置和获取（data-）
  👍https://blog.csdn.net/qq_41999617/article/details/83449841
• 微信小程序实现给循环列表点击添加类（单项和多项）
  👍https://blog.csdn.net/rolan1993/article/details/78709602
  visibility:hidden; visibility:visible;要注意

组件的生命周期运用

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

2019/07/21 （今天要完成功能，然偶开始美工）

Util是utiliy的缩写，是一个多功能、基于工具的包。

在小程序里使用阿里妈妈

https://blog.csdn.net/yingleiming/article/details/82691032

在小程序里使用Echart

功能到这里告一段落，俺去画图了~~~

7.23
微信小程序自定义底部导航带跳转https://blog.csdn.net/qq_38815953/article/details/81274230