小程序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