初识微信小程序

页面创建
相关知识
- 一.wxss
- 二.flex布局
注意

页面创建

全局三个文件,分别是app.js app.json app.wxss(名称不可更改)
创建pages目录文件(作用是用来放各个页面的)
创建页面(给页面起名字,并且创建4个文件)
(1)js:页面逻辑实现
(2)json:负责标题栏和一些状态栏
(3)wxml:管理页面有什么
(4)wxss:页面排布
把内容单元封装在view内部,写法:<view>"内容"</view>
miniprogram-1需要用到三个组件:图片、文字、按钮
(1)图片<image src="/images/che.jpg"></image>
(2)文字<text>内容</text>
(3)按钮<button "属性内容">按钮上的字</button>
已经学了两个属性open-type=”getUserInfo” 和bindgetuserinfo=”getMyInfo”

js文件中函数的定义方法

 函数名:function(参数列表){//参数列表
     函数内容
 },
 注意:两个js文件{}前后要有逗号

wxml:变量写法:{ {变量名称} }等价于变量的内容
js:文件中定义变量的方法:在data:{定义变量}
规则:变量名称:'内容'
两个变量中用逗号隔开
修改data变量的方法:this.setData({修改变量})

相关知识

一.wxss

尺寸单位

小程序规定了全新的尺寸单位"rpx",其原理是无视设备原先的尺寸,统一规定屏幕宽度为750rpx
换算:
设备  rpx换算px(屏幕宽度750)
iPhone5 1rpx=0.42px
iPhone6 1rpx=0.5px
iPhone6 plus 1rpx=0.522px

常用属性

background-color:背景色
color:前景色
font-size:字体大小
border:边框
width:宽度
height:高度

内联样式
```
(1)style
(2)class
```

二.flex布局

基本概念

(1)容器和项目
 <view class="a">
     <view class="b">
     <view class="c"></view>
     </view>
 </view>
 对a,b而言:a容器b项目
 对b,c而言:b容器c项目
(2)坐标轴
 水平布局(默认):左到右为主轴,上到下为交叉轴
 垂直布局:上到下为主轴,左到右为交叉轴

容器属性

(1)flex-direction:用于设置主轴方向,通过设置坐标轴可以规定项目的排列方向
 语法格式
 .container{
     display:flex;
     flex-direction:row(默认)|row-reverse|column|column-reverse;
 }
 row:默认值,主轴在水平方向上从左到右,项目按照主轴方向从左到右排列
 row-reverse:主轴是row的反方向,项目按照主轴方向从右到左排列
 column:主轴在垂直方向上从上到下,项目按照主轴方向从上到下排列
 row-reverse:主轴是column的反方向,项目按照主轴方向从下到上排列
(2)justify-content:用于设置项目在主轴方向上的对齐方式,以及分配项目之间及其周围多余的空间
 .container{
     display:flex;
     justify-content:flex-start(默认值)|flex-end|center|space-around|space-between
 }
 flex-start:默认值,表示项目对齐主轴起点,项目间不留空隙
 center:项目在主轴上剧中排列,项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离
 flex-end:项目对齐主轴终点,项目间不留空隙
 space-between:项目间距相等,第一个和最后一个项目分别离起点/终点的距离为0
 space-around:与space-between相似,不同之处为第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半
(3)align-item:用于设置项目在行中的对齐方式
 .container{
     display:flex;
     align-items:stretch(默认值)|flex-start|center|flex-end;
 }
 stretch:默认值,未设置项目尺寸时将项目拉伸至填满交叉轴
 flex-start:项目顶部与交叉轴起点对齐
 center:项目在交叉轴居中对齐
 flex-end:项目底部与交叉轴终点对齐
(4)align-content:用于多行排列时段项目在交叉轴方向上的对齐方式,以及分配项目之间及其周围多余的空间
 .container{
     display:flex;
     align-content:stretch(默认值)|flex-start|center|flex-end|space-around|space-between;
 }
 stretch:默认值,未设置项目尺寸时将各行中的项目拉伸至填满交叉轴,当设置了项目尺寸不变,项目行拉伸至填满交叉轴
 flex-start:首行在交叉轴起点开始排列,行间不留间距
 center:行在交叉轴终点开始排列,行间不留间距,首行离交叉轴起点和尾行离交叉轴终点的距离相等
 flex-end:尾行在交叉轴终点开始排列,行间不留间距
 space-around:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点的距离为行与行间距的一半
(5)flex-wrap:用于规定是否允许项目换行,以及多行排列时换行的方向
 .container{
     display:flex;
     align-items:nowrap(默认)|wrap|wrap-reverse;
 }
 nowrap:默认值,表示不换行,如果单行内容过多,项目宽度可能会被压缩
 wrap:当容器单行容不下所有项目时允许换行排列
 wrap-reverse:当容器单行容不下所有项目时语序换行排列,换行方向为wrap的反方向

注意

this不可以出现在wxAPI中