小程序前端开发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