微信小程序项目结构

项目的基本组成结构为：
① pages 用来存放所有小程序的页面；
② utils 用来存放工具类的模块（例如：格式化时间的自定义模块）；
③ app.js 小程序项目的入口文件；
④ app.json 小程序项目的全局配置文件；
⑤ app.wxss 小程序项目的全局样式文件；
⑥ project.config.json 项目的配置文件；
⑦ sitemap.json 用来配置小程序及其页面是否允许被微信索引。

小程序页面的组成部分（每个页面由 4个基本文件组成）：
① .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）；
② .json 文件（当前页面的配置文件，配置窗口的外观、表现等）；
③ .wxml 文件（页面的模板结构文件）；
④ .wxss 文件（当前页面的样式表文件）。

微信小程序项目文件对应的源码

全局配置文件

// app.json:
{
    // 必填,页面路径列表
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    // 非必填,全局的默认窗口表现 
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    // 非必填,指定使用升级后的 weui 样式
    "style": "v2",
    // 必填,指明 sitemap.json 的位置
    "sitemapLocation": "sitemap.json",
    // 非必填,配置自定义组件代码按需注入
    "lazyCodeLoading": "requiredComponents"
}

project.config.json 配置文件

// project.config.json:
{
    // 描述
    "description": "项目配置文件",
    // 打包配置选项
    "packOptions": {
        "ignore": []
    },
    // 项目设置
    "setting": {
        // 不检查安全域名和 TLS 版本
        "urlCheck": false,
        // 启用 es6 转 es5
        "es6": true,
        "enhance": false,
        // 上传代码时样式自动补全
        "postcss": true,
        // 上传代码时自动压缩
        "minified": true,
        // 新特征，文档中未描述
        "newFeature": true,
        "coverView": true,
        "autoAudits": false,
        "showShadowRootInWxmlPanel": true,
        "scopeDataCheck": false,
        "checkInvalidKey": true,
        "checkSiteMap": true,
        "uploadWithSourceMap": true,
        "babelSetting": {
            "ignore": [],
            "disablePlugins": [],
            "outputPath": ""
        }
    },
    // 编译类型
    "compileType": "miniprogram",
    // 基础库版本
    "libVersion": "2.8.3",
    // 项目的appid,只在新建项目时读取
    "appid": "wxd0ae7e1556f1e238",
    // 项目名称,只在新建项目时读取
    "projectname": "miniprogram-3",
    // 调试配置选项
    "debugOptions": {
        // 配置调试时于调试器 Sources 面板隐藏源代码的hidedInDevtools 的配置规则和 packOptions.ignore 是一致的。
        "hidedInDevtools": []
    },
    "isGameTourist": false,
    "simulatorType": "wechat",
    "simulatorPluginLibVersion": {},
    // 编译模式，增加编译模式时，会添加到下面的对应数组
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "game": {
            "currentL": -1,
            "list": []
        },
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

sitemap.json 配置文件

// sitemap.json:
{
    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
    // 必填,索引规则列表
    "rules": [{
        // 非必填,可选值: "allow"、"disallow",默认值为 "allow", 表示命中该规则的页面是否能被索引
        "action": "allow",
        // 必填,可取值为 "*"、页面的路径,`*` 表示所有页面，不能作为通配符使用
        "page": "*"
    }]
}

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

// app.js
// 注册小程序。接受一个 `Object` 参数，其指定小程序的生命周期回调等。
App({
    // 非必填,生命周期回调——监听小程序初始化。
    onLaunch (options) {
        // Do something initial when launch.
    },
    // 非必填,生命周期回调——监听小程序启动或切前台。
    onShow (options) {
        // Do something when show.
    },
    // 非必填,生命周期回调——监听小程序切后台。
    onHide () {
        // Do something when hide.
    },
    // 非必填,错误监听函数。
    onError (msg) {
        console.log(msg)
    },
    // 非必填,开发者可以添加任意的函数或数据变量到 `Object` 参数中，用 `this` 可以访问。
    globalData: 'I am global data'
})

页面 js文件：对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

// pages/index/index.js:
// 整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 `getApp` 方法获取到全局唯一
// 的 App 实例，获取 App 上的数据或调用开发者注册在 `App` 上的函数。
const appInstance = getApp(); 

// 使用 Page 构造器注册小程序中的一个页面。接受一个 `Object` 类型参数，其指定页面的初始数
// 据、生命周期回调、事件处理函数等。
Page({
    // 页面的初始数据
    data: {
        text: "This is page data."
    },
    // 生命周期回调—监听页面加载
    onLoad: function(options) {
        // 页面创建时执行
        console.log(appInstance.globalData); // 'I am global data'
    },
    // 生命周期回调—监听页面显示
    onShow: function() {
        // 页面出现在前台时执行
    },
    // 生命周期回调—监听页面初次渲染完成
    onReady: function() {
        // 页面首次渲染完毕时执行
    },
    // 生命周期回调—监听页面隐藏
    onHide: function() {
        // 页面从前台变为后台时执行
    },
    // 生命周期回调—监听页面卸载
    onUnload: function() {
        // 页面销毁时执行
    },
    // 监听用户下拉动作
    onPullDownRefresh: function() {
        // 触发下拉刷新时执行
    },
    // 页面上拉触底事件的处理函数
    onReachBottom: function() {
        // 页面触底时执行
    },
    // 用户点击右上角转发
    onShareAppMessage: function () {
        // 页面被用户分享时执行
    },
    // 页面滚动触发事件的处理函数
    onPageScroll: function() {
        // 页面滚动时执行
    },
    // 页面尺寸改变时触发，详见 响应显示区域变化
    onResize: function() {
        // 页面尺寸变化时执行
    },
    // 当前是 tab 页时，点击 tab 时触发
    onTabItemTap(item) {
        // tab 点击时执行
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
    },
    // 事件响应函数
    viewTap: function() {
        this.setData({
            text: 'Set some data for updating view.'
        }, function() {
            // this is setData callback
        })
    },
    // 自由数据
    customData: {
        hi: 'MINA'
    }
})