前端学习–uniapp部分
前言
uniapp官网:
https://uniapp.dcloud.net.cn/
推荐一个网站(一个字绝!):
https://www.qingnian8.com/
1.组件
uniapp中的基础组件与Vue2中的组件有一些区别,比如在
template
标签中不再使用div
标签,而是使用view
标签。想了解其他常用组件请前往官网中的组件
板块(在页面上方导航栏),并在该板块下查阅基础组件列表
(在页面最右侧导航栏中)。注:接下来老师讲的view、icon、text、scroll-view、swiper、image、video、audio、表单组件等都在
基础组件列表
中找到,直接点击跳转到对应页面,使用方法就在下面(下拉滚动条)。下面是关于表单组件的实际应用:
<template> <view> <!-- 携带form中的数据触发submit事件 --> <form @submit="onSubmit"> <view class="row"> <!-- 这个name是为了能在控制台打印出来数据 --> <input type="text" name="username" placeholder="输入姓名..." /> </view> <view class="row"> <textarea name="content" placeholder="输入内容..."></textarea> </view> <radio-group name="sex"> <label> <radio value="男" /><text>男</text> </label> <label> <radio value="女" /><text>女</text> </label> </radio-group> <picker :range="array" :value="index" @change="change" name="hobby"> <view>爱好:{{array[index]}}</view> </picker> <view> <button form-type="submit" type="primary">提交</button> <button form-type="reset">重置</button> </view> </form> </view> </template> <script> export default { data() { return { array: ['唱歌', '跳舞', '吃饭'], index:0 } }, methods: { onSubmit(e){ console.log(e) }, change(e){ this.index=e.detail.value } } } </script> <style lang="scss"> .row{ margin: 10rpx; border: 1px solid darkgray; } </style>
2.tabBar
- 在实际开发中
导航菜单
是必不可少的功能,在uniapp中我们通过配置tabBar
实现这一功能。再次打开官网点击全局文件
板块(在页面上方导航栏),然后点击pages.json页面路由
(在页面最左侧导航栏中),找到配置项列表
(在页面中间下拉滚动条)。
导航总是伴随着图标,阿里巴巴矢量图标库:
https://www.iconfont.cn/
注:tabBar的使用方法也在对应页面的下方(下拉滚动条即可查看)。
存在导航页面的问题(在官网tabBar常见问题中)
官网给出的解决方案是在
navigator
标签中加上open-type="switchTab"
,因为open-type
的值navigate
与redirect
不支持tabBar页面跳转。
3.Vue
1.Vue的基础知识
这里开始讲解vue的知识点,不过仅仅是大概的介绍一下,并没有过深的讲解(个人认为只适合复习);建议去我的博客主页看一下Vue的笔记,推荐的配套课程是B站尚硅谷天禹老师的Vue课程。下面笔记内容重点。
2.组件的引入
在uniapp中采用easycom自动导入组件,不再像传统Vue需要引入和注册组件,只需要建立对应文件夹。
路径规范如下(文件名不可乱起):
- 安装在项目根目录的components目录下,路径为
components/组件名称/组件名称.vue
- 安装在uni_modules下,路径为
uni_modules/插件ID/components/组件名称/组件名称.vue
3. .sync 修饰符
<template> <view> <!-- 父组件 --> <!-- 最原始的自定义事件 --> <!-- <myitem :state="mystate" @stateEnv="onstateEnv"></myitem> --> <!-- 这步只是为了好理解 --> <!-- <myitem :state="mystate" @update:state="state"></myitem> --> {{mystate}} <!-- 其实只要记住:state.sync与update:state配对使用就好 --> <myitem :state.sync="mystate"></myitem> </view> </template> <script> export default { data() { return { mystate:false } }, methods: { // 因为已经自定事件了 /* state(e){ this.mystate=e console.log(this.mystate) } */ } } </script>
<!-- myitem组件 --> <template> <view> <!-- 子组件 --> <button @click="onClick"> 点击 </button> </view> </template> <script> export default { props:['state'], name:"myitem", data() { return { }; }, methods:{ onClick(){ // console.log(e) this.mystate=!this.mystate // 使用.sync一定要搭配update: this.$emit("update:state",this.mystate) } } } </script>
4.生命周期
在uniapp中直接使用传统Vue的生命周期即可;网络请求推荐使用生命周期中的created(速度较快);如果想在DOM体渲染完毕之后进行操作,推荐使用mounted;觉得区分比较麻烦可以直接写在mounted。
简单介绍一下小程序的生命周期(了解即可):
<!-- App.vue文件 --> <script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') }, created() { console.log('App created') } } </script>
//正常Vue文件 methods: { ... }, created() { console.log('created') }, mounted() { console.log('mounted') }, onLoad() { console.log('onLoad') }
5.API
uniapp中的API和传统Vue中的API相比有很大的不同移步到官网进行查看,查看位置与使用方法(官网也有,在页面下方)如下所示:
1.页面与路由
methods: { onClickOne(){ // 这里即将跳转的页面是一个tabBar页面,所以不用navigateTo // 需要注意的是switchTab不能传参 uni.switchTab({ url: "/pages/about/about" }); }, onClickTow(){ uni.navigateTo({ // 如果传递多个参数用&符号 url: "/pages/demo_api/demo_api?id=1&name=uniapp" }); }, // 进行参阅,$route用来读路由,$router用来写路由 mounted() { console.log(this.$route.query.name) } }
注:页面栈
getCurrentPages()
很重要;它的使用场景是想知道一共打开了多少页,用它来监听;具体使用方法移步到官网,它的位置在API--页面与路由--页面
,也可以直接在右侧搜索文档
中直接搜索。
解決小程序中不支持
vue-router
的问题:因为小程序不支持
vue-router
,所以当我们想获取参数的时候,要采用onLoad()
和getCurrentPages()
搭配使用。onLoad(e) { // 通过getCurrentPages()来获取所有页面对象 console.log(getCurrentPages()) }
注:如果一定要使用
vue-router
来获取参数的话,只能下载插件。2.界面
页面交互效果在官网中的
API--界面--交互反馈
,想了解更过内容请前往查看。methods: { onClick(){ // 这里即将跳转的页面是一个tabBar页面,所以不用navigateTo uni.showToast({ title:"跳转成功", icon:"success", mask:true, }); setTimeout(()=>{ uni.switchTab({ url: "/pages/about/about" }); },1000) } },
注:
uni.showLoading()
需要在页面加载完成之后再添加的,所以要放在onLoad()
生命钩子中。它的作用是显示 loading 提示框。设置导航条的时候要仔细查看一下该API在什么情况(平台)下中才支持使用,以及它能在什么生命周期中使用;想了解更多内容请前往
API--界面--设置导航条
进行查看。tabBar中的
iconfont
不推荐使用,还是iconPath
会好用一些;想了解更多内容请前往API--界面--设置TabBar
进行查看。3.网络
request在官网中的
API--网络--发起请求
,想了解更过内容请前往查看。测试接口:
- 小狗照片:
https://dog.ceo/api/breeds/image/random
- 猫咪照片:
https://api.thecatapi.com/v1/images/search?limit=1
- 土味情话:
https://api.uomg.com/api/rand.qinghua
- 测试接口(国外的网站):
https://jsonplaceholder.typicode.com/posts
- 测试接口的使用手册:
https://jsonplaceholder.typicode.com/
uni.request()
中的method有post
和get
两种请求方式。4.数据缓存
在官网中的
API--数据缓存
,想了解更过内容请前往查看;一般情况下使用同步的,异步的使用起来较为复杂。//同步使用,可以直接拿过来,不用try...catch... uni.setStorageSync('storage_key', 'hello');
推荐使用
uni.removeStorage()
和uni.removeStorageSync()
;不推荐使用uni.clearStorage()
和uni.clearStorageSync()
,因为后者会把所有本地数据缓存都清理掉。