慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第3章从一个简单的"欢迎"页面开始小程序之旅-制作项目启动页之小程序app.json基础配置

制作项目启动页之小程序app.json基础配置

1.提取全局性 css，修改文件 app.wxss

text {
  font-family:MicroSoft Yahei;
}

2.进入目录 pages/welcome，修改文件 welcome.wxss，删除公共的css代码

.container {
  display: flex;
  flex-direction:column;
  align-items:center;
}

.user-avator {
  width: 200rpx;
  height: 200rpx;
  margin-top:160rpx;
}

.user-name {
  font-size:32rpx;
  font-weight:bold;
}

.meto {
  font-size:22rpx;
  font-weight:bold;
}

/*flex 布局 弹性盒子模型*/

3.进入目录 pages/welcome，修改文件 welcome.wxml

<!-- wxml用来编写页面骨架的文件 -->
<!-- <view>等同于<div>作用就是容器和分隔文档 -->
<view class="container">
    <image class="user-avator" src="/images/avatar.png"></image>
    <text class="user-name">Hello，七月</text>
    <!--按钮最好不要用小程序提供的<button></button>，用另外方式替代，这是经验-->
    <view class="meto-container">
        <text class="meto">开启小程序之旅</text>
    </view>     
</view>

4.进入目录 pages/welcome，修改文件 welcome.wxss

.container {
  display: flex;
  flex-direction:column;
  align-items:center;
}

.user-avator {
  width: 200rpx;
  height: 200rpx;
  margin-top:160rpx;
}

.user-name {
  font-size:32rpx;
  font-weight:bold;
}

.meto {
  font-size:22rpx;
  font-weight:bold;
}

.meto-container {
  border:1px solid #405f80;
  height:80rpx;
  width:200rpx;
}

/*flex 布局 弹性盒子模型*/

5.测试调试

6.进入目录 pages/welcome，修改文件 welcome.wxss，文字垂直居中（也可以用 flex），文字颜色，拉开跟上面的距离

.container {
  display: flex;
  flex-direction:column;
  align-items:center;
}

.user-avator {
  width: 200rpx;
  height: 200rpx;
  margin-top:160rpx;
}

.user-name {
  font-size:32rpx;
  font-weight:bold;
}

.meto {
  font-size:22rpx;
  font-weight:bold;
  line-height:80rpx;
  color:#405f80;
}

.meto-container {
  margin-top:200rpx;
  border:1px solid #405f80;
  height:80rpx;
  width:200rpx;
  border-radius:5px;
  text-align:center;
}

/*flex 布局 弹性盒子模型*/

7.测试调试 

8.进入目录 pages/welcome，修改文件 welcome.wxss，设置背景颜色

.container {
  display: flex;
  flex-direction:column;
  align-items:center;
  background-color:#b3d4db;
}

.user-avator {
  width: 200rpx;
  height: 200rpx;
  margin-top:160rpx;
}

.user-name {
  font-size:32rpx;
  font-weight:bold;
}

.meto {
  font-size:22rpx;
  font-weight:bold;
  line-height:80rpx;
  color:#405f80;
}

.meto-container {
  margin-top:200rpx;
  border:1px solid #405f80;
  height:80rpx;
  width:200rpx;
  border-radius:5px;
  text-align:center;
}

/*flex 布局 弹性盒子模型*/

9.测试调试　

10.进入目录 pages/welcome，修改文件 welcome.wxss

.container {
  display: flex;
  flex-direction:column;
  align-items:center;
  background-color:#b3d4db;
}

page {
  background-color:#b3d4db;
  height:100%;
}

.user-avator {
  width: 200rpx;
  height: 200rpx;
  margin-top:160rpx;
}

.user-name {
  font-size:32rpx;
  font-weight:bold;
}

.meto {
  font-size:22rpx;
  font-weight:bold;
  line-height:80rpx;
  color:#405f80;
}

.meto-container {
  margin-top:200rpx;
  border:1px solid #405f80;
  height:80rpx;
  width:200rpx;
  border-radius:5px;
  text-align:center;
}

/*flex 布局 弹性盒子模型*/

11.测试调试

12.修改文件 app.json

{
  "pages": [
    "pages/welcome/welcome"
  ],"window":{
     "navigationBarBackgroundColor":"#b3d4db"   
  },
  "sitemapLocation": "sitemap91.json"
}

13.测试调试