# mp小程序

**Repository Path**: htmhl/mp-applet

## Basic Information

- **Project Name**: mp小程序
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-04
- **Last Updated**: 2021-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信小程序

## 四类文件：

- `*.js` - 逻辑交互
- `*.json` - 配置
- `*.wxml` - 布局结构
- `*.wxss` - 样式

## 全局

### app.json

全局配置文件

- pages：放置的是每个页面的路由路径，原则上应该将应用中所有页面的路径配置都添加到 `pages` 字段中。在 `pages` 字段中配置的第一项会作为默认的欢迎页的路径。各页面路径配置时，不需要添加文件的后缀。
- window：全局窗口的配置
- tabBar：选项卡配置，list 列表中至少2项，最多5项
- subpackages: 分包，现在小程序应用最多可分 10 个包，每个包最大 2M，分包后总大小不超过 20M，所以对应应用中所要使用到的媒体资源（图像、音视频资源）一般是放置在自己的服务端进行保存，在小程序应用中通过相应的 url 载入使用。
- permission：权限配置，主要用于配置定位位置相关的权限

### app.js

全局注册小程序应用

调用 `App()` 函数来注册小程序应用：

```js
App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})
```

整个小程序应用的生命周期钩子函数：

- onLaunch()
- onShow()
- onHide()
- onError()

如果有全局数据需要管理，通常可在注册小程序应用时，设置一个自定义的 `globalData` 字段来进行全局数据管理。

### app.wxss

全局样式文件

## 页面

每个页面通常都由 `*.js`、`*.json`、`*.wxml`、`*.wxss` 四类文件构成，同一个页面使用这四类文件时文件名必须保持一致。

### `*.json` 

页面配置文件，与全局的 `window` 配置很多是一致的

### `*.js`

页面的逻辑交互文件，使用 `Page()` 函数来注册页面

```js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
```