小程序day01

小程序前端开发day01笔记

Page下面的文件

.js:逻辑文件，存放一些逻辑信息，相当于Web页面的*.js文件

.json:配置文件，设置一些Web页面的基本信息。

.wxml:骨架页面，相当于Web页面开发的*.html页面，存放一些基本的元素信息。

.wxss:样式文件，对wxml文件的一些元素设置样式，相当于Web开发中的.css文件。

项目下面的.js、.json、.wxss文件

.js项目下的全局的逻辑文件。

.json：项目下全局的配置文件。

.wxss:文件，项目全局的样式文件。

注意：项目下面不存在.wxml文件。、

文件的就近原则

项目中的.json和.wxss文件的配置根据就近原则，假如在全局文件.wxss配置了某个属性样式，同时也在某个页面下的.wxss文件里面相同的属性样式，则显示的结果根据页面下的.wxss文件的样式来决定，即根据近的样式来决定显示的内容。我们称之为就近原则。

页面的级数限制

小程序规定，小程序同一级的页面理论上可以有无限多个，但是最多只能有五级。

级数是指通过一个页面跳转到另一个页面，则第一个页面称之为一级页面，第二个页面称之为二级页面。以此类推。做多不成超过五级。

添加页面路径

如果你自己新建了一个page页面结构，你就要在项目的全局配置文件app.json下面添加你的页面路径，不然会找不到你的页面信息，无法加载。（注意；一般不要在这里面添加注释，不然会报错）

一般把你进入的首页方法第一个位置

{

“pages”:[

“pages/index/index”,

“pages/logs/logs”

]

}

View组件

相当于Html页面的div标签。

作用：起到容器和分割文档的作用。

text组件

text组件的作用是包含一段文本内容，不写虽然可以显示内容，但是不方便写样式，并且只有被text组件包含的内容才能在手机上长按选中。

<text class="motto">Hello, 七月</text>

支持组件的包含

<text class="motto"><text style='color:red'>Hello</text>, 七月</text>

支持转义字符的使用

<text class="motto"><text style='color:red'>Hello</text>, \n 七月</text>

rpx

小程序的开发的像素，可以自适应不同大小的机型，不要使用px，因为在小程序的开发的时候px像素的大小是固定死的，不会随机型的改变二改变大小。

样式

一般静态的样式通过class写到wxss文件内。动态的样式（需要改变的样式一般通过style来实现）

page组件

小程序默认加的一个wxml组件。可以根据这个设置页面的背景颜色。

page{
height: 100%;
background-color:#b3d4db;
}

window

给导航栏设置北京颜色。

如果设置的是全局的就在app.json文件里面设置相应的背景颜色。

"window": {
"navigationBarBackgroundColor": "#405f80"
}

移动设备的分辨率

pt称为逻辑分辨率

pt的大小和屏幕的尺寸有关系，简单的可以理解为长度和视觉单位

px指的是物理分辨率，和屏幕大小没有关系，1个px指的是一个物理像素点，而物理像素点是没有大小的。

1pt可以有1px构成，也可以有2px构成，还可以有3个甚至更多的px构成。

iphopne6下面2px才构成一个pt

如何做不同分辨率设备自适应

以iphone的物理像素750*1334为视觉稿进行设置，而在小程序中使用rpx为单位。

ip6下 1px = 1rpx = 0.5pt

使用rpx，小程序会自动在不同的分辨率下进行转换，使用px为单位则不会。

为什么要用iphone6的物理分辨率来做设计图

ip6下 1px = 1rpx

ip6 plus下 1px = 0.6rpx

不是所有的单位都适合rpx