微信小程序开发之——目录结构(1.8)

一 概述

本文以Hello World为例,讲解

  • 小程序的目录结构
  • 小程序的文件组成

二 小程序的目录结构

路径 说明
project.config.json 项目配置文件
app.js 应用程序的逻辑文件
app.json 应用程序的配置文件
app.wxss 应用的程序的公共样式文件
pages/ 存储页面文件的目录
pages/index/ 存放index页面的目录
pages/index/index.js index页面的逻辑文件
pages/index/index.wxml index页面的结构文件
pages/index/index.wxss index页面的样式文件
pages/logs/ 存放logs页面的目录
pages/logs/logs.js logs页面的逻辑文件
pages/logs/logs.json logs页面的配置文件
pages/logs/logs.wxml logs页面的结构文件
pages/logs/logs.wxss logs页面的样式文件
utils/ 存放公共脚本文件的目录
utils/utils.js 公共脚本文件,保存一些工具代码

上表中,小程序一共有两个页面,分别是page/index(首页)和pages/logs(登录日志页)。首页就是之前在模拟器中看到的页面,在该页面中单击“获取头像”按钮,获取后会显示当前登录用户的微信头像,单击头像即可进入登入日志页,查看用户登录的历史记录

三 小程序的组成

在微信小程序中,每个页面由wxml、wxss、js和json文件组成,其中wxml和js文件必须存在,wxss和json文件可以省略。wxml和wxss文件类似于网页开发中的html和css文件,但是他们有所区别

四 页面间的关系

4.1 app.json

对于有一定编程功底的读者,可以通过阅读代码来分析页面之间的关系。首先打开app.json文件,在文件中找到如下代码。

1
2
3
4
5
6
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
}

上述代码中,pages开头的表示页面路径,例如,pages/index/index表示pages/index目录下的index.*文件。由于一个页面由多个不同扩展名的文件组成,这里是把它们看成一个整体,因此无须加上扩展名。此处定义了两个页面,分别是Index和log,顺序排在前面的index将作为小程序打开后的初始页面

4.2 pages/index/index.wxml

接下来打开pages/index/index.wxml,查看小程序首页的结构,找到如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

上述代码中,<image>标签用于显示用户头像,该标签的属性bindtap表示当用户单击该组件时,执行相应的事件处理函数,即bingViewTap。因此,当用户单击头像时,就会执行bingViewTap函数。

在pages/index/index.js中找到bindViewTap事件处理函数的代码,具体如下:

1
2
3
4
5
6
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},

在上述代码中,wx.navigateTo()方法用于跳转页面,从url行代码尅看出,程序会跳转到logs页面,从而实现了单击头像跳转到登录日志页面的效果

4.3 ../logs/logs

打开logs页面的逻辑文件pages/logs/logs.js,可以看到该页面引用了utils/utils.js脚本文件,如下所示。这个脚本文件用于保存公共代码,从而在不同页面中引用。

1
2
//logs.js
const util = require('../../utils/util.js')