9月21日知识点记录

一.Laravel自定义验证

手动创建一个 validator 实例并通过Validator::make
方法在 facade 生成一个新的 validator 实例:

public function store(Request $request) 
{ 
$validator = Validator::make($request->all(), [ 'title' => 'required|unique:posts|max:255', 'body' =>       'required', ]); 
if ($validator->fails()) 
{ return redirect('post/create') ->withErrors($validator) ->withInput(); }  
}}

第一个传给make
方法的参数是验证数据。第二个参数则是数据的验证规则。
如果请求没有通过验证,则可以使用withErrors
方法把错误消息闪存到 session。在进行重定向之后,$errors
变量可以在视图中自动共用,让你可以轻松地显示这些消息并返回给用户。withErrors
方法接收 validator、MessageBag,或 PHParray

二.微信小程序

1.首行缩进和空格

\n换行 \t空格    
首行缩进->Text-indent:40px;
在text组件中添加decode="{{true}}"属性,text组件就可以识别 < > & '
2.尺寸单位

·rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下:

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx

三.其他知识点

1.小程序快捷键

格式调整
- Ctrl+S:保存文件
- Ctrl+[, Ctrl+]:代码行缩进
- Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
- Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
- Shift+Alt+F:代码格式化
- Alt+Up,Alt+Down:上下移动一行
- Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
- Ctrl+Shift+Enter:在当前行上方插入一行

光标相关
- Ctrl+End:移动到文件结尾
- Ctrl+Home:移动到文件开头
- Ctrl+i:选中当前行
- Shift+End:选择从光标到行尾
- Shift+Home:选择从行首到光标处
- Ctrl+Shift+L:选中所有匹配
- Ctrl+D:选中匹配
- Ctrl+U:光标回退

界面相关
- Ctrl + \:隐藏侧边栏
- Ctrl + m: 打开或者隐藏模拟器

2.样式导入

可以使用@import语句来导入外联样式表,其后面跟需要导入外联样式表的相对路径,并以分号结束。
例如:
/** other.wxss **/ .appText{ margin:10px; }
/** app.wxss **/ @import "other.wxss"; .content_text:{ margin:15px; }

app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖
wxss样式属性
a、wxss display(显示)
属性 说明
flex 多栏多列布局 flex-direction:row/column
inline-block 行内块元素
inline 此元素会被显示为内联元素,元素前后没有换行符
inline-table 作为内联表格来显示(类似 <table>),表格前后没有换行符
inline-flex 将对象作为内联块级弹性伸缩盒显示
none 此元素不会被显示
block 此元素将显示为块级元素,此元素前后会带有换行符
list-item 此元素会作为列表显示
table 会作为块级表格来显示(类似 <table>),表格前后带有换行符
table-caption 作为一个表格标题显示(类似 <caption>)
table-cell 作为一个表格单元格显示(类似 <td> 和 <th>)
table-column 作为一个单元格列显示(类似 <col>)
table-column-group 作为一个或多个列的分组来显示(类似 <colgroup>)
table-row 作为一个表格行显示(类似 <tr>)
table-row-group 作为一个或多个行的分组来显示(类似 <tbody>)
table-header-group 作为一个或多个行的分组来显示(类似 <thead>)
table-footer-group 作为一个或多个行的分组来显示(类似 <tfoot>)
inherit 从父元素继承 display 属性的值
flex:多栏多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml

b、wxss position(定位)
属性 说明
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
inherit 规定应该从父元素继承 position 属性的值

c、wxss float(浮动)
属性 说明
left 元素向左浮动
right 元素向右浮动
none默认值 元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

d、wxss background(背景)
属性 说明 语法(属性值)
background 简写属性,作用是将背景属性设置在一个声明中 background: color position size repeat origin clip attachment image;
background-color 指定要使用的背景颜色
background-position 指定背景图像的位置 background-position:center
background-size 指定背景图片的大小 background-size:80px 60px;宽度 高度
background-repeat 指定如何重复背景图像 repeat,repeat-x,repeat-y,no-repeat,inherit
background-origin 指定背景图像的定位区域 padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
background-clip 指定背景图像的绘画区域 属性值,同上
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承
local 背景图片随滚动元素滚动
background-image 指定要使用的一个或多个背景图像 url('URL') 图像的URL
none 无图像背景会显示。这是默认
inherit 指定背景图像应该从父元素继承

e、wxss border(边框)
属性 说明 语法(属性值)
border 简写属性,用于把针对四个边的属性设置在一个声明 border:5px solid red;
border-width 用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度 border-top-width 上右下左边框厚度 属性值:thin medium thick length
border-style 设置元素所有边框的样式,或者单独地为各边设置边框样式。 border-top-width 上右下左边框样式 属性值:solid,dashed,dotted,double等
border-color 元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色 border-top-width 上右下左边框颜色

f、wxss 轮廓(outline)
属性 说明 语法(属性值)
outline 在一个声明中设置所有的外边框属性 outline: outline-color, outline-style, outline-width
outline-color 设置外边框的颜色
outline-style 设置外边框的样式。 属性值:solid,dashed,dotted,double等
outline-width 设置外边框的宽度 属性值:thin medium thick length

g、wxss 文本属性(text)
属性 说明 语法(属性值)
color 设置文本颜色
direction 设置文本方向。 ltr:文本方向从左到右;rtl:文本方向从右到左
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本 left:把文本排列到左边。默认值,由浏览器决定。
right:把文本排列到右边。
center:把文本排列到中间。
justify:实现两端对齐文本效果。
inherit: 规定应该从父元素继承 text-align 属性的值。
text-decoration 向文本添加修饰 underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影 text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置,允许负值;
v-shadow:垂直阴影的位置,允许负值;
blur:模糊的距离;
color:阴影的颜色
text-transform 控制元素中的字母 capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

h、wxss 字体属性(font)
属性 说明 语法(属性值)
font 在一个声明中设置所有字体属性 font:font-style font-variant font-weight font-size/line-height font-family(按顺序)
font-style 指定文本的字体样式 normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
font-variant 以小型大写字体或者正常字体显示文本 normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。
font-weight 指定字体的粗细 normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
inherit 规定应该从父元素继承字体的粗细。
font-size 指定文本的字体大小 smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
font-family 指定文本的字体系列

h、wxss margin(外边距)(margin)
属性 说明 语法(属性值)
margin 在一个声明中设置所有外边距属性。 margin:10px 5px 15px 20px;(上边距,右边距,下边距,左边距)
margin-top 设置元素的上外边距。
margin-right 设置元素的右外边距。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距

i、wxss padding(填充)(padding)
属性 说明 语法(属性值)
padding 使用缩写属性设置在一个声明中的所有填充属性 padding:10px 5px 15px 20px;(上填充,右填充,下填充,左填充)
padding-top 设置元素的顶部填充。
padding-right 设置元素的右部填充
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充

j、wxss 选择器
选择器 样例 样例描述
.class(类选择器) .intro 选择所有拥有class="intro"的组件

id(id选择器) #firstname 选择拥有id="firstname"的组件

element view 选择所有view组件
element, element view checkbox 选择所有文档的view组件和所有的checkbox组件
::after view::after 在view组件后边插入内容
::before view::before 在view组件前边插入内容

微信小程序的文档手册https://www.w3cschool.cn/weixinapp/9wou1q8j.html

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,978评论 1 4
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,219评论 1 41
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,018评论 0 1
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,468评论 0 11