uni-app开发一个小视频应用(一)
一、uni-app简介uni-app 是一个使用 Vue.js?开发所有前端应用的框架,是一种终极的跨平台解决方案,这里的平台,主要指的是App平台(android、ios)、小程序平台、H5平台。开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
二、uni-app初始目录及文件介绍 ① pages.json?: 该文件是用来对 uni-app 进行全局配置,决定页面文件的路径(pages)、窗口样式(globalStyle)、原生的导航栏(globalStyle)、底部的原生tabbar(tabBar)?等。 ② manifest.json: 该文件是应用的配置文件,主要用于指定应用的名称、图标、权限等。 ③ App.vue?: 该文件是应用的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件,在这个文件里,你可以初始化一些通用的组件,调用一些应用生命周期函数,应用生命周期(onLaunch、onShow、onHide)仅可在App.vue中监听,在其它页面监听无效,以及设置一些全局的样式,即在App.vue中的<style></style>内置设置全局样式。 ④ 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,将<template>中的模板内容content部分清空,将uni-app初始项目中与应用无关的东西进行清空、修改即可。
② 创建底部导航栏组件 首先要弄清楚我们的uni-app已经提供了tabBar的配置,即提供了底部导航栏的,那为什么还需要自定义底部导航栏呢 ?因为uni-app提供的默认底部导航栏tabBar的背景颜色只支持十六进制,所以无法设置为透明。同时我们又需要将底部导航栏中的页面设置为tabBar页面,所以我们还是要进行tarBar的配置,而一配置tabBar,那么就会自动出现uni-app提供的默认导航栏,所以我们必须在应用启动onLaunch的时候将默认tabBar进行隐藏,那么没有了默认导航栏,我们怎么进行tabBar页面的切换呢?我们可以通过<navigator>组件设置不同的跳转方式,实现应用内各种页面之间的跳转。记住APP和微信小程序是不支持<a>标签跳转的。 底部导航栏有五个页面:?首页(index.vue)、关注(follow.vue)、加号(添加好友friend.vue)、消息(news.vue)、我(personal.vue)。所以需要在pages中模仿index新建出剩余的四个页面,页面新建完成后,需要配置到pages.json中的tarBar中,只需要配置list即可,如: {
"tabBar": { // 在pages.json中添加上tabBar配置,如下
"list": [
{"pagePath":"pages/index/index"},{"pages/follow/follow"},68);">"pages/friend/friend"},68);">"pages/news/news"},68);">"pages/personal/personal"}
]
}
}
// App.vue中onLaunch的时候隐藏掉uni-app自带的tabBar 在ios和安卓App平台上运行时,会出现tabBar隐藏失败的情况,解决办法就是隐藏的时候需要添加一个1000ms左右的延迟
|