发布时间:2023-06-04 16:30
我们发现,页面页面一般有4个文件组成
该文件完成业务逻辑的书写。
该文件用来进行一些页面的配置。有些时候我们不需要书写样式等代码,而是在json文件里面进行一定的配置,就可以达到我们想要的效果。比如:我们修改一下顶部导航栏的颜色,就可以在JSON文件里面配置。这种配置机制在我们前端的开发中不常见。
该文件用来书写页面的骨架。类似于html。
该文件用来书写页面的样式。类似于css。
其实,这四个文件并不都是必须都要存在的,比如我们的页面每页样式,那么wxss文件就不是必须的。所以说,除了页面的骨架wxml,其他文件都不是必须的。
如果我们这个页面的四个文件的名称相同(后缀不同),都是index.后缀的文件,那么我们文件之间的相互调用是不需要进行导入的。而是可以直接使用其他文件的内容。
综上所述:我们建立一个新的页面最好也采用这种约定速成的方式。
文件app.js,app.json,app.wxss这三个文件的名称是不能修改的。作用和上面相同文件类型的作用一样。但是这三个文件可以控制整个微信小程序(也就是应用程序级别的)的样式和业务逻辑等。而上面介绍的文件只能控制所属的页面。
虽然这三个文件配置的样式等是全局的,但是如果配置的全局样式和局部样式有冲突,以页面的局部样式为主。
文件project.config.json是用来记录当前项目的配置,设置的。
sitemap.json是来做微信小程序搜索的。暂时不做了解。
首先我们删除项目中的其他文件,只保留 project.config.json,sitemap.json这两个文件
当我们删除项目结构,只保留这两个文件以后,发现在调试区域会报错。提醒我们没有app.json文件。
上面我们说过,app.json文件是在微信小程序开发项目中,必须存在的文件。
有该属性后,一样报错。很明显,找不到页面。
新建页面,新建pages文件夹,在下面再建index文件夹。我们知道了每个页面都有四个文件,但是我们需要一个个新建吗?不需要的。只需要邮件单击index文件夹,然后点新建page,填写文件名称即可,不需要写后缀,自动帮我们建好四个文件。且在app.json文件的pages属性里面完成了页面的注册。
**注意:页面文件只需要写index,小程序会默认帮我们找到名称为index的四个文件。**且小程序的默认首页就是第一个注册的页面。
例如,我们在新建一个welcome页面,并将其第一个注册,放在index页面前面,发现默认页面就是welcome了
**我们指知道,在html中,可以使用img标签来显示图片,在小程序中,我们使用的是
**标签。使用src属性引用图片。
使用
标签包裹我们想要显示的文字。
和html一样,都是使用标签
我们发现:这个头像是椭圆形的,而实际上我们的头像图片是圆形的。为什么默认情况变成的椭圆形?思考一下
我们在微信小程序里面,设置样式的时候,推荐使用rpx单位,而不是px单位。
因为:单位:rpx 会自适应屏幕的尺寸等,给我们一种很舒服的视觉体验,换了机型会自适应大小。而使用px为单位,就会固定死大小,即使切换了机型,分辨率发生了改变,大小也不会改变。
<image src=\"/images/avatar/1.webp\" style=\"width:220rpx;height:220rpx\">image>
<text>你好:听雨少年!text>
<button>我是按钮button>
当然,你也可以选择使用px为单位,但是我们需要在设置大小的时候,将数值设置为图片实际大小的1/2。这是建立在以iPhone6机型为原型图的基础上。
回到开始的问题:头像在默认情况下为什么变成椭圆形或者不是我们图片默认的形状?
因为:image标签(组件)有默认样式
图片建议使用png格式!!!
我们觉得这种默认的样式很难看,可以在app.json文件里面配置这个头部的样式
\"window\": {
\"navigationBarBackgroundColor\": \"#b3d4db\"
},
<view class=\"container\">
<image class=\"user-avatar\" src=\"/images/avatar/avatar.png\">image>
<text class=\"motto\">听雨少年text>
<view class=\"btn-journey-container\">
<text class=\"journey\">开启小程序之旅text>
view>
view>
/* pages/welcome/welcome.wxss */
/* 单位:rpx 会自适应屏幕的尺寸等,给我们一种很舒服的视觉体验,换了机型 会自适应大小 */
/* 顶层容器page,设置背景色 */
page {
background-color: #b3d4db;
}
/* 外层容器 */
.container {
/* 开启弹性布局 */
display: flex;
/* 排列方向,垂直排列 */
flex-direction: column;
/* 在排列方向的侧轴上居中 */
align-items: center;
}
/* 设置头像样式 */
.user-avatar {
width: 220rpx;
height: 220rpx;
border-radius: 50% 50%;
margin-top: 160rpx;
}
/* 昵称 */
.motto {
/* color:#666; */
margin-top: 100px;
font-size: 36rpx;
font-weight: bold;
}
/* 设置模拟的按钮外边框 */
.btn-journey-container {
margin-top: 150rpx;
border: 1rpx solid #405f80;
width: 200rpx;
height: 80rpx;
border-radius: 10px;
/* 文字居中 */
text-align: center;
}
/* 按钮文字 */
.journey {
font-size: 24rpx;
color: #405f80;
line-height: 80rpx;
font-weight: bold;
}
/* app.wxss */
text{
color:#666;
}
微信小程序学习之旅–零基础制作自己的小程序–第二个页面的制作