2.5 minigram 2

2.2 创建项目和目录文件结构

一个page的hello world
index.json的内容为{}
index.js的内容为Page({})
就不会报错了。

2.3 创页面配置初探

标题导航栏

index.json
{
  "navigationBarTitleText":"关于",
  "navigationBarBackgroundColor":"#fff",
  "navigationBarTextStyle":"black"
}

思考：如何动态获得页面标题？

2.4 VIEW、TEXT、IMAGE组件

组件就是元素，｀<view></view>｀常用于把一些元素组织成一个元素。

2.5 快速实现基本布局-应用弹性盒子布局

<view class="container">

index.wxss
.container{
  background-color: #eee;
  height:100vh;
  
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

display:flex;可以使container生效？
目标一：从上往下放，每个元素独占一行
默认的使从左往右放，所以要flex-direction: column;（修改主轴方向为垂直）
目标二：在垂直方向上均匀分布（间隔均匀）
justify-content: space-around;
目标三：居中align-items: center;

2.6 让元素大小适配不同宽度屏幕

响应式长度单位rpx
目标：在不同设备上，将图片的大小设置为宽高均为屏幕宽度的一半
小程序规定，所有屏幕的宽高均为750rpx

index.wxss
.about-banner {
  width: 375rpx;
  height: 375rpx;
  border-radius: 50%;
}

然后在wxml里面把标题加粗<text style='font-weight: bold; font-size: 60rpx'>minigram</text>

2.7 新增“每周推荐”WEEKLY页并快速调试

每个用户可能访问到的页面，都需要在前局配置中来登记他的访问路径。

app.json
{
  "pages":["pages/index/index","pages/weekly/weekly"]
}

之前的container样式规则是定义在自己的page的样式表里的，没有办法复用在weekly页面。可以将多个页面都需要用到的页面规则定义在全局的wxss样式表中定义。

2.8 使用NAVIGATOR组件-从ABOUT页跳转到WEEKLY页

open-type属性

为了在同一行显示，需要把这3个元素封装在一个view元素里，封装后还是分三行显示的，这是因为<navigator>是一个块级元素，需要将它变成inline元素:

index.wxml
<view>
  <text>ダメなら</text>
  <navigator style='display: inline' 
url='/pages/weekly/weekly'>悲劇のヒーロー</navigator>
  <text>になるよ</text>
</view>

weekly page默认有一个返回按钮，如果不需要这个返回键，需要用到<navigator>元素的open-type属性，open-type='redirect'，这是就没有返回按钮了。

hover-class属性

hover-class='nav-hover'
然后在index.wxss中定义：

.nav-hover{
  color: red;
}

这样，链接点击按住的时候，字体颜色就变成了红色。
如果字体之前就设置了颜色，哪么hover-class的属性定义要放在原有的定义之后才会有效果，不然颜色不会有改变。
index.wxml：class='nav-default'

index.wxss
.nav-default{
  color: burlywood;
}
.nav-hover{
  color: red;
}

2.9 配置TABBAR-对若干一级页面的入口链接