前端必备之UNiApp学习

目录结构

 App.vue是根组件 

 

 

 UNiAPP的开发规范：

全局配置：

onReachBottomDistance: 设置上拉触底事件时距离底部的距离。

  其他页面的配置：

tabbar的配置

 

 详细参数设置：

当新建页面时一定要将页面的路径配置到：pages.json的tabBar中

 tabBar:配置

使用condition配置启动模式

 

基本组件的使用：

<text>

<view>

 

<butten>

<image>

可以使用mode属性对图片的缩减和裁剪进行修改

UNI-app的样式

rpx  这个单位 可做自适应放缩 

@import 导入外部样式

page  相当于 body节点

  定义在App.vue中的样式是全局样式，作用于每一个页面。在Pages目录下的vue文件中定义的样式为局部样式，只作用于对应的页面，并覆盖App.vue中相同的选择器。

uni-app支持使用字体图标， 

 基本的数据绑定：

与在vue 中一致

 v-bind动态数据绑定：

v-for

uni中的事件：

 使用v-on：click  触发事件

 uni的生命周期：

应用的生命周期：

 页面的生命周期函数：

组件的生命周期：

页面的刷新 与停止

 

 点击按钮刷新：

 上滑刷新：

  网络请求：

 

使用异步数据缓存：

 存放数据：

使用uni.setStrage(）

 获取存放数据：

使用uni.getStorage()

移除缓存：

使用同步存储数据：

同步存放数据：

uni.setStorageSync（）

  

 获取数据：

uni.getStorageSync()

 删除数据：

 

 上传图片：

 点击预览

条件注释实现跨域兼容

使用 #ifdef   表示    #endif    进行使用

   

标识:

 

 

 导航跳转：

 如果跳转至 tabbar 页面 就要设置 open-type 属性为 switchTab

编程式路由跳转：

组件间的导入：

 组件的生命周期函数

 组件间的通讯：

父组件给子组件传值：

传的时候 通过 属性绑定的方式  子组件接收的时候 通过 props进行接受

 子组件接收：

子组件向父组件传值：

子组件向父组件传值是用触发事件进行传值：

使用 $emit 触发事件进行传递  在子组中使用  this.$emit(‘myEven’,this.num)

 然后在父组件中触发自定义事件

 在父组件中注册一个自定义事件

 

 然后通过函数的形参进行接收

兄弟组件间的数据传递：

 

软件安卓打包：

在maifest.json中配置 

 对配置进行编写

 APP 图标配置：就是在安装时 手机桌面显示的图标

 APP 启动图配置：即为 手机进入APP加载后的 图片。

APPSDK配置 ：使用了哪些就勾选哪些。

App 权限配置：使用了哪些就用哪些。

完成上述配置后 点击发行：

点击App 云打包。