视频学习:https://www.bilibili.com/video/BV1BJ411W7pX
一、介绍项目目录和文件作用
pages.json
文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json
文件是应用的配置文件,用于指定应用的名称、图标、权限等。
App.vue
是我们的跟组件,所有页面都是在App.vue
下进行切换的,是页面入口文件,可以调用应用的生命周期函数。
main.js
是我们的项目入口文件,主要作用是初始化vue
实例并使用需要的插件。
uni.scss
文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss
文件里预置了一批scss变量预置。
unpackage
就是打包目录,在这里有各个平台的打包文件
pages
所有的页面存放目录
static
静态资源目录,例如图片等
components
组件存放目录
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app
约定了如下开发规范:
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范,详见uni-app 组件规范
- 接口能力(JS API)靠近微信小程序规范,但需将前缀
wx
替换为uni
,详见uni-app接口规范 - 数据绑定及事件处理同
Vue.js
规范,同时补充了App及页面的生命周期 - 为兼容多端运行,建议使用flex布局进行开发
二、全局配置和页面配置
配置tabBar
"tabBar": {
"list": [
{
"text": "首页",
"pagePath":"pages/index/index",
"iconPath":"static/tabs/home.png",
"selectedIconPath":"static/tabs/home-active.png"
},
{
"text": "信息",
"pagePath":"pages/message/message",
"iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png"
},
{
"text": "我们",
"pagePath":"pages/contact/contact",
"iconPath":"static/tabs/contact.png",
"selectedIconPath":"static/tabs/contact-active.png"
}
]
}
三、Uni中的生命周期函数
下拉刷新:
- 需要在
pages.json
里,找到的当前页面的pages节点,并在style
选项中开启enablePullDownRefresh
{
"path":"pages/list/list",
"style":{
"enablePullDownRefresh": true
}
}
- 通过调用
uni.startPullDownRefresh
方法来开启下拉刷新
uni.startPullDownRefresh()
四、网络请求
(一)get请求
<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
url: 'http://localhost:8082/api/getlunbo',
success(res) {
console.log(res)
}
})
}
}
}
</script>
(二)post请求
<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
url: 'http://localhost:8082/api/getlunbo',
data:{
//需要传入的数据
}
success(res) {
console.log(res)
}
})
}
}
}
</script>
五、数据存储
番外:同步和异步的区别
同步:
同步就是指一个进程在执行某个请求时,若该请求需要一段时间返回数据,那么这个进程就会一直等下去,直到成功返回数据后再进行下一步操作;
异步:
异步相反,不需要等待,不管其他进程的状态,继续执行下一步操作,当有数据返回时,就会通知这个进程处理,这样就能提高执行的效率
uni.setStorage
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
uni.setStorage({
key: 'id',
data: 100,
success () {
console.log('存储成功')
}
})
}
}
}
</script>
<style>
</style>
uni.setStorageSync
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
uni.setStorageSync('id',100)
}
}
}
</script>
<style>
</style>
uni.getStorage
从本地缓存中异步获取指定 key 对应的内容。
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
data () {
return {
id: ''
}
},
methods: {
getStorage () {
uni.getStorage({
key: 'id',
success: res=>{
this.id = res.data
}
})
}
}
}
</script>
uni.getStorageSync
从本地缓存中同步获取指定 key 对应的内容。
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
methods: {
getStorage () {
const id = uni.getStorageSync('id')
console.log(id)
}
}
}
</script>
uni.removeStorage
从本地缓存中异步移除指定 key。
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorage({
key: 'id',
success: function () {
console.log('删除成功')
}
})
}
}
}
</script>
uni.removeStorageSync
从本地缓存中同步移除指定 key。
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorageSync('id')
}
}
}
</script>
应用:(真实案例)
获取Token并登陆:
使用页面中:
async login(){
const res=await this.$myRequest({
url:'/user/login',
methods:'POST',
data:{
"password": "123321",
"username": "admin"
},
})
// console.log(res.data.data.token,'login')
uni.setStorageSync('token', res.data.data.token);
// uni.getStorageSync('token')
}
函数封装:
utils中创建api.js
const BASE_URL='http://12.112.345.154:8001'
export const myRequest =(options)=>{
return new Promise((resolve,reject)=>{
uni.request({
url:BASE_URL+options.url,
method:options.methods||'GET',
data:options.data||{},
header: {Authorization:uni.getStorageSync('token')},
success:(res)=> {
if(res.data.status!==200){
return uni.showToast({
title:'获取数据失败'
})
}
resolve(res)
},
fail:(err)=>{
uni.showToast({
title:'请求接口失败'
})
reject(err);
}
})
})
}
全局导入(main.js)中:
import { myRequest } from './utils/api.js'
Vue.prototype.$myRequest = myRequest
六、上传图片、预览图片
uni.chooseImage
从本地相册选择图片或使用相机拍照。
<template>
<view>
<button @click="chooseImg" type="primary">上传图片</button>
<view>
<image v-for="item in imgArr" :src="item" :key="index"></image>
</view>
</view>
</template>
<script>
export default {
data () {
return {
imgArr: []
}
},
methods: {
chooseImg () {
uni.chooseImage({
count: 9,
success: res=>{
this.imgArr = res.tempFilePaths
}
})
}
}
}
</script>
预览图片
<view>
<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>
方法:previewImg (current) {
uni.previewImage({
urls: this.imgArr,
current
})
}
七、关于注释(条件注释实现跨段兼容)
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
写法:以 #ifdef
加平台标识 开头,以 #endif
结尾。
<!-- #ifdef H5 -->
<view>
h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
app会显示
</view>
<!-- #endif -->
八、路由跳转
一、tabBar跳转在pages.json
中设置
二、利用navigator
进行跳转
(1)跳转到普通页面
<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳转到关于页面</button>
</navigator>
(2)跳转到TabBar页面
<navigator url="/pages/message/message" open-type="switchTab">
<button type="default">跳转到message页面</button>
</navigator>
三、利用navigateTo
进行导航跳转(编程式导航跳转)
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack
可以返回到原页面。
<button type="primary" @click="goAbout">跳转到关于页面</button>
goAbout () {
uni.navigateTo({
url: '/pages/about/about',
})
}
四、通过switchTab跳转到tabbar页面
<button type="primary" @click="goMessage">跳转到message页面</button>
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
五、redirectTo
进行跳转
关闭当前页面,跳转到应用内的某个页面。
uni.redirectTo({
url: 'test?id=1'
});
六、导航跳转传递参数
在导航进行跳转到下一个页面的同时,可以给下一个页面传递相应的参数,接收参数的页面可以通过onLoad
生命周期进行接收。
传递参数的页面
goAbout () {
uni.navigateTo({
url: '/pages/about/about?id=80',
});
}
接收参数的页面
<script>
export default {
onLoad (options) {
console.log(options)
}
}
</script>
Tips:
- navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
- 不能在 App.vue 里面进行页面跳转。
九、组件
一、组件的创建
在uni-app
中,可以通过创建一个后缀名为vue
的文件,即创建一个组件成功,其他组件可以将该组件通过import
的方式导入,在通过components
进行注册即可。
- 创建login组件,在
component
中创建login目录,然后新建login.vue
文件
<template>
<view>这是一个自定义组件</view>
</template>
<script></script>
<style></style>
- 在其他组件中导入该组件并注册
import login from "@/components/test/test.vue"
- 注册组件
components: {test}
- 使用组件
<test></test>
二、组件的通讯
(一)父传子
- 通过
props
来接受外界传递到组件内部的值 - 父传子: 通过
:
,子组件通过props接收
子组件
<template>
<view>
这是一个自定义组件 {{msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
<style>
</style>
- 其他组件在使用login组件的时候传递值
父组件
<template>
<view>
<test :msg="msg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
components: {test}
}
</script>
(二)子传父
- 通过
$emit
触发事件进行传递参数 - 子传父通过调用方法传递 this.$emit(‘myEvent’,this.num)
子组件
<template>
<view>
这是一个自定义组件 {{msg}}
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '打篮球'
}
},
props: {
msg: {
type: String,
value: ''
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
- 父组件定义自定义事件并接收参数
父组件
<template>
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) {
console.log(res)
}
},
components: {test}
}
</script>
十、日历的使用
官方文档:https://ext.dcloud.net.cn/plugin?id=56
- 首先,要在组件库中下载
- 引用