当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 荐 uniapp[精通之作]

荐 uniapp[精通之作]

2020年07月07日  | 移动技术网IT编程  | 我要评论

第一部分: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 编译到不同的工程后二次修改，会让后续的升级变的麻烦
条件编译：

写法 ：
   开头：<!-- #ifdef  XX平台的表示-->   
   结尾：<!-- #endif  -->

在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.使用组件

<test></test>

组件的生命:

beforeCreate 在实例初始化之后被调用。详见

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

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

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

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

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

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

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

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

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

							父组件

在这里插入图片描述

				    	子组件

在这里插入图片描述

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

							子组件

在这里插入图片描述

						  父组件

在这里插入图片描述
兄弟组件之间的传值

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

在这里插入图片描述

							渲染页面

在这里插入图片描述

本文地址：https://blog.csdn.net/motility_scy/article/details/107143007

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网