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 (一天天的过得好快!!)
组件的生命周期运用

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容