微信小程序入门 学习(1) --- 小程序目录下的结构、编写入口页面

1.1.1目录下的文件

一个小程序页面由四个文件组成---js、wxml、wxss、json

1.1.2 app.js：小程序逻辑(系统的方法处理全局文件，也就是说文件中规定的函数和数据，在整个小程序中，每一个框架页面和文件都可以使用this获取。)

---

app.json：小程序全局配置(用来配置页面信息：包含设置页面路径，设置底部，网络，调试模式，设置导航头的颜色，字体大小。具体页面的配置在页面的json文件中单独修改，任何一个页面都需要在app.json中注册，如果不在json中添加，页面是无法打开的。)

注意：框架中的json优先级高于全局的json优先级。

---

1.1.3 app.wxss：全局的界面美化代码(用来修饰页面效果)

注意事项：

1、小程序每个页面必须有.wxml和.js文件，其他两种类型的文件可以不需要

2、文件名称必须与页面的文件夹名称相同，如index文件夹，文件只能是index.wxml、index.wxss、index.js和index.json.

---

1.1.4 app.wxml页面结构

---

1.1.5 pages目录

pages：主要存放小程序的页面文件，其中每个文件夹为一个页面，每个页面包含四个文件。文件名不需要写文件后缀，框架会自动去寻找位置

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。注意的是windows里的backgroundColor子属性代表的是下拉当前页面出现的刷新页面的窗口的背景颜色，而不是当前页面的背景颜色

1.1.6 utils

用于存放全局的一些.js文件，公用的方法

1.2.1编写入口页面

创建welcome文件夹，以及目录下的文件

welcome.wxml

<!-- wxml是编写小程序骨架的文件 -->
<!-- <div> -->
<view class="container">
  <image class="user-avatar" src="/images/IMG_0783.JPG"></image>
  <text class="user-name">庭前云落</text>
  <view class="moto-container">
    <text class="moto">开启小程序之旅</text>
  </view>
</view>

welcom.wxss

/* 盒子中心样式 */
.container {
  display: flex; /*弹性元素*/
  flex-direction: column; /*列垂直排列*/
  align-items: center; /*居中*/
}
/*头像大小*/
.user-avatar {
  width: 200rpx;
  height: 200rpx;
  margin-top: 160rpx;
}
/* 昵称样式 */
.user-name {
  margin-top:100rpx; 
  font-size: 32rpx;
  font-weight: bold;
}
/* 按钮字体样式 */
.moto {
  font-size: 22rpx;
  font-weight: bold;
  line-height:80rpx;
}

/* 按钮盒子样式 */
.moto-container{
  margin-top: 200rpx;
  border: 1px solid #405f80;
  width:200rpx;
  height:80rpx;
  border-radius:5px;  /*圆角矩形*/
  text-align: center; 
  color: 405f80;
}

/*整体页面高度和颜色*/
page{
  height:100%;
  background-color: #b3d4db;
}

app.json

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#b3d4db",/*导航栏标题颜色*/
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

text{
  font-family: MycroSoft Yahei;
}

页面效果：

---

日常学习的总结，主要是为了自己以后看，当然大家有什么好的建议，欢迎评论留言。