QDPZ-UniApp 开源项目教程

1. 项目的目录结构及介绍

QDPZ-UniApp 项目的目录结构如下：

qdpz-uniapp/
├── common/
├── components/
├── pages/
├── static/
├── store/
├── App.vue
├── main.js
├── manifest.json
├── pages.json
├── uni.scss

目录介绍

• common/: 存放公共资源文件，如工具函数、常量等。
• components/: 存放项目中使用的组件。
• pages/: 存放项目的页面文件。
• static/: 存放静态资源文件，如图片、字体等。
• store/: 存放 Vuex 状态管理文件。
• App.vue: 项目的根组件。
• main.js: 项目的入口文件。
• manifest.json: 项目的配置文件，包含应用的基本信息和权限配置。
• pages.json: 项目的页面路由配置文件。
• uni.scss: 项目的全局样式文件。

2. 项目的启动文件介绍

main.js

main.js 是项目的入口文件，主要负责初始化 Vue 实例并引入必要的插件和配置。以下是 main.js 的基本结构：

import Vue from 'vue'
import App from './App'
import store from './store'
import './uni.scss'

Vue.config.productionTip = false

App.mpType = 'app'

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

app.$mount()

App.vue

App.vue 是项目的根组件，包含了应用的全局样式和结构。以下是 App.vue 的基本结构：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 全局样式 */
</style>

3. 项目的配置文件介绍

manifest.json

manifest.json 是项目的配置文件，包含了应用的基本信息和权限配置。以下是 manifest.json 的基本结构：

{
  "name": "QDPZ-UniApp",
  "description": "A UniApp project",
  "version": "1.0.0",
  "author": "Best-Kevin",
  "manifestVersion": 1,
  "permissions": {
    "audio-capture": {
      "description": "Required to capture audio using getUserMedia()"
    },
    "video-capture": {
      "description": "Required to capture video using getUserMedia()"
    }
  }
}

pages.json

pages.json 是项目的页面路由配置文件，定义了应用的页面和导航规则。以下是 pages.json 的基本结构：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "QDPZ-UniApp",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

通过以上配置，可以确保项目在不同平台上的正确运行和显示。