uniapp-avatar 项目教程

1. 项目目录结构及介绍

uniapp-avatar/
├── components/
│   └── yq-avatar/
│       ├── yq-avatar.vue
│       └── ...
├── pages/
│   └── index/
│       ├── index.vue
│       └── ...
├── static/
│   └── logo.png
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── README.md

目录结构介绍

• components/: 存放项目的自定义组件，yq-avatar 是用于头像裁剪的组件。
• pages/: 存放项目的页面文件，index 是项目的入口页面。
• static/: 存放静态资源文件，如图片等。
• App.vue: 项目的根组件，用于定义全局样式和结构。
• main.js: 项目的入口文件，负责初始化 Vue 实例。
• manifest.json: 项目的配置文件，定义应用的基本信息、图标、权限等。
• pages.json: 项目的页面配置文件，定义页面的路径和导航栏样式等。
• README.md: 项目的说明文档，包含项目的介绍、使用方法等。

2. 项目的启动文件介绍

main.js

main.js 是项目的入口文件，负责初始化 Vue 实例并挂载到 DOM 上。以下是 main.js 的基本结构：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})

app.$mount()

文件介绍

• Vue.config.productionTip: 设置为 false 以关闭生产环境下的提示信息。
• App.mpType: 设置为 'app'，表示这是一个多端应用。
• new Vue({ ...App }): 创建 Vue 实例并传入 App 组件。
• app.$mount(): 将 Vue 实例挂载到 DOM 上。

3. 项目的配置文件介绍

manifest.json

manifest.json 是项目的配置文件，定义应用的基本信息、图标、权限等。以下是 manifest.json 的基本结构：

{
  "name": "uniapp-avatar",
  "description": "uni-app 头像裁剪 小程序 ios android h5 全平台支持",
  "version": "1.0.0",
  "appid": "__UNI__XXXXXX",
  "uniStatistics": {
    "enable": false
  },
  "h5": {
    "title": "uniapp-avatar",
    "router": {
      "mode": "history"
    }
  }
}

文件介绍

• name: 应用的名称。
• description: 应用的描述。
• version: 应用的版本号。
• appid: 应用的唯一标识符。
• uniStatistics: 是否启用统计功能。
• h5: H5 平台的配置，包括标题和路由模式。

pages.json

pages.json 是项目的页面配置文件，定义页面的路径和导航栏样式等。以下是 pages.json 的基本结构：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uniapp-avatar",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

文件介绍

• pages: 定义应用的页面路径和样式。
  • path: 页面的路径。
  • style: 页面的样式配置，如导航栏标题、背景颜色等。
• globalStyle: 定义全局样式，如导航栏文字颜色、背景颜色等。

通过以上配置，uniapp-avatar 项目可以在多个平台上运行，并提供头像裁剪功能。