2021-04-13

学习制作小程序

1.（死代码）about目录

一、关于 json js wxss wxml 可以参照简书
https://www.jianshu.com/p/b6b09ceab839

”pages": ["/pages/about/about"] //绝对路径会报错
}
应改为 ”pages": [pages/about/about"]
相对路径

二、页面配置初探
在 about.json中 可以设置当前页面的标题。
采用navigationBar 来实现设置
三、view，text，image 组件
在 about.wxml 中
< text >wenben< /text > (就会在旁边显示wenben啦
同理 < view> < / view> < image></ image>

< view class=‘container’>作为容器元素

四、弹性盒子布局
*优点 ：*随着屏幕大小的改变而改变
传统方式：
在about.wxss中 text{ display：block；}表示每个元素独成一行

弹性盒子布局
*优点 ：*随着屏幕大小的改变而改变 （灵活）
（相对比较统一）
：about.wxss中 清除传统方式代码 改为

.container{
dispaly:flex;//
flex-direction ：column；//从上往下放置
justify-content ：space-around；//垂直方向上均匀分布
align-items：center；//水平居中放置
}

五、希望图片均为屏幕的一半：
about.wxss中
传统 ： .about-banner：屏幕宽高一半 （width：187.5px）iphone 5
缺点：很难使各种设备上屏幕图片 显示一致
（px为绝对长度单位）

.about-banner：{width：375rpx；height：375rpx}
  // **（rpx相对长度单位）**


注： 小程序规定 所有设备的屏幕高度宽均为750rpx

2、 新增每周推荐页面

在pages 文件中添加 weekly文件
其中添加 wxss js json wxml
（每个用户可能访问到的页面都需要在前局配置中来登记他的访问路径）

app.json 中
{
”pages": [“pages/about/about”，”pages/weekly/weekly"]
}
已经改为相对路径

为了使 weekly页面 与 about 页面布局一致
将.container放置在 app.wxss 中定义