uniapp[精通之作]

一时失言乱红尘 2023-02-23 05:22 103阅读 0赞

## 第一部分:uniapp，项目目录介绍 ##

1-pages存放整个uniapp所有的页面\[页面级的标题会覆盖全局的标题！！\]  
2-static存放所有的静态资源（比如：字体图标，图片，视频等）  
3-unpackage存放打包输出文件  
4-APP.vue项目根组件【调用应用的生命周期函数】  
5-main.js项目的入口函数【项目首先加载】  
6-mainifest.json配置应用打包所需的东西  
7-page.json设置整个项目的存放路径和窗口外观  
pages第一个path是项目的启动页面  
独有的样式可以在某个页面的path路径下面进行新的style\[样式\]  
8-uni.scss常用样式变量

**注意点：调用小程序的API接口 前缀是uni 为了兼容多端运行，建议使用flex布局**

## 第二部分：项目的全局配置 ##

globalStyle\[项目全局配置\]  
“navigationBarBackgroundColor” 导航栏背景色  
“navigationBarTextStyle” 导航栏标题颜色  
“navigationBarTitleText” 标题名称  
enablePullDownRefresh 是否支持下拉 false/true  
backgroundTextStyle 下拉等待的样式 dark/light

**注意点： 如果应用是一个多tab应用，可以通过tabbar配置指定的tab栏表现  
tab和globalStyle和pages是同级别的  
1：如果在uniapp中的tabbar是顶部tabbar则不会再有图标  
2：最少2个 最多五个tabbar**  
**condition启动模式配置：**  
仅开发期间生效，用于模拟直达页面的的场景  
**current索引值**  
list此数组里包含 name path query(给页面传递参数ID)

**组件的基本使用**  
text文本组件  
view视图容器组件  
表单组件  
button checkbox editor form input label picker picker-view radio sllder swic  
image组件

## 第三部分:uniapp的样式 ##

1、rpx响应式单位 也就是屏幕自适应的动态单位  
750rpx为一个整屏  
2 、@import 可以导入外联样式表的相对路径 用 ; 来结束  
3 、支持class id element等选择器 但是不支持通配符 \* 选择器  
4 、page相当于body  
5 、定义在APP.vue中的样式是全局样式\[公共CSS可以放在这里\]，定义在pages中的样式是局部样式\[会覆盖全局样式\]  
6 、uni中可以使用字体图标  
如果小于40KB自动转换为base64格式 如果大于等于40KB则需要自行转换，否则不生效  
**第一步**：全局导入：APP .vue  
**第二步**：字体图标的引用路径以 ~@ 开头的绝对路径【字体图标的CSS样式表中进行修改】  
**第三步**：需要导入的页面进行导入

**less和scss的使用【安装插件后就可以使用】lang=“scss” lang="less"**

v:if和v:bind

动态数据绑定  
**v:bind** \[如果不进行绑定的话，有的一些地址会变成字符串\]  
循环遍历数据  
**v:for** v:for="(item,index) in arr" item数组的每一项 index 索引\[序号\]  
id是每一个数组的唯一值，在进行循环遍历的时候在最后面添加 v-bin:key="id"或者 :key=“id”

**如何注册事件和传递参数以及获取到事件对象**  
注册事件 v-on（简写@）: 传递参数给予绑定的事件一个（参数），methods中进行接收  
v-on:click=“clickHandle(20)” clickHandle(num)\{console.log(num)\}  
如果也想把事件对象传递过来，需要在事件绑定后面加上$event 然后进行输出

## 第四部分: uniapp的生命周期 ##

**应用的生命周期（data同级）**

onLaunch 初始化完成触发（全局一次）  
onShow 启动或从后台进入前台  
onHide 从前台进入后台  
onError 报错时触发

**页面的生命周期（data同级）**

onLoad 监听页面加载 参数是上个页面传递的数据 参数类型OBJ（不会多次触发）利用options接收  
onShow 监听页面显示 每次出现都触发 包括下级页面的点击返回当前页面  
onReady 监听页面的初次渲染（不会多次触发）  
inHide 监听页面隐藏  
onPullDownRefresh 监听用户的下拉动作 一般用于下拉刷新  
【可以通过配置文件和API两种方式进行下拉刷新】  
onReachBottom 页面滚动到底部事件 用于下拉下一页数据

**如何发送get请求？**  
发送get请求 \[小程序发送请求需要提前设置白名单\]  
uni.request(OBJ) 参数详见 API-网络-文档

## 第五部分：数据缓存 ##

数据缓存 【methods中】  
uni.setStorage\[异步\] 将数据存储在本地缓存中指定的key中，会覆盖原来的对应内容  
**参数：** key 本地缓存中指定的key data 需要存储的内容(原生类型，JSON序列化的对象)  
success 成功的回调函数 fail 失败的回调函数  
complete 接口调用结束的回调函数  
uni.setStorageSync\[同步\]  
**获取数据**  
uni.getStorage\[异步\] 从本地缓存中异步获取指定的key内容  
**移除数据**  
uni.removeStorage 移除本地存储的key的内容

--------------------

**上传图片和预览图片功能（上传图片时使用箭头函数更好）箭头函数的this指向比较明确**  
uni.chooselmage(OBJ)  
从本地相册选择图片和使用相机拍照  
另外选择和上传非图片，视频文件参考文档  
APP端如果需要更丰富的拍照API 参考文档  
**参数名**:  
success 类型 fuction 成功返回图片的本地文件路径和tempFilePaths  
count 类型 number **限制上传图片数量，但是H5不能进行设置**

methods:{
    	chooseImg (){
    	    uni.chooseImage({
    	        count:5,
    	           success:res=> {
    		console.log('上传成功',res)
    		    this.imgArr = res.tempFilePaths
             }
          })
        }
      }
    }

**uni.previewlmage(obj) 预览照片**  
参数： current urls预览图片链接  
urls保存图片的地址 current也是必填项

--------------------

## 第六部分：跨端兼容的问题 ##

**跨端兼容的问题：**  
1 大量写 if else 会造成代码执行的性能低下和管理的混乱  
2 编译到不同的工程后二次修改，会让后续的升级变的麻烦  
条件编译：

写法 ：
       开头：   
       结尾：

在style html script 中都可以进行条件编译

--------------------

## 第七部分：uni中的导航跳转 ##

**1.利用navigator进行跳转**（声明式导航，属于组件，利用组件）  
open-type有效值详细看文档  
open-type中 有一个值是open-type=“redirect” 这个跳转后会关闭上一个网页  
navigator直接进行跳转还可以返回到上一个页面  
属性：（详情看文档）  
url String 应用之内的跳转链接，值为相对路径或者绝对路径 不需要加 .VUE的后缀  
**2.编程式导航 （属于方法 API）**  
不同的页面要使用不同的API 比如带有tabr的页面 信息页 等  
1 uni.navigateTo 跳转到某一个页面 保留当前页

2 uni.redirectTo 跳转到某一个页面 关闭当前页

3 uni.reLaunch 跳转到某一个页面 关闭所有页面

uni.switchTab 跳转到tabBar页面 关闭非tabBar页面

uni.navigateBack 关闭当前页面 返回上一级或多级页面 可通过

getCurrentPages() 获取当前的页面栈，决定需要返回几层。

跳转页面传参 1 2 3这三种支持

需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，  
**path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数 options进行接收**

--------------------

## 第八部分：组件的创建 ##

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，  
其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

**1.在其他组件中导入该组件并注册：**  
import 组件名 from “…/…/components/组件名/组件名.vue”  
**2.注册组件**  
components: \{test\}  
**3.使用组件**

**组件的生命:**

**beforeCreate** 在实例初始化之后被调用。[详见][Link 1]

**created** 在实例创建完成后被立即调用。[详见][Link 2] \[比较实用：数据 方法都可以拿到（数据的初始化）\]

**beforeMount** 在挂载开始之前被调用。[详见][Link 3] \[操作DOM可以在这里\]

**mounted** 挂载到实例上去之后调用。[详见][Link 4] 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用`$nextTick`[Vue官方文档][Vue]

**beforeUpdate** 数据更新时调用，发生在虚拟 DOM 打补丁之前。[详见][Link 5] 仅H5平台支持

**updated** 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。[详见][Link 6] 仅H5平台支持

**beforeDestroy** 实例销毁之前调用。在这一步，实例仍然完全可用。[详见][Link 7]

**destroyed** Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。[详见][Link 8]

--------------------

## 第九部分：组件之间的通讯方式 ##

**父组件给子组件传值：通过属性绑定的方式进行传递  
子组件接收父组件传值：通过props进行接收**

父组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center]

子组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 1]

**子组件向父组件进行传值 通过$emit触发事件进行传递参数**

子组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 2]

父组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 3]  
**兄弟组件之间的传值**

兄弟组件之间的传值   A向B传 所以在A中绑定了事件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 4]

渲染页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 5]

[Link 1]: https://cn.vuejs.org/v2/api/#beforeCreate
[Link 2]: https://cn.vuejs.org/v2/api/#created
[Link 3]: https://cn.vuejs.org/v2/api/#beforeMount
[Link 4]: https://cn.vuejs.org/v2/api/#mounted
[Vue]: https://cn.vuejs.org/v2/api/#Vue-nextTick
[Link 5]: https://cn.vuejs.org/v2/api/#beforeUpdate
[Link 6]: https://cn.vuejs.org/v2/api/#updated
[Link 7]: https://cn.vuejs.org/v2/api/#beforeDestroy
[Link 8]: https://cn.vuejs.org/v2/api/#destroyed
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200705191021784.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200705191047269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200705191156587.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200705191226747.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20200705191355686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20200705191424548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ==,size_16,color_FFFFFF,t_70#pic_center