微信小程序支付总结,弹性盒子布局

By admin in 4858美高梅 on 2019年3月28日

那段时光一向在做小程序,计算下。后续可能会不断更新,努力写仔细点,争取让人来看就能会写。

转载:

  1. 微信小程序支付总结,弹性盒子布局。基本概念
    其余七个容器都足以钦赐为flex(弹性布局)
    行级元素:display:inline-flex
    webkit内核浏览器:display:-webkit-flex
    安装为flex布局后,子成分的float、clear、vertical-align属性失效
    容器暗中同意为两根主轴:水平的主轴和垂直的交叉轴
  2. 容器的六大属性
    a. flex-direction 决定主轴的主旋律 暗中认可为row
    flex-direction:row/row-reverse/column/column-reverse
    row:主轴为水平方向,起源在左手
    row-reverse:主轴为水平方向,起源在右手
    column:主轴为垂直方向,起点在下面
    column:主轴为垂直方向,源点在下边
    b. flex-wrap 当一条主轴上排列不下时,如何换行 私下认可为nowrap
    flex-wrap:nowrap/wrap/wrap-reverse
    nowrap:不换行
    wrap:换行,第二行展现在上头
    wrap-reverse:换行,第一行显示在地点
    c. flex-flow flex-direction和flex-wrap的简写方式,暗中同意为row nowrap
    flex-flow:flex-direction || flex-wrap
    d. justify-content 项目在主轴上的来头
    justify-content:flex-start/flex-end/center/space-between/space-around
    flex-start:左对齐
    flex-end:右对齐
    center:居中
    space-between:两端对齐,项目里面包车型客车间距相等
    space-around:各个门类两侧的间隔都等于,所以项目里面包车型大巴间距比项目与边框的区间大一倍
    e. align-items 项目在交叉轴上怎么着对齐 暗许值为stretch
    align-items:flex-start/flex-end/center/baseline/stretch
    flex-start:交叉轴的起源对齐
    flex-end:交叉轴的巅峰对齐
    center:交叉轴的中式点心对齐
    baseline:项指标首先行文字的基线对齐
    stretch:项目未设置中度或可观为auto时,将占满整个容器的惊人
    f.align-center
    f. align-content 多根轴线的对齐方式,一根轴线时不起功能,暗许为stretch
    align-content:flex-start/flex-end/center/space-between/space-around/stretch
    flex-start:与交叉轴的起源对齐
    flex-end:与交叉轴的顶点对齐
    center:与交叉轴的中式点心对齐
    space-between:与接力轴两端对齐,轴线之间的间隔平均分布
    space-around:每根轴线两侧的距离都等于,所以轴线之间的间距比轴线与边框之间的间距大学一年级倍
    stretch:轴线占满整个交叉轴
  3. 体系的六大属性
    a. order 项目标排列顺序,数值越小,排列越靠前,暗许值为0
    order:int
    b.flex-grow 项指标放大比例,私下认可为0,假如存在剩余空间也不松开
    flex-grow:number
    假定具有品类的flex-grow属性都为1,则它们将等分剩余空间(假如局地话)。假设叁个类型的flex-grow属性为2,别的类型都为1,则前者占据的多余空间将比任何项多一倍。
    c.flex-shrink 项目的压缩比例,默许为1,借使空间不足也不裁减
    flex-shrink:number
    设若具有项目标flex-shrink属性都为1,当空间欠缺时,都将等比例减少。要是3个类其余flex-shrink属性为0,别的品类都为1,则空间欠缺时,前者不收缩。
    负值对该属性无效
    d.flex-basis
    在分配多余空间之前,项目占用的主轴空间,浏览器遵照那几个性情,计算主轴是或不是有剩余空间,私下认可值为auto,即项目本来的高低
    flex-basis:lenght | auto
    能够设置为width\height属性一样的值,项目占用一定空间
    e.flex
    flex属性是flex-grow,flex-shrink,flex-basis的简写,暗许值为:0 1
    auto,后四个属性可选
    flex: none | [ <‘flex-grow’> <‘flex-shrink’> ||
    <‘flex-basis’> ]
    f.
    align-self属性允许单个项目有与其余项目不相同的对齐格局,可覆盖align-items属性。默许值为auto,表示继续父成分的align-items属性,假若没有父元素,则等同stretch。
    align-self: auto | flex-start | flex-end | center | baseline |
    stretch

二〇〇九年,W3C 提出了一种新的方案—-Flex
布局,能够方便、完整、响应式地促成种种页面布局。如今,它早已获得了具有浏览器的扶助,那象征,今后就能很安全地行使那项功用。

一,页面结构。

小程序开发总计(详细)

那段时光一贯在做小程序,总括下。后续可能会不断更新,努力写仔细点,争取令人观察就能会写。

一,页面结构。

4858美高梅 1

 

那基本是小程序的正统目录结构。大家从上到下解释下:pages文件夹放置大家全数应用的页面,基本是3个页面三个文件夹,类似模块。种种页面中,有几个文本(有的恐怕不会有.json文件)。分别是:js/json/wxml/wxss.

.js:是页面包车型大巴脚本文件,是必备的。在这么些文件中大家得以监听并拍卖页面包车型地铁生命周期函数、获取小程序实例,表明并处理多少,响应页面交互事件等。

.json:是页面包车型客车安插文件,页面包车型客车安排文件是非须求的。当有页面包车型地铁配置文件时,配置项在该页面会覆盖
app.json 的 window
中一致的布置项。假如没有点名的页面配置文件,则在该页面一贯利用 app.json
中的私下认可配置。

.wxml:是页面包车型大巴组织文件。是必需的。约等于我们常用的html。

.wxss:是页面包车型大巴样式表,页面包车型地铁样式表是非须求的。


 

接下去的目录是个public文件夹,那是自身要好新建的公文夹,用来存放在图片等。

下边是个tpl文件夹,template,正是存放页面所用到的模板文件。都以上下一心新建的。

最下边是个utils文件夹,里面有一个utils.js,一般大家会在里边放入一些公用类的法子,比如封装好的片段通用的办法。可供我们每时每刻调用。

最上面是多个app.js/spp.json/app.wxss/project.config.json
其中的前多少个,是整整项指标为主。

app.js是小程序的本子代码。大家得以在这一个文件中监听并拍卖小程序的生命周期函数、注明全局变量。

app.json是对任何小程序的全局配置。大家能够在这一个文件中安排小程序是由哪些页面组成,配置小程序的窗口,背景象,配置导航条样式,配置私下认可标题。注意该公文不可添加任何注释!

app.wxss是一体小程序的公家样式表。大家得以在页面组件的 class
属性上平素行使 app.wxss 中声称的样式规则。

project.config.json是连串的布署文件,里面有大家富有体系布局的音信,包涵是不是协理es6,appid等装置和音信。


……

二,wxhl语法

wxhl跟html一样,都有友好标签的语法规则。不一致相比较大的,div块成分,都以用<view></view>那种双标签。而且,不存在有h5新标签:header等。

img标签:<image></image> 双标签

文字标签:<text></text>双标签

a标签:<navigator url=”../navigator/navigator?title=小编是navi”>跳转到新的页面</navigator>
(同时也是页面跳转的二个艺术)

越来越多的不等,我们不在标签上详细描述。大家来谈一谈,小程序最好的布局情势。flex布局

什么是flex布局?

display:flex  是将成分作为弹性伸缩盒呈现,早在css3就有。

举个例证:定义三个容器,里面富含多少个子成分。

<div style="width:400px; height: 120px; background: #ddd;  display: flex;flex-flow: row;">
    <div style="border: #fff solid 1px;  width: 100px;>jquery特效</div>
    <div style="border: #fff solid 1px;  width: 100px;><a href="">微信小程序开发</a></div>
    <div style="border: #fff solid 1px; width:100px;><a href="">web前端开发</a></div>
</div>

1. Flex搭架子是什么?

Flex是发了flexbox
的缩写,意为“弹性布局”,用来为盒子状模型提供最大的油滑。

别的一个器皿都足以钦点为 Flex 布局。

.box{ display:flex; }

行内成分也足以选用flex布局  .box{ display:inline-flex; }

在webkit内核浏览器,必须加前缀-webkit  .box{ display:-webkit-flex; }

留意:设flex布局后,子成分的float、clear、vertival-align属性都将失效。

4858美高梅 2

display flex容器的属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

2. 成员

动用 Flex 布局的成分,称为 Flex 容器(flex
container),简称”容器”。它的拥有子成分自动成为容器成员,称为 Flex
项目(flex item),简称”项目”。

容器暗中同意存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross
axis)。主轴的初始地点(与边框的交叉点)叫做main start,截止地点叫做main
end;交叉轴的发端地点叫做cross start,甘休地方叫做cross end。

4858美高梅 3

 

flex-direction属性

flex-direction属性决定主轴的可行性(即项目标排列方向)。

  1. .box {  
  2.   flex-direction: row | row-reverse | column | column-reverse;  
  3. }  
  • row(暗中同意值):主轴为水平方向,源点在左端。
  • row-reverse:主轴为水平方向,起源在右端。
  • column:主轴为垂直方向,起源在上沿。
  • column-reverse:主轴为垂直方向,源点在下沿。

4858美高梅 4

 

 

3.flex属性

– flex-direction   – flex-wrap    – flex-flow

– justify-content     – align-items    -align-content

3.1 flex-direction属性

flex-direction 属性决定主轴的自由化(即项目的排列方向)

.box { flex-direction: row |  row-reverse |  column  |  column-reverse
 }

row(暗中认可值):主轴为水平方向,源点在左端

row-reverse:主轴为水平方向,源点在右端

column:主轴为垂直方向,起源在上沿

column-reverse:主轴为垂直方向,起源在下沿

3.2 flex-wrap 属性

私下认可景况下,项目都排在一条线上(又称“轴线”)上。flex-wrap属性定义,要是一条轴线排不下,怎样换行

.box{ flex-wrap: nowrap  |   wrap   |   wrap-reverse;

nowrap(默认):不换行

wrap:换行,第②行上方

wrap-reverse:换行,第3行下方

3.3 flex-flow 属性

flex-flow 属性是 flex-direction 和 flex-wrap 的简写,私下认可值为 row
nowrap。

.box{ flex-flow:<flex-direction>  ||  <flex-wrap>

3.4 justify-content 属性

justify-content 属性定义了品种在主轴上的对齐方式

.box{ justify-content: flex-start  |  flex-end |  center  |
 space-between  | space-around; }

flex-start(默认值):左对齐

flex-end: 右对齐

center:居中

space-between:两端对齐,项目里面包车型地铁间距都相当

space-around:
每一个项目两侧的间距相等。所以,项目里面包车型地铁区间比项目与边框的区间大学一年级倍。

3.5 align-items 属性

align-items 属性定义项目在陆续轴上如何对齐。

.box { align-items : flex -start  || flex- end  ||  center  || baseline 
||  stretch ; }

flex-start : 交叉轴的起源对齐

flex-end:交叉轴的顶点对齐

center:交叉轴的中式点心对齐

baseline:项指标首先行文字的基线对齐

strech(暗中认可值):倘若项目未安装中度或设为auto,将占满整个容器的万丈

3.6 align-content 属性

align-content
属性定义了多根轴线的对齐格局。如若项目之有一根轴线,该属性起效果

.box { align-content : flex -start  || flex- end  ||  center  ||
space-between ||  space-around  ||  stretch ; }

flex-start : 与交叉轴的起源对齐

flex-end:与交叉轴的极端对齐

center:与交叉轴的中式点心对齐

space-between:与接力轴两端对齐,轴线之间的间隔平均分布

space-around:每根轴线两侧的距离都等于。所以,轴线之间的间隔比轴线与边框的间距大学一年级倍

stretch(暗中同意值):轴线占满整个交叉轴

这基本是小程序的正统目录结构。大家从上到下解释下:pages文件夹放置大家具备应用的页面,基本是三个页面一个文件夹,类似模块。各样页面中,有多少个文本(有的只怕不会有.json文件)。分别是:js/json/wxml/wxss.

flex-wrap属性

私下认可情状下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如若一条轴线排不下,怎样换行。

  1. .box{  
  2.   flex-wrap: nowrap | wrap | wrap-reverse;  
  3. }  

(1)nowrap(默认):不换行。

4858美高梅 5

(2)wrap:换行,第叁行在上面。

4858美高梅 6

(3)wrap-reverse:换行,第3行在下方。

4858美高梅 7

 

4.类别的质量

-order     -flex-grow      -flex-shrink

– flex-basis    – flex      -align-self

4.1 order属性

order属性定义项指标排列顺序。数值越小,排列越靠前,暗许值为0。

.item{ order : <integer> ;

4.2 flex-grow 属性

flex-grow属性定义项目标放大比例,暗许值为0,即倘若存在剩余空间,也不放大。

.item{ flex-grow: <number> ; /* 默认为0 */

万一具有类型的flex-grow属性都为1,则它们将等分剩余空间(假设局部话)。假使二个体系的flex-grow属性为2,别的体系都为1,则前者占据的多余空间将比其余项多一倍

4.3 flex-shrink 属性

flex-shrink
属性定义了品种的裁减比例,暗中同意为1,即假设空间不足,该项目将缩短。

.item { flex-shrink:<number>; /* 默认 1 */ }

倘若全部类型的flex-shrink属性都为1,当空间不足时,都将等比例减弱。如果一个档次的flex-shrink属性为0,其余体系都为1,则空间不足时,前者不裁减。

4.4 flex-basis 属性

flex-basis
属性定义了在分配多余空间此前,项目占据的主轴空间。浏览器根据这么些天性,总结主轴是或不是有结余空间。他的暗中同意值为auto,即项目本来的尺寸。

.item { flex-basis:<lengh>  | auto  ; /* 默认 auto */

它能够设为跟width或height属性一样的值(比如350px),则项目将占据一定空间。

4.5 flex 属性

flex 属性是flex-grow,flex-shrink 和 flex-basis 的简写,私下认可值为 0 1
auto。后七个属性可选

.item { flex:none | [ <flex-grow> <flex-shrink>? | |
<flex-basis> ]

该属性有八个快速键:auto (1 1 auto) 和 none (0 0 auto )

提出优用那几个本性,而不是独自写多个分别的属性,因为浏览器会推算相关值。

4.6 align-self 属性

align-self属性允许单个项目有与任何体系分化的对齐格局,可覆盖align-items属性。暗许值为auto,表示继续父成分的align-items属性,假使没有父成分,则等同stretch。

.item{align-self:auto | flex-start | flex-end | center | baseline |
stretch;}

该属性大概取陆个值,除了auto,其余都与align-items属性完全一致。

.js:是页面包车型客车剧本文件,是要求的。在这几个文件中大家得以监听并拍卖页面包车型客车生命周期函数、获取小程序实例,注解并处理数量,响应页面交互事件等。

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写方式,默许值为row
nowrap。

 

  1. .box {  
  2.   flex-flow: <flex-direction> || <flex-wrap>;  
  3. }  

.json:是页面包车型客车布局文件,页面包车型地铁安排文件是非须求的。当有页面包车型客车配置文件时,配置项在该页面会覆盖
app.json 的 window
中一律的配备项。若是没有点名的页面配置文件,则在该页面向来使用 app.json
中的暗中认可配置。

justify-content属性

justify-content属性定义了花色在主轴上的对齐情势。

.box {  

  1.   justify-content: flex-start | flex-end | center | space-between | space-around;  
  2. }  
  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目里面包车型大巴间距都格外。
  • space-around:每一种项目两侧的间距相等。所以,项目里面包车型客车区间比项目与边框的距离大一倍。

4858美高梅 8

.wxml:是页面包车型大巴布局文件。是供给的。约等于大家常用的html。

align-items属性

align-items属性定义项目在陆续轴上怎么样对齐

  1. .box {  
  2.   align-items: flex-start | flex-end | center | baseline | stretch;  
  3. }  
  • flex-start:交叉轴的起源对齐。
  • flex-end:交叉轴的终极对齐。
  • center:交叉轴的中式点心对齐。
  • baseline: 项目标首先行文字的基线对齐。
  • stretch(私下认可值):假设项目未安装中度或设为auto,将占满整个容器的万丈。

.wxss:是页面包车型客车样式表,页面包车型客车样式表是非供给的。

  

4858美高梅 9


align-content属性

align-content属性定义了多根轴线的对齐方式。假若项目唯有一根轴线,该属性不起成效。

.box {  

  1.   align-content: flex-start | flex-end | center | space-between | space-around | stretch;  
  2. }  
  • flex-start:与交叉轴的起源对齐。
  • flex-end:与交叉轴的极限对齐。
  • center:与交叉轴的中式点心对齐。
  • space-between:与接力轴两端对齐,轴线之间的距离平均分布。
  • space-around:每根轴线两侧的区间都等于。所以,轴线之间的距离比轴线与边框的距离大学一年级倍。
  • stretch(暗中同意值):轴线占满整个交叉轴。

 

 

4858美高梅 10

接下去的目录是个public文件夹,那是自己要好新建的文本夹,用来存放在图片等。

 项指标属性

以下四个属性设置在档次上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

上面是个tpl文件夹,template,正是存放页面所用到的沙盘文件。都以上下一心新建的。

order属性

order属性定义项指标排列顺序。数值越小,排列越靠前,暗中认可为0。

  1. .item {  
  2.   order: <integer>;  
  3. }  

最上边是个utils文件夹,里面有二个utils.js,一般大家会在里头放入一些公用类的法门,比如封装好的一部分通用的章程。可供大家时刻调用。

4858美高梅 11

最上边是七个app.js/spp.json/app.wxss/project.config.json
其中的前八个,是全部项目标为主。

 flex-grow属性

flex-grow属性定义项指标拓宽比例,暗中同意为0,即只要存在剩余空间,也不放大。

  1. .item {  
  2.   flex-grow: <number>; /* default 0 */  
  3. }  

4858美高梅 12

若是全部体系的flex-grow属性都为1,则它们将等分剩余空间(要是有的话)。要是贰个档次的flex-grow属性为2,别的连串都为1,则前者占据的剩余空间将比其余项多一倍。

app.js是小程序的台本代码。大家能够在那几个文件中监听并处理小程序的生命周期函数、注脚全局变量。

flex-shrink属性

flex-shrink属性定义了种类的缩短比例,私下认可为1,即只要空间欠缺,该品种将减弱。

  1. .item {  
  2.   flex-shrink: <number>; /* default 1 */  
  3. }  

4858美高梅 13

一旦具有品类的flex-shrink属性都为1,当空间欠缺时,都将等比例收缩。若是1个门类的flex-shrink属性为0,别的品类都为1,则空间欠缺时,前者不减弱。
负值对该属性无效。

app.json是对一切小程序的大局配置。大家得以在这几个文件中配备小程序是由什么页面组成,配置小程序的窗口,背景象,配置导航条样式,配置暗中认可标题。注意该公文不可添加任何注释!

flex-basis属性

flex-basis属性定义了在分配多余空间以前,项目占用的主轴空间(main
size)。浏览器依据那脾性子,计算主轴是还是不是有结余空间。它的暗许值为auto,即项指标本来大小。

  1. .item {  
  2.   flex-basis: <length> | auto; /* default auto */  
  3. }  

它能够设为跟width或height属性一样的值(比如350px),则项目将占用一定空间。

app.wxss是任何小程序的国有样式表。大家能够在页面组件的
class 属性上一贯动用 app.wxss 中宣称的体制规则。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,暗中认可值为0 1
auto。后三个性情可选。

  1. .item {  
  2.   flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]  
  3. }  

该属性有三个迅速值:auto (1 1 auto) 和 none (0 0 auto)。
建议事先利用这脾本性,而不是单独写多个分其他品质,因为浏览器会推算相关值。

project.config.json是系列的配备文件,里面有我们有着品种布局的新闻,包蕴是不是补助es6,appid等设置和新闻。

align-self属性

align-self属性允许单个项目有与其余类型不平等的对齐情势,可覆盖align-items属性。默许值为auto,表示继续父成分的align-items属性,借使没有父成分,则如出一辙stretch。

 

  1. .item {  
  2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;  
  3. }  

4858美高梅 14

该属性可能取五个值,除了auto,其余都与align-items属性完全一致。

那正是着力的flex布局,只好说,在小程序上,不要太好用。(注:flex布局内容出自阮一峰 阮大大。原来的作品地址:


三,js 页面脚本配置。小程序的生命周期。

 

app.js页面

4858美高梅 15

 

 笔者截了个图,在app.js页面,大家见到,全数皆以由3个app();包裹。而它在大家官方文书档案上,有着详细记录。

4858美高梅 16

 

 

那是小程序页面js脚本的上马配置。

4858美高梅 17

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

4858美高梅 18

 page()是在小程序上注册二个页面。详情如官方文档。

4858美高梅 19

 

 


 

这一部分不再过多叙述,因为官网上写的着实是很详细。之后,会在这里更新一些平淡无奇开发中遭逢的片段标题。先到那边吧,多谢阮大大的总括,能让小编拿来就给您们来得。

2017/10/23-am:10:30


……

二,wxhl语法

wxhl跟html一样,都有本身标签的语法规则。差距比较大的,div块成分,都是用<view></view>这种双标签。而且,不存在有h5新标签:header等。

img标签:<image></image>
双标签

文字标签:<text></text>双标签

a标签:<navigator url=”../navigator/navigator?title=小编是navi”>跳转到新的页面</navigator>
(同时也是页面跳转的2个办法)

更加多的不等,大家不在标签上详细讲述。我们来谈一谈,小程序最好的布局格局。flex布局

什么是flex布局?

display:flex
 是将成分作为弹性伸缩盒展现,早在css3就有。

举个例证:定义叁个器皿,里面含有多少个子元素。

<div style="width:400px; height: 120px; background: #ddd;  display: flex;flex-flow: row;">
    <div style="border: #fff solid 1px;  width: 100px;>jquery特效</div>
    <div style="border: #fff solid 1px;  width: 100px;><a href="">微信小程序开发</a></div>
    <div style="border: #fff solid 1px; width:100px;><a href="">web前端开发</a></div>
</div>

display flex容器的习性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction属性

4858美高梅 ,flex-direction属性决定主轴的大方向(即项目标排列方向)。

  1. .box {  
  2.   flex-direction: row | row-reverse | column | column-reverse;  
  3. }  
  • row(暗中同意值):主轴为水平方向,起源在左端。
  • row-reverse:主轴为水平方向,起源在右端。
  • column:主轴为垂直方向,起源在上沿。
  • column-reverse:主轴为垂直方向,起源在下沿。

4858美高梅 20

 

 

flex-wrap属性

暗许景况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,若是一条轴线排不下,怎么着换行。

  1. .box{  
  2.   flex-wrap: nowrap | wrap | wrap-reverse;  
  3. }  

(1)nowrap(默认):不换行。

4858美高梅 21

(2)wrap:换行,第3行在上头。

4858美高梅 22

(3)wrap-reverse:换行,第叁行在人间。

4858美高梅 23

 

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写格局,暗许值为row
nowrap。

 

  1. .box {  
  2.   flex-flow: <flex-direction> || <flex-wrap>;  
  3. }  

justify-content属性

justify-content属性定义了连串在主轴上的对齐格局。

.box {  

  1.   justify-content: flex-start | flex-end | center | space-between | space-around;  
  2. }  
  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目里面包车型地铁距离都10分。
  • space-around:每一种品种两侧的距离相等。所以,项目里面包车型大巴距离比项目与边框的间隔大学一年级倍。

4858美高梅 24

align-items属性

align-items属性定义项目在交叉轴上如何对齐

  1. .box {  
  2.   align-items: flex-start | flex-end | center | baseline | stretch;  
  3. }  
  • flex-start:交叉轴的起源对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中式点心对齐。
  • baseline:
    项指标首先行文字的基线对齐。
  • stretch(默许值):假诺项目未安装中度或设为auto,将占满整个容器的莫大。

  

4858美高梅 25

align-content属性

align-content属性定义了多根轴线的对齐形式。要是项目唯有一根轴线,该属性不起功能。

.box {  

  1.   align-content: flex-start | flex-end | center | space-between | space-around | stretch;  
  2. }  
  • flex-start:与交叉轴的源点对齐。
  • flex-end:与交叉轴的终端对齐。
  • center:与交叉轴的中式点心对齐。
  • space-between:与接力轴两端对齐,轴线之间的区间平均分布。
  • space-around:每根轴线两侧的间距都卓殊。所以,轴线之间的区间比轴线与边框的距离大学一年级倍。
  • stretch(暗中认可值):轴线占满整个交叉轴。

 

4858美高梅 26

 项指标性质

以下多个本性设置在品种上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order属性

order属性定义项指标排列顺序。数值越小,排列越靠前,私下认可为0。

  1. .item {  
  2.   order: <integer>;  
  3. }  

4858美高梅 27

 flex-grow属性

flex-grow属性定义项指标拓宽比例,暗许为0,即只要存在剩余空间,也不放大。

  1. .item {  
  2.   flex-grow: <number>; /* default 0 */  
  3. }  

4858美高梅 28

假定持有体系的flex-grow属性都为1,则它们将等分剩余空间(要是部分话)。倘使一个项指标flex-grow属性为2,其余品种都为1,则前者占据的剩下空间将比任何项多一倍。

flex-shrink属性

flex-shrink属性定义了类其余收缩比例,默许为1,即只要空间欠缺,该品种将收缩。

  1. .item {  
  2.   flex-shrink: <number>; /* default 1 */  
  3. }  

4858美高梅 29

假诺具有种类的flex-shrink属性都为1,当空间欠缺时,都将等比例缩短。假如1个门类的flex-shrink属性为0,其余体系都为1,则空间欠缺时,前者不缩短。
负值对该属性无效。

flex-basis属性

flex-basis属性定义了在分配多余空间在此之前,项目占用的主轴空间(main
size)。浏览器根据那本性格,计算主轴是或不是有结余空间。它的私下认可值为auto,即项目标本来大小。

  1. .item {  
  2.   flex-basis: <length> | auto; /* default auto */  
  3. }  

它能够设为跟width或height属性一样的值(比如350px),则项目将占用一定空间。

flex属性

flex属性是flex-grow, flex-shrink 和
flex-basis的简写,暗中同意值为0 1 auto。后多个性情可选。

  1. .item {  
  2.   flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]  
  3. }  

该属性有六个急忙值:auto (1 1 auto) 和
none (0 0 auto)。
提议事先使用那天天性,而不是单独写四个分别的特性,因为浏览器会推算相关值。

align-self属性

align-self属性允许单个项目有与另外品种不均等的对齐情势,可覆盖align-items属性。暗中同意值为auto,表示继续父成分的align-items属性,假如没有父成分,则没有差距于stretch。

 

  1. .item {  
  2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;  
  3. }  

4858美高梅 30

该属性恐怕取多少个值,除了auto,别的都与align-items属性完全一致。

那正是基本的flex布局,只好说,在小程序上,不要太好用。(注:flex布局内容出自阮一峰 阮大大。原版的书文地址:


三,js
页面脚本配置。小程序的生命周期。

 

app.js页面

4858美高梅 31

 

 作者截了个图,在app.js页面,大家见到,全数都以由七个app();包裹。而它在我们官方文书档案上,有着详细记录。

4858美高梅 32

 

 

那是小程序页面js脚本的上马配置。

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 page()是在小程序上登记三个页面。详情如官方文书档案。

4858美高梅 33

 

 


 

那有个别不再过多叙述,因为官网上写的真便是很详细。之后,会在此地更新一些平淡无奇开发中遭逢的部分题材。先到那里呢,感激阮大大的下结论,能让小编拿来就给您们来得。

2017/10/23-am:10:30

 

 

 

 

 

 


 

2017年11月02日 上午  11:50

 

 

wx-gesture-lock  微信小程序的手势密码

WXCustomSwitch 微信小程序自定义 Switch 组件模板

WeixinAppBdNovel 微信小程序demo:百度随笔搜索

shitoujiandaobu 小程序:石头剪刀布(附代码表达)

audiodemo 微信小程序开发之录制播放器 Video 弹幕 弹幕颜色自定义

star 微信小程序开发之五星评分

switchCity 微信小程序开发之城市政委员会公投择器 城市切换

huadong_del  微信小程序滑动删除效果

jianhang_menu 微信小程序开发之圆形菜单 仿建行圆形菜单

xiaoxiaoxiao_lazyload  实现微信小程序图片懒加载特效

kangaiduowei  微信小程序:康爱多微商城:学习界面设计

tianmao_dazhuanpan  小程序完毕大转盘 仿天猫商城抽奖 跑马灯效果(有图有源码)

weapp-meirong  微信小程序学习用demo推荐:美容商城;列表,预订

baisi  微信小程序仿百思不得姐

weapp-one 仿 「ONE · 2个」 的微信小程序

netmusic-app  仿和讯云音乐APP的微信小程序

a_takeaway  微信小程序的外卖demo

sideslip  微信小程序『侧边栏滑动』特效

wx_plo  微信小程序之仿微信漂流瓶

kwonWhere 微信小程序-知亦行

audiodemo  微信小程序开发之录制播放 弹幕 弹幕颜色自定义

wxChart  微信小程序图标插件

guoku  微信小程序-果库

snake  微信小程序-贪吃蛇小程序

douban_movie  微信小程序-仿豆瓣电影

RecordDemo  Mike风动画

shishanggou  完结了席卷常用组件,ajax获取数据,模板使用,路由等的采纳,下拉刷新数据;

jiajuzaixian  家具在线-演示怎么着行使下拉摘取

wechat-app-ipinbb  爱拼婴儿-效能尤其全的电商应用

TodayNews-wx  微信小程序-腾讯网

WXNative-bpgg  奔跑果果-微信小程序

wechatapp-demo   是现阶段自家发现的,达成实用功用较多的demo,推荐大家学习研讨

weapp-MatterAssistant  微信小程序-事项帮手

weapp-wymusic  微信小程序 仿腾讯网云音乐

weapp-wechat-nearby  微信小程序-仿找事吧app附近三公里

bs  精简版百思不得姐

WXBaiSi  微信小程序版 百思不得姐

weapp-demo-breadtrip  基于面包旅行 API 制作的微信小程序示例

html-to-wxml  小程序元帅html内容转化成wxml能够展现的始末,方便用于小程序中展现

kachezhijia  自卡车之家,有加上的卡车司机和物流园区的财富,所以这么些小程序能够说也是他们前途工作上的两个早晚实行的花色。

WxEmojiView   微信小程序Emoji体现输入组件阿尔法 0.1

GankCamp-WechatAPP gank.io (干货集中营) 微信小程序 版本

wechat-JD  微信小程序仿京东首页

wechat-turntalbe-canvas  用微信小程序开发的Canvas绘制可铺排的转盘抽奖。

mangguoTv  微信小应用-小程序-demo-仿芒果TV

wxreading  微信小程序跟读

WeChatMeiZhi  微信小程序版妹纸图 API from gank.io

CountDown  微信小程序倒计时组件

weapp-github  微信小程序–github

wechat-weapp-mapdemo  微信小程序开发demo-地图定位,格外不难的demo,只为驾驭一下微信小程序

wechat-cnode  微信小程序 cnode社区版

weapp-newsapp  微信小程序-公众号热门小说音讯流

wechat-weapp-taobao  微信小程序demo 仿手提式有线电话机Taobao

timer  番茄时钟微信小程序版

wechat-app-music  微信小程序:音乐播放器 技术栈: redux + es7 +labrador

fenda-mock  使用微信小程序达成「分答」那款APP的底蕴意义

Wa-UI  针对微信小程序整合的一套UI库

wx-query  微信小程序 仿jQuery插件

weapp-artand  微信小程序 Artand

WeiXin-SmallApps-Information  微信小程序-仿今日头条

weapp-wechat-zhihu  微信中的今日头条–微信小程序

WeApp  基于微信小程序支付的仿微信demo

SmallApp  微信小程序

wechat-v2ex 微信小程序-v2ex

weipiao 微信小程序-微票

DouBanBookApp   微信小程序之小豆瓣图书

wxapp-calc 3个粗略的微信小程序-简易总结器

weapp-wechat-zhihu   模仿网易的小程序

wx-movies-demo   小程序–影讯

caiquan  微信小应用,猜拳小游戏

hayeah-wxapp-Breakfast  小林早厨微信小程序

AppleMusic  微信小程序,仿Apple Music

cnode_wechat-webapp 用cnode社区api做的微信小应用

shoppingcar 叁个点餐、购物的购物车功效

wechat-weapp-mall 微信小程序实现移动端商城

SmallAppForQQ  高仿手提式无线电话机QQ应用程序

zhihudaily  微信小程序-果壳网晚报

wechat-weapp-gank 微信小程序-干货投稿应用

TeamToy  调用TeamToy API 的微信小程序 德姆o

douban 微信小程序(应用号)示例教程(豆瓣电影)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有