微信小程序开发总结(详细)|江阴雨辰互联

2023年6月28日发(作者：)

微信⼩程序开发总结（详细）转载：这段时间⼀直在做⼩程序，总结下。后续可能会不断更新，努⼒写仔细点，争取让⼈看到就能会写。⼀，页⾯结构。

这基本是⼩程序的标准⽬录结构。我们从上到下解释下：pages⽂件夹放置我们所有⽤到的页⾯，基本是⼀个页⾯⼀个⽂件夹，类似模块。每个页⾯中，有四个⽂件（有的可能不会有.json⽂件）。分别是:js/json/wxml/wxss..js:是页⾯的脚本⽂件，是必要的。在这个⽂件中我们可以监听并处理页⾯的⽣命周期函数、获取⼩程序实例，声明并处理数据，响应页⾯交互事件等。.json：是页⾯的配置⽂件，页⾯的配置⽂件是⾮必要的。当有页⾯的配置⽂件时，配置项在该页⾯会覆盖的 window 中相同的配置项。如果没有指定的页⾯配置⽂件，则在该页⾯直接使⽤中的默认配置。.wxml：是页⾯的结构⽂件。是必要的。相当于我们常⽤的html。.wxss：是页⾯的样式表，页⾯的样式表是⾮必要的。

接下来的⽬录是个public⽂件夹，这是我⾃⼰新建的⽂件夹，⽤来存放图⽚等。下⾯是个tpl⽂件夹，template，就是存放页⾯所⽤到的模板⽂件。都是⾃⼰新建的。最下边是个utils⽂件夹，⾥⾯有⼀个，⼀般我们会在其中放⼊⼀些公⽤类的⽅法，⽐如封装好的⼀些通⽤的⽅法。可供我们随时调⽤。最下边是四个/// 其中的前三个，是整个项⽬的核⼼。是⼩程序的脚本代码。我们可以在这个⽂件中监听并处理⼩程序的⽣命周期函数、声明全局变量。是对整个⼩程序的全局配置。我们可以在这个⽂件中配置⼩程序是由哪些页⾯组成，配置⼩程序的窗⼝,背景⾊，配置导航条样式，配置默认标题。注意该⽂件不可添加任何注释!是整个⼩程序的公共样式表。我们可以在页⾯组件的 class 属性上直接使⽤中声明的样式规则。是项⽬的配置⽂件，⾥⾯有我们所有项⽬配置的信息，包括是否⽀持es6，appid等设置和信息。……⼆，wxhl语法wxhl跟html⼀样，都有⾃⼰标签的语法规则。区别⽐较⼤的，div块元素，都是⽤这种双标签。⽽且，不存在有h5新标签：header等。img标签：双标签⽂字标签:双标签a标签:跳转到新的页⾯（同时也是页⾯跳转的⼀个⽅法）更多的不同，我们不在标签上详细叙述。我们来谈⼀谈，⼩程序最佳的布局⽅式。flex布局什么是flex布局？display：flex 是将元素作为弹性伸缩盒显⽰，早在css3就有。举个例⼦：定义⼀个容器，⾥⾯包含⼏个⼦元素。

微信⼩程序开发

web前端开发

display flex容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-direction属性flex-direction属性决定主轴的⽅向（即项⽬的排列⽅向）。1. .box {

2. flex-direction: row | row-reverse | column | column-reverse;

3. }

row（默认值）：主轴为⽔平⽅向，起点在左端。row-reverse：主轴为⽔平⽅向，起点在右端。column：主轴为垂直⽅向，起点在上沿。column-reverse：主轴为垂直⽅向，起点在下沿。 flex-wrap属性默认情况下，项⽬都排在⼀条线（⼜称"轴线"）上。flex-wrap属性定义，如果⼀条轴线排不下，如何换⾏。1. .box{

2. flex-wrap: nowrap | wrap | wrap-reverse;

3. }

（1）nowrap（默认）：不换⾏。（2）wrap：换⾏，第⼀⾏在上⽅。（3）wrap-reverse：换⾏，第⼀⾏在下⽅。

flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

1. .box {

2. flex-flow: || ;

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：两端对齐，项⽬之间的间隔都相等。space-around：每个项⽬两侧的间隔相等。所以，项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍。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，将占满整个容器的⾼度。 align-content属性align-content属性定义了多根轴线的对齐⽅式。如果项⽬只有⼀根轴线，该属性不起作⽤。.box {

2. }

flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔⽐轴线与边框的间隔⼤⼀倍。stretch（默认值）：轴线占满整个交叉轴。项⽬的属性以下6个属性设置在项⽬上。orderflex-growflex-shrinkflex-basisflexalign-selforder属性order属性定义项⽬的排列顺序。数值越⼩，排列越靠前，默认为0。

1. .item {

2. order: ;

3. } flex-grow属性flex-grow属性定义项⽬的放⼤⽐例，默认为0，即如果存在剩余空间，也不放⼤。

1. .item {

2. flex-grow: ; /* default 0 */

3. }

如果所有项⽬的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果⼀个项⽬的flex-grow属性为2，其他项⽬都为1，则前者占据的剩余空间将⽐其他项多⼀倍。

flex-shrink属性flex-shrink属性定义了项⽬的缩⼩⽐例，默认为1，即如果空间不⾜，该项⽬将缩⼩。

1. .item {

2. flex-shrink: ; /* default 1 */

3. }

如果所有项⽬的flex-shrink属性都为1，当空间不⾜时，都将等⽐例缩⼩。如果⼀个项⽬的flex-shrink属性为0，其他项⽬都为1，则空间不⾜时，前者不缩⼩。