wx

小程序

特点

做简单的、用完即走的应用

适合低频的应用

适合性能要求不高的应用

学习

JavaScript+CSS

ES6

一个界面的文件

image-20190919192921193

.html/.htm 标记语言,页面骨架作用
.css 样式表,在html中使用class来包含某一个样式表
.js 函数,逻辑操作
.json 配置文件,配置页面(最外层的为全局配置文件)

1.对应关系:

.js->.js

.json->.json

.html/.htm->.wxml

.css->.wxss

2.小程序的页面配置遵循“就近”原则,例如:

当某个page中的.wxss与app.wxss的配置文件不同时,遵循.wxss中的配置文件

3.项目配置文件

project.config.json

.json

全局配置—app.json

app.json是全剧配置文件。

放置配置文件,例如:

1
2
3
4
5
{
"pages": [
"pages/welcome/welcome"
]
}

这里注意,最后一个welcome表示的是4个文件,小程序在编译时会自动寻找这四个文件。

添加window:

1
2
3
4
5
6
7
8
9
{
"pages": [
"pages/welcome/welcome"
],
"window": {
"navigationBarBackgroundColor":
"#b3d4db"
}
}

navigationBarBackgroundColor是window 的子属性,代表的是导航栏的颜色。

如果使用小程序添加page功能进行添加,会自动生成4个关于这个页面的文件,并在app.json中自动加入新建页面

页面的配置文件

页面的配置只能设置app.json中部分window配置项的内容,页面中的配置项会覆盖app.jsonwindow中相同的配置项。

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000
navigationBarTextStyle string white 导航栏标题颜色,仅支持 black / white
navigationBarTitleText string 导航栏标题文字内容

rpx与移动设备分辨率

在不同的机型上会有不同的响应,使得在不同机型上的视觉效果更好。

pt 逻辑分辨率,屏幕尺寸对应的分辨率,比如320*480,就是宽320,长480
px 物理分辨率,像素点对应的分辨率,比如640*960,就是宽640个像素点,长960个像素点
ppi 每英寸包含的像素点
rpx 使用rpx,小程序会在不同分辨率下自适应

微信小程序width虽然用的是px,但指的是pt,逻辑分辨率

在iPhone6下,1px = 1rpx = 0.5pt,不是所有单位都适合使用rpx,文字就不适合使用rpx

Swiper组件

滑块视图容器

决定轮播图标签style的是标签,中的图片会自动充满整个

也是一个容器,它的内部也可以放置button等。

1
2
3
4
5
6
7
<view>
<swiper style="width:100%;height:500rpx">
<swiper-item><image src="/images/wx.png" ></image></swiper-item>
<swiper-item>Content</swiper-item>
<swiper-item>Content</swiper-item>
</swiper>
</view>
属性 类型 默认值 必填 说明 最低版本
indicator-dots boolean false 是否显示面板指示点 1.0.0
indicator-color color rgba(0, 0, 0, .3) 指示点颜色 1.1.0
vertical boolean false 滑动方向是否为纵向 1.0.0
autoplay boolean false 是否自动切换 1.0.0
interval number 5000 滑动动画时长 1.0.0

.wxss文件

“.”的作用

前面如果加“.”,如:

1
2
3
4
5
.user-avatar{
width: 200rpx;
height: 200rpx;
margin-top: 160rpx;
}

代表是自定义的样式名称。

而如果没有这个“.”,如:

1
2
3
4
swiper image {
width:100%;
height:500rpx;
}

则代表是wxml中的元素,对组件进行设置。

flex布局

弹性盒子模型

1
2
3
4
5
.container{
display: flex;
flex-direction: column;/*列排布*/
align-items: center;/*居中*/
}

通过flex布局,可以使得使用该class的所有元素一起按某种排布。

注意container的大小只到组件边缘的位置

margin

1
2
3
4
5
6
7
.post-author-date{
/* margin-top:10rpx;
margin-bottom:20rpx;
margin-left:10rpx; */
margin:10rpx 0 20rpx 10 rpx;
/*顺序是上右下左*/
}

margin默认的顺序是上右下左

绝对路径和相对路径

绝对路径从根目录开始。

相对路径从该文件当前所在文件夹开始,用../返回上一级目录。

绝对路径和相对路径在一些情况下不能相互互换。