微信小程序项目实战 —— 1.3 小程序目录结构

目录

1.3.1 前言

1.3.2 概览

 1.3.3 公共文件

1. sitemap.json

 2. app.js —— 注册小程序

3.app.json —— 全局配置

4.app.wxss —— 全局样式

5.project.config.json —— 工具配置

1.3.4 页面文件

1.页面层

 2.逻辑层

1.3.5 utlis 文件

1.3.6 总结

---

1.3.1 前言

开发微信小程序必须拥有APPID和下载微信开发者工具才行，之前我写过两篇文章详细说明了如何注册APPID和下载微信开发者工具，需要的小伙伴可以点这里。

首先要有APPID

其次要下载微信开发者工具并新建项目

1.3.2 概览

千呼万唤不如直接看图。

微信小程序包含描述整体程序的 app , project.config , sitemap 和描述各个页面的 pages 。（utils只是一个存放 JavaScript 文件的文件夹，下面会有比较详细的解释）

 1.3.3 公共文件

什么是公共文件？

就是它们。

 

1. sitemap.json

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json，则默认为所有页面都允许被索引。

 2. app.js —— 注册小程序

开发者工具会自动在 app.js 中生成以下代码。 

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

开发者可以通过 getAPP 方法来获取 App 中的实例，数据和函数。（先了解这些就行，以后会有出博客来详细说明 app.js 中的 App 方法）

1. App({
2.   onLaunch: function () {// 展示本地存储能力
3.     var logs = wx.getStorageSync('logs') || []
4.     logs.unshift(Date.now())
5.     wx.setStorageSync('logs', logs)
6.  
7.     // 登录
8.     wx.login({
9.       success: res => {
10.         // 发送 res.code 到后台换取 openId, sessionKey, unionId
11.       }
12.     })
13.     // 获取用户信息
14.     wx.getSetting({
15.       success: res => {
16.         if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
17.           wx.getUserInfo({
18.             success: res => {
19.               // 可以将 res 发送给后台解码出 unionId
20.               this.globalData.userInfo = res.userInfo
21.  
22.               // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
23.               // 所以此处加入 callback 以防止这种情况
24.               if (this.userInfoReadyCallback) {
25.                 this.userInfoReadyCallback(res)
26.               }
27.             }
28.           })
29.         }
30.       }
31.     })
32.   },
33.  globalData: {
34.     userInfo: null
35.   }
36. })

3.app.json —— 全局配置

什么是全局配置？概念定义看起来没意思，直接看案例吧。顺便解释一下 app.json 自动配置的内容。

是不是有种似懂非懂的感觉，再看

上图中 app.json 中 window 对导航栏进行配置，而这个配置是可以应用于小程序所有页面中的。这就是全局配置。

4.app.wxss —— 全局样式

wxss 其实和 css 区别并不大，所以 app.wxss 其实就是可以应用于小程序所有页面的样式。

5.project.config.json —— 工具配置

小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，在工具上做的任何配置都会写入到这个文件，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

1.3.4 页面文件

页面文件就是 page 文件夹里的文件，page 文件夹中的自动生成的首页文件（ index ）和日志文件（ log ）。每个页面文件中都会有四个文件，分别是 js , json , wxml ,wxss 。可以将这四个文件划分为页面层和逻辑层。

1.页面层

（1）wxml : 小程序的页面结构，文字、图片、音乐、视频、地图、轮播等组件都会放在这里；像这样

（2）wxss : 小程序的页面样式，和app.wxss一样是控制样式，而页面的wxss文件是控制单个页面的样式；像这样

 2.逻辑层

（1）js : 就是 JavaScript , 不会的话要补一补了。可以看一下这个 —— JavaScript字典 ;

（2）json : 就是页面配置，可以对当前页面的窗口表现进行配置。需要注意的是，在当前页面，页面配置会覆盖全局配置。

来实验一下，先把首页位置进行更换。更改后再编译一下就行了。

为了加深理解，我把上图中注释那段代码删了进行比较。 

1.3.5 utlis 文件

utils 文件夹中只放了一个 js 文件 —— util.js , 这里先不做过多了解。不过看到里面各种 getMonth , getDate 什么的可以知道它是用来获取系统时间，而日志文件中恰巧显示的就是系统时间，绝不是偶然。回去看一下 logs.js 。

 const 是用来声明变量的，详细资料点这里，util 只是变量名，后面的 require 以及括号内容是用来引入 util.js 的。由此可以发现，util.js 是用来给 logs.js 获取系统时间用的。

1.3.6 总结