微信小程序的文件结构：微信小程序教程系列01

迷南。 2021-12-09 06:41 342阅读 0赞

### **文件结构** ###

![20170206092847476][]

**示例目录：HelloWorld**

![Center][]

[\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*分割线\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*][Link 1]

## **全局文件** ##

### app.js文件 ###

这个是小程序的脚本代码文件，可以在这个文件上进行监听，并处理小程序的一些生命周期（比如一些全局变量）

在这个app.js文件内，需要使用**App()**函数，来**注册程序**。

![20170206093241451][]

**演示：**

//app.js
    
    App({
    
      onLaunch: function () {
    
        //当小程序初始化完成时，会触发onLaunch（全局只触发一次）
    
      },
    
      onShow: function () {
    
      //当小程序启动，或从后台进入前台显示，会触发onShow
    
      },
    
      onHide: function () {
    
      //当小程序从前台进入后台，会触发onHide
    
      },
    
      onError: function (msg) {
    
      //当小程序发生脚本错误，或者api调用失败时，会触发onError并带上错误信息
    
      },
    
      other:function(){
    
    //全局函数，可以被项目上的其他js文件调用
    
      },
    
      globalData:{
    
    //全局对象
    
      },
    
    })

## app.json文件 ##

小程序的全局配置文件

![20170206093405258][]

**pages**

来指定小程序由哪些页面组成

接受一个数组，每一项都是字符串。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

例如：
    
    {
    
      "pages":[
    
        "pages/index/index",
    
        "pages/logs/logs"
    
      ]
    
    }
    
    
    备注：pages内只需要写wxml文件的路径，其他文件不用写

**window**

用于设置小程序的状态栏、导航条、标题、窗口背景色

![20170206095118015][]

示例：
    
    {
      "window":{
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "微信接口功能演示",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light"
      }
    }

![20170206102138504][]

**tabBar**

如果我们的小程序是一个多 tab应用（客户端窗口的底部或顶部有 tab栏可以切换页面），那么我们可以通过 tabBar配置项指定 tab栏的表现，以及 tab切换时显示的对应页面。

Tip： 通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar配置中的页面，也不会显示底部的 tab栏。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab按数组的顺序排序。  
![20170206100501350][]

![20170206100514741][]

示例：
    
    {
    
      "tabBar": {
    
      "color":"#818181",
    
      "selectedColor":"#0082D7",
    
      "borderStyle":"white",
    
        "list": [{
    
          "pagePath": "pages/index/index",
    
          "text": "首页",
    
          "iconPath":"images/tabbar/index@2x.png",
    
          "selectedIconPath":"images/tabbar/index_selected@2x.png"
    
        }, {
    
          "pagePath": "pages/me/me",
    
          "text": "设置",
    
          "iconPath":"images/tabbar/me@2x.png",
    
          "selectedIconPath":"images/tabbar/me_selected@2x.png"
    
        }]
    
      }
    
    }

![20170206103435552][]

**networkTimeout**

可以设置各种网络请求的超时时间。

![20170206102936998][]

示例：
    
    {
    
      "networkTimeout": {
    
        "request": 10000,
    
        "downloadFile": 10000
    
      }
    
    }

**debug**

可以在开发者工具中开启 debug模式，在开发者工具的控制台面板，调试信息以 info的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

示例：
    
    {
    
      "debug": false
    
    }

### **app.wxss****文件** ###

定义全局的样式

基本上与css差不多，这里不用多讲

## **一个页面的内部** ##

**xxx.js**

逻辑主函数

**Page(\{**

**\})**

![20170206105134248][]

示例：
    
    //index.js
    
    Page({
    
      data: {
    
        text: "This is page data."
    
      },
    
      onLoad: function(options) {
    
        // Do some initialize when page load.
    
      },
    
      onReady: function() {
    
        // Do something when page ready.
    
      },
    
      onShow: function() {
    
        // Do something when page show.
    
      },
    
      onHide: function() {
    
        // Do something when page hide.
    
      },
    
      onUnload: function() {
    
        // Do something when page close.
    
      },
    
      onPullDownRefresh: function() {
    
        // Do something when pull down.
    
      },
    
      onReachBottom: function() {
    
        // Do something when page reach bottom.
    
      },
    
      onShareAppMessage: function () {
    
       // return custom share data when user share.
    
      },
    
      // Event handler.
    
      viewTap: function() {
    
        this.setData({
    
          text: 'Set some data for updating view.'
    
        })
    
      },
    
      customData: {
    
        hi: 'MINA'
    
      }
    
    })

![20170206111547765][]

![20170206111631048][]

![20170206111703017][]

示例：
    
    Page({
    
      onShareAppMessage: function () {
    
        return {
    
          title: '自定义分享标题',
    
          desc: '自定义分享描述',
    
          path: '/page/user?id=123'
    
        }
    
      }
    
    })

### **xxx.wxml** ###

使用微信提供的组件来代替html元素

![20170206112220949][]

### **xxx.wxss** ###

小程序样式，与css样式基本相似，这里不重复论述

在当前页面的wxss文件内编辑的css样式，只能使用在当前页面

### **xxx.json** ###

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json中的 window配置项的内容，页面中配置项会覆盖 app.json的 window中相同的配置项。

页面的.json只能设置 window相关的配置项，以决定本页面的窗口表现，所以无需写 window这个键

![20170206112853050][]

示例：
    
    {
    
      "navigationBarBackgroundColor": "#ffffff",
    
      "navigationBarTextStyle": "black",
    
      "navigationBarTitleText": "微信接口功能演示",
    
      "backgroundColor": "#eeeeee",
    
      "backgroundTextStyle": "light"
    
    }

[20170206092847476]: /images/20211208/4369de8e4e514479916708a2cba9ef68.png
[Center]: /images/20211208/ec680b6e43934553b66bdea9a44bbe3f.png
[Link 1]: http://blog.csdn.net/michael_ouyang/article/details/54883903
[20170206093241451]: /images/20211208/f5b16415c02b4befa61e241fd90457a7.png
[20170206093405258]: /images/20211208/fa8511ca26e047ceb407dd39bd459885.png
[20170206095118015]: /images/20211208/0ffc52d7cb9843babc92d6e650169d27.png
[20170206102138504]: /images/20211208/17ccce9e925a471d9898903123f3b843.png
[20170206100501350]: /images/20211208/07360a6e66dd4b0fa44e713c5fce1f38.png
[20170206100514741]: /images/20211208/e02f31556dc14d6aa20090df6f85e151.png
[20170206103435552]: /images/20211208/fa6d35c2e5294b97888960c139807006.png
[20170206102936998]: /images/20211208/ee24f8148df54c96af660b08aa81dfad.png
[20170206105134248]: /images/20211208/14cfdcb0ada1430dbdd53af4358960f3.png
[20170206111547765]: /images/20211208/94c1ad984e3e4e4691d567ec987b6fc9.png
[20170206111631048]: /images/20211208/1987f0a673ec49289c2b0b34c5d8dcf4.png
[20170206111703017]: /images/20211208/1b3e1062b7374bbfa1c746f1b7810999.png
[20170206112220949]: /images/20211208/cc835b9c642e4513af1203cad6c2ff2d.png
[20170206112853050]: /images/20211208/4f8538566a60460893fe959244362032.png