uni-app开发一个小视频应用(一)

一、uni-app简介

uni-app 是一个 使用 Vue.js 开发所有前端应用的框架，是一种终极的跨平台解决方案，这里的平台，主要指的是 App平台(android、ios)、 小程序平台、 H5平台。开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
uni-app将常用的组件和api进行了跨平台封装，并且 保持与微信小程序的组件和api一致，同时兼容以微信的方式去调用api，即 在uni-app中除了可以使用全局的uni对象去调用微信小程序中同名的api还可以使用全局的wx对象去调用api。uni-app使用 vue的语法以及 微信小程序api，所以学习成本非常低。

二、uni-app初始目录及文件介绍

① pages.json : 该文件是用来对 uni-app 进行全局配置，决定页面文件的路径(pages)、窗口样式(globalStyle)、原生的导航栏(globalStyle)、底部的原生tabbar(tabBar) 等。
它类似微信小程序中app.json的页面管理部分。需要注意的是，微信小程序权限配置也是在app.json文件中，通过permission进行配置，而uni-app则将权限配置移到了manifest.json文件中。

② manifest.json: 该文件是应用的配置文件，主要用于指定应用的名称、图标、权限等。

③ App.vue : 该文件是应用的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件，在这个文件里，你可以初始化一些通用的组件，调用一些应用生命周期函数，应用生命周期(onLaunch、onShow、onHide)仅可在App.vue中监听，在其它页面监听无效，以及设置一些全局的样式，即在App.vue中的内置设置全局样式。

④ main.js: 该文件是应用的入口文件，主要作用是初始化App.vue主组件并安装需要的插件，如vuex，需要注意的是，uni-app中是不能使用vue-router插件的，因为路由须在pages.json中进行配置。

// main.js

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

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({ // ①官方写法
    ...App
})
// const app = new Vue(App); // ②等价于上面的写法

// const app = new Vue({ // ③可正常渲染出页面，但onLaunch、onShow、onHide应用生命周期失效
//      render: h => h(App)
// });
app.$mount()

main.js中官方写法是在创建Vue实例的时候传入一个对象，并且对根组件App.vue进行解构后传入， 其写法和直接传入根组件是一样的，但是如果通过写法③虽然可以正常渲染出页面，但是 根组件上的应用生命周期函数将失效

⑤ pages文件夹: 主要用于存放应用中的页面，应用中的页面就是.vue组件。

⑥ static文件夹: 主要用于存放应用中的图片等静态资源。

⑦ uni.scss: 主要存放uni-app内置的常用样式变量。

⑧ unpackage文件夹: 主要存放uni-app编译运行后生成的打包相关输出文件。

三、开始开发一个小视频应用

① 初始化项目

打开HBuilderX IDE，新建一个名称为 mini-video的初始化uni-app项目，这里 勾选uni-app即可创建，项目创建完成后，打开pages/index/index.vue， 将