【WeChat MiniProgram】001 - 项目目录文件结构以及基本配置

文件结构

1. 根目录

app.js 程序主逻辑

app.json 程序配置文件

需要在"pages"属性中以相对路径的方式声明页面

{
  "pages": [
    "pages/about/about",
    "pages/weekly/weekly"
  ],
  "sitemapLocation": "sitemap.json"
}

app.wxss 程序主样式

这里设置一些所有页面都可能用到的公共样式类

project.config.json 程序信息

该文件由开发工具自动生成

pages文件夹

这里包含了小程序的所有页面文件夹

---

2. pages文件夹中的页面文件夹

下面以about页面为例

about.js 页面逻辑

这里要创建一个页面对象

Page({})

about.json 页面配置文件

这里可以配置页面的相关信息，例如导航栏标题

{
  "navigationBarTitleText": "关于"
}

about.wxml 页面布局

以类似html的语法描述页面布局，注意首尾标记符都要有
示例代码：

<view class="container">
  <image src="/images/profile.JPG" class="icon"></image>
  <text class="title">电影周周看</text>
  <view>
    <navigator url="/pages/weekly/weekly" style="display: inline;" class="nav-text" hover-class="nav-hover" open-type="navigate">
    每日推荐
    </navigator>
    <text class="subtitle">一部好电影</text>
  </view>
  <text class="subtitle">我的微博：Luke玄</text>
</view>

about.wxss 页面样式

这里定义该页面所用到的样式类
示例代码：

.container{
  background-color: #eee;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.icon{
  width: 375rpx;
  height: 375rpx;
  border-radius: 50%;
}

.title{
  font-size: 60rpx;
  font-weight: bold;
}

.subtitle{
  font-size: 30rpx;
  font-weight: lighter;
}

.nav-text{
  color: lightblue;

.nav-hover{
  color: grey;
}
}