黑马-uni-app

大马小马 · 发表于 2022-8-1 08:52:00

####uni-app的基本使用

参考视屏：03-项目目录和开发规范简单介绍_哔哩哔哩_bilibili

笔记：2022.08.01~2022.08.10

1.~~~Uni-App从入门到实战-黑马程序员杭州校区出品
视屏地址：https://www.bilibili.com/video/BV1BJ411W7pX?p=1&vd_source=d0acf1b50d58a251fbd395d941b1268c
2.~~~ 配置环境；
hbuilderx和微型小程序开发
2.1
熟悉开发操作;
在hbuilder中出创建一个uni-app项目;
3.~~~ 基础介绍；
3.1 介绍项目目录和文件作用；
`pages.json` 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

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

`App.vue`是我们的跟组件，所有页面都是在`App.vue`下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

`main.js`是我们的项目入口文件，主要作用是初始化`vue`实例并使用需要的插件。

`uni.scss`文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，`uni.scss`文件里预置了一批scss变量预置。

```unpackage``` 就是打包目录，在这里有各个平台的打包文件

```pages``` 所有的页面存放目录

```static``` 静态资源目录，例如图片等

```components``` 组件存放目录
3.2 设置pages.json中的globalStyle属性(全局配置样式);
eg：
"globalStyle": {
"navigationBarTextStyle": "black",//导航栏标题颜色及状态栏前景颜色，仅支持 black/white
"navigationBarTitleText": "uni-app",//导航栏标题文字内容
"navigationBarBackgroundColor": "#55ff00",//导航栏背景颜色（同状态栏背景色）
"backgroundColor": "#ffaaff",//窗口的背景色
"enablePullDownRefresh": true,//是否开启下拉刷新，详
"backgroundTextStyle": "light"//下拉 loading 的样式，仅支持 dark / light
},
3.3 创建一个新的页面;
3.3.1 在pages文件夹中创建一个新的文件夹(名为message),还得在该新文件夹中创建一个vue文件;
3.3.2 然后得在pages.json中的pages数组中写一个对象，配置其的path（路径）和style(样式);
3.3.3 放在最前面的对象，就会被当作是首页展示;
3.4 tabbar;
就是小程序下面的tab栏；
3.4.1 tabbar有一个list属性，在里面可以配置一个个对象为tab选项，在对象里面得配置text,pagePath,iconPath,selectedIconPath等属性;
3.4.2
eg: "tabBar": {
"list": [
{"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/tabs/home.png",
"selectedIconPath": "static/tabs/home-active.png"}//可以多个
]
}
3.4.3 tabBar的一级属性还有：
"color": "#a0033a",//默认颜色
"selectedColor": "#B3EE3A", //被选中颜色;
"backgroundColor": "#e6ded9",//背景色;
"borderStyle": "black",//边框色;
"position": "top",//tab位置,只适合用在微信小程序上
3.5 condition;
是整个pages.json文件的二级属性，因为是json，所以最外层整体是一个对象；
启动模式配置;
仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。 (eg：广告)
3.5.1 配置：
eg："condition": {
"current": 0,
"list": [
{"
name": "详情页",
"path": "pages/detail/detail",
"query": "id = 80"}
]
}
4.~~~uni-app组件的基本使用;
4.1 text组件;
4.1.1 有selectable,space属性；
selectable 表示是否可以选中；
space 表示的是如何编译空格;（ensp(两个空格算一个字符),emsp(一个空格一个字符),nbsp(一处空格一个字符)）;
4.1.2
eg：<text selectable space="emsp">唱歌
跳舞打篮球</text>
4.1.3 写于view中的东西自成一个块元素;
4.2 view组件；
类似html中的div使用;
4.2.1 hover-class//按下跳转样式事件;
4.2.2 hover-stop-propagation//停掉当前对象事件冒泡到别处;
4.2.3 :hover-start-time="2000" //延时事件执行；
4.2.4 :hover-stay-time='2000' //延时事件保留时长;
4.2.5
eg： <view class="box2" hover-class="box2_active">
<view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>

</view>
</view>
4.3 button组件;
4.3.1 行内属性：
size(按钮的大小)，
type(按钮的样式类型)，
plain(按钮是否镂空，背景色透明 )，
disabled(是否为可用按钮)，
loading(名称是否带 loading t图标)；
eg：
<button size='mini' type='primary'>前端</button>
<button size='mini' type='default' disabled='true'>前端</button>
<button size='mini' type='warn' loading='true'>前端</button>
4.4 媒体组件：image;
4.4.1 行内属性：src(图片资源地址 )，mode(图片裁剪、缩放的模式)
<image>` 组件默认宽度 300px、高度 225px；
4.4.2
eg：
<image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFit"></image>
//aspectFit是保留长边，也就是图片完全显示；
aspectFill为显示原有整体比例,会被截取；
4.5 uni-app中的样式；
4.5.1 rpx的使用（响应式单位）;
一种根据屏幕宽度自适应的动态单位；
eg：.box1{
width: 375rpx;
height: 375rpx;
background: #0000ff;
font-size: 30rpx;
color: #fff;
}
4.5.2 @import的使用;
先创建一个css文件，再在vue文件中的style中引入；
eg：@import url(a.css);
4.5.3 uni-app的一些默认点；
网页中的page就相当于html的body；
支持基本常用的选择器class、id、element等；
全局，局部样式：定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器；
4.5.4 导入图标;
4.5.4.1 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
必须将iconfont.css中的引用路径都改成以~@开头的绝对路径;
然后再在App.vue中引入@import url("./static/fonts/iconfont.css");
然后再在作用域中使用eg：<view class="iconfont icon-tupian"></view>
4.5.6 结合scss，less的使用；
5.~~~ uni-app数据绑定;
在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可；
用法就是跟vue语法相同;
5.1 插值表达式；
eg：
export default {
data () {
return {
msg: 'hello-uni'
}
}
}
使用：<view>{{msg}}</view>
5.2 v-bind语法；
eg：先在data中定义img为一张图片的路径；
<image v-bind:src="img"></image>
或者：<image :src="img"></image>
5.3 v-for语法；
标识符：key;
v-for="(item,index) in arr"
5.4 事件；
跟vue一样的写法;
5.4.1 有传参时候;
则当前的事件对象的在传参中写出；
eg：<button @click="tapHandle(1,$event)">点我啊</button>
tapHandle (num,e) {
console.log(num,e)
}
5.4.2 无传参时候;
默认就自带一个参数，就是事件对象；
eg：
<button @click="tapHandle">点我啊</button>
tapHandle (e) {
console.log(e)
}
6.~~~ uni的生命周期;
生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
6.1 应用的生命周期函数；
//因为是应用的，即全局的,所以写于App.vue文件中;（四个）
onLaunch: function() {//初始化完成时触发（全局只触发一次）
console.log('App Launch')
},
onShow: function() {//启动，或从后台进入前台显示
console.log('App Show')
},
onHide: function() {//从前台进入后台
console.log('App Hide')
},
onError:function(err){//报错时触发
console.log("出错了",err)
}
6.2 页面的生命周期函数；
//常用的共有5个,可写于每个vue文件当中;
onLoad(options) {
//监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
console.log("页面加载了;",options)
},
onShow() {
//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
console.log("页面显示了")
},
onReady(){
//监听页面初次渲染完成
console.log('页面初次渲染完成')
},
onHide(){
//监听页面隐藏
console.log('页面隐藏了')
},
onUnload(){};//暂时不用;用于监听页面卸载；
6.2.1 监听下拉刷新页面生命周期函数;
onPullDownRefresh(){};
6.2.2 关闭下拉刷新动画;
uni.stopPullDownRefresh()
6.2.3 调用下拉刷新功能；
uni.startPullDownRefresh()；
6.2.4 监听上拉拉刷新页面生命周期函数;
onReachBottom(){console.log('触底了')};
//通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px
7.~~~#### 网络请求;
对于服务器的配置还不是很熟悉;
7.1 **发送get请求**
uni.request({});
主要配置到的两个属性;
url: 'http://localhost:8082/api/getlunbo',//这个得先在本地开启服务器;
success(res){console.log(res)}//成功回调函数;
8.~~~ 数据缓存
**发送post请求**
将数据临时存储到本地，而不是数据库中;
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
8.1 set,get,remove;
8.1.1
uni.setStorage({});//将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
eg：
uni.setStorage({
key: 'id',
data: 100,
success () {
console.log('存储成功')
}
})
8.1.2 uni.setStorageSync({});//将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
eg：uni.setStorageSync('id',100)
8.1.3
uni.getStorage({});//从本地缓存中异步获取指定 key 对应的内容。
eg:
uni.getStorage({
key: 'id',
success: res=>{
console.log('获取成功',res,res.data)
this.id = res.data
}
})
8.1.4 uni.getStorageSync({});//从本地缓存中同步获取指定 key 对应的内容。
eg:
getStorage () {
const id = uni.getStorageSync('id')
console.log(id)
}
8.1.5
uni.removeStorage({});//从本地缓存中异步移除指定 key。
eg:
uni.removeStorage({
key: 'id', success: function () {
console.log('删除成功')
}
})
8.1.6 uni.removeStorageSync({});
//从本地缓存中同步移除指定 key。
eg：
removeStorage () { uni.removeStorageSync('id')
}
9.~~~ 上传图片，且预览;
9.1 选择图片：
uni.chooseImage({})；
eg：
uni.chooseImage({
count:5,//限制上传数目
success:(res)=>{//成功回调函数;
console.log(res)
this.imgArr = res.tempFilePaths//将图片链接数组带回本地数据;
}
})
9.2 预览图片：
uni.previewImage({}）
eg：
previewImg(current){
uni.previewImage({
urls: this.imgArr,//图片链接数组;
current//指定预览图片链接；
})
}
10.~~~ 条件注释实现跨端兼容;
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
即各色各样的平台，各色各样的画面;
10.1
**写法：**以 #ifdef 加平台标识开头，以 #endif 结尾。
10.1.1 eg：网页元素：

<view>
h5页面会显示
</view>


<view>
微信小程序会显示
</view>

10.1.2 eg：api、js代码中元素：
onLoad () {
//#ifdef MP-WEIXIN
console.log('微信小程序')
//#endif
//#ifdef H5
console.log('h5页面')
//#endif
}
10.1.3 eg：样式的条件注释
```css```
/* #ifdef H5 */
view{
height: 100px;
line-height: 100px;
background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
height: 100px;
line-height: 100px;
background: green;
}
/* #endif */
11.~~~ uni中的导航跳转;
11.1 声明式导航；
写法：
navigator标签，且里面要写好url属性和值，然后如果要跳转到tab页面的话，还得加个open-type="switchTab"；
//open-type还有其他属性值de 用法;
11.2 编程式导航：
调用api方法;
写法：
直接跳转
uni.navigateTo({
url:"/pages/detail/detail"
})
销毁其他非tab页面；
uni.switchTab({//跳转到tab页得这样写；
url: '/pages/message/message'
})
11.3 传参；
11.3.1 调用onLoad(){}//加载完成生命周期函数;
在定义跳转方向中的vue文件中定义：goAbout () {
uni.navigateTo({
url: '/pages/about/about?id=80',
});
}
在被跳转到的vue文件中写onLoad生命周期函数：
eg：onLoad (options) {
console.log(options)
}//输出传过来的参数对象;
12.~~~ uni-app中组件的创建;
12.1 创建和使用，还有生命周期函数这些，都和vue里的组件使用差不多;
13.~~~ 组件通讯;
13.1 父传子；
直接在组件标签中定义动态绑定属性，然后再在组件中的props配置项中接收,然后以接收的名字来使用;
eg：
<test :msg="msg"></test>
-----------------------------------
<script>
export default {
props: ['msg']
}
</script>
-------------------------------
<view>
这是一个自定义组件 {{msg}}
</view>
13.2 子传父；
用到自定义事件，$emit;
现在子组件设置方法触发this.$emit方法，来回调父组件中的自定义事件，且传值；然后在自定义事件所触发的方法里面操作子传父数据；
eg：
子：这是一个自定义组件<button type="primary" @click="sendMsg">给父组件传值</button>
方法：
sendMsg () {
this.$emit('myEvent',this.status)
}
父：
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
methods: {
getMsg (res) {
console.log(res)
}
},
13.3 兄弟组件之间传值;
13.3.1 在被修改数据的组件中先定义好一个自定义事件;
eg：
created(){//写于生命周期当中;
uni.$on("updateNum",num =>{this.num+=num})
}
13.3.2 在触发组件当中来触发此事件：
addNum(){
uni.$emit("updateNum",10);//且传参数;
}
就类似vue的全局总线用法;
14.~~~ uni-ui 的使用;
14.1 先去插件库中下载到hbuildx里面,然后再结合操作文档来写；
15.~~~ 项目实战，即实操;
15.1 获取轮播图的数据；
15.2 对uni.request进行二次封装，就像封装axios一样;用到了promise,async,await; 具体看代码;
eg：
const BASE_URL = 'http://localhost:8082'
export const myRequest = (options) => {
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + options.url,
method: options.method || 'GET',
data: options.data || {},
success: (res) => {
if (res.data.status !== 0) {
return uni.showToast({
title: '获取数据失败'
})
}
resolve(res)
},
fail: (err) => {
uni.showToast({
title: '请求接口失败'
})
reject(err)
}
})
})
}
15.3 uni轮播图的制作;
15.3.1 用到了swiper标签，及其属性;
15.4 导航栏的基本制作;
15.4.1 用到了小图标
~@/static/font//修改iconfont.css里面的路径;
15.5 完成商品推荐列表和导航栏；
15.6下拉刷新，上拉加载更多；
15.7 地图标签的使用;
15.8 scroll-view标签，可滚动的区域;
15.9 vue中过滤器配置项的使用，即格式化时间格式;
filters:{
formatDate(date){
const nDate = new Date(date)
const year = nDate.getFullYear()
const month = nDate.getMonth().toString().padStart(2,0)
const day = nDate.getDay().toString().padStart(2,0)
return year +"-"+ month +"-"+ day
}
}
15.10 $emit.$on的使用;
15.11 onLoad(options){}//options就是从另一个页面过来的形参;
15.12 rich-text富文本标签的使用;//能够解析里面HTML结构的代码;
15.13 uni-goods-nav组件的使用；
15.14
16.~~~ 进行打包处理：
16.1 小程序打包；
静态资源换成线上资源
16.2 进行上传给微信团队审核
16.3 h5打包；
16.4 安卓打包；
17.~~~

来源：https://www.cnblogs.com/ycheibi/p/16538922.html