1. 新建时，不勾选【建立普通快捷启动模板】
2. 在根目录下建立3个应用程序文件 app.json  app.js  app.wxss
3. 在根目录下建立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页面添加一些标签元素

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

welcome.wxml

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

更改welcome.wxml内容如下

view  image src="../../images/avatar/avator-3.jpg"/image!--image组件需要设置一个src属性，该属性执行一张图片的路径，用来显示该图片--  textWelcome, 从零开始建立项目/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;}

保存并运行，运行结果如下

修改页面整体的背景色

1. 首先尝试在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 是否开启下拉刷新