微信小程序-从零开始新建一个项目

在这里插入图片描述

新建时，不勾选【建立普通快捷启动模板】
在根目录下建立3个应用程序文件 app.json app.js app.wxss
在根目录下建立pages文件, 在pages文件下建立welcome文件夹并建立四个页面文件 welcome.js welcome.wxml welcome.wxss welcome.json

welcome.wxml 输入要显示的内容

Welcome, 从零开始建立项目

app.json

{
  "pages":[
    "pages/welcome/welcome"
  ]
}

显示页面内容，让小程序的MINA框架知道页面存在以及页面具体位置

welcome.js 此文件不能为空

Page({
  
})

welcome.json 此文件不能为空

{
  
}

保存即为运行
在这里插入图片描述

在welcome页面添加一些标签元素

准备一些微信头像图片，将其放在根目录‘/images/avatar/’文件夹下，没有就创建它
真实项目中，图片资源尽量不要存储在小程序的目录中，因为小程序的大小不能超过1MB，超过则无法真机运行和发布项目，应该将图片放在服务器上，让小程序通过网络来加载图片资源

welcome.wxml

<view> 										#view组件通常作为容器来使用，类似于HTML的div标签
  <image></image>							#image组件用来显示一张图片，类似于HTML的img标签
  <text>Welcome, 从零开始建立项目</text>		#text组件用来显示一段文本，类似于HTML中的span标签
  <view>
    <text>开启小程序之旅</text>
  </view>
</view>

更改welcome.wxml 内容如下

<view>
  <image src="../../images/avatar/avator-3.jpg"></image>		<!--image组件需要设置一个src属性，该属性执行一张图片的路径，用来显示该图片-->
  <text>Welcome, 从零开始建立项目</text>
  <view>
    <text>开启小程序之旅</text>
  </view>
</view>

保存即为运行，结果如下
小程序MINA框架默认高宽为，宽度300px，高度225px
在这里插入图片描述

更新welcome.wxml 内容
给每个样式的组件加入样式名称,class name

<view class="container">
  <image class="avtar" src="/images/avatar/avator-3.jpg"></image> <!--image组件需要设置一个src属性，该属性执行一张图片的路径，用来显示该图片-->
  <text class="motto">Welcome, 从零开始建立项目</text>
  <view class="journey-container">
    <text class="journey">开启小程序之旅</text>
  </view>
</view>

页面样式表
welcome.wxss

.container{ /*是所有组件元素的容器*/
  display: flex; /*使用Flex布局*/
  flex-direction:column;
  align-items:center;
}
.avatar{ /*设置头像的*/
  width:200rpx;
  height:200rpx;
  margin-top:160rpx;
}
.motto{ /*设置Welcome,从零开始建立项目这句话的样式*/
  margin-top:100rpx;
  font-size:32rpx;
  font-weight:bold;
  color:9#F4311;
}
.journey-container{ /*设置开启小程序之旅的外边框，使其看起来想一个按钮*/
  margin-top:200rpx;
  border:1px solid#EA5A3C;
  width:200rpx;
  height:80rpx;
  border-radius:5px; /*boader-radius让外边框变成圆角矩形*/
  text-align:center;
}
.journety{ /*设置圆角矩形的文本样式*/
  font-size:22rpx;
  font-weight:bold;
  line-height:80rpx;
  color:#EA5A3C;
}

保存并运行，运行结果如下
在这里插入图片描述

修改页面整体的背景色

首先尝试在welcome.wxss 文件的.container样式里追加属性

background-color:#ECC0A8;

保存并运行效果
在这里插入图片描述

这不是我们想要的效果，在container view容器外边，小程序还有一个默认的容器元素：page，这是MINA框架默认添加的
page元素代表着页面的整体
可以在【wxml pannel】模块下看出
在这里插入图片描述
调整welcome.wxss代码，在末尾追加如下代码

page{
  background-color:#ECC0A8;
}

保存并运行，运行效果如下
在这里插入图片描述

修改导航栏的颜色

导航栏是小程序默认的，不可以隐藏或者取消，它必须存在
window配置可用来设置小程序的状态栏、导航栏、标题和窗口的背景色

追加app.json内容

{
  "pages":[
    "pages/welcome/welcome"
  ],
  "window":{
    "navigationBarBackgroundColor":"#ECC0A8"
  }
}

保存并运行，运行效果如下
在这里插入图片描述
导航栏已经被隐藏了，但这不是真的被隐藏
window其他属性
navigationBarTextStyle 配置导航栏文字颜色，只支持 black/white
navigationBarTitleText 配置导航栏文字内容
backgroundColor 配置窗口颜色
backgroundColor 配置窗口颜色
backgroundTextStyle 下拉北京字体，仅支持 dark/light
enablePullDownRefresh 是否开启下拉刷新