uniapp基础Api和插件安装

发表于 分类于 ， 阅读次数： Changyan： 本文字数： 1.9k 阅读时长 ≈ 2 分钟
uniapp基础Api和插件安装、生命周期

基础API

参考地址：https://uniapp.dcloud.net.cn/api/README

API列表

  • 网络请求

  • 上传、下载

  • 图片处理

  • 数据缓存 => https://uniapp.dcloud.net.cn/api/storage/storage?id=setstorage

    • uni.getStorage 异步获取本地数据缓存
    • uni.getStorageSync 同步获取本地数据缓存
    • uni.setStorage 异步设置本地数据缓存
    • uni.setStorageSync 同步设置本地数据缓存
    • uni.removeStorage 异步删除本地数据缓存
    • uni.reoveStorageSync 同步删除本地数据缓存

  • 交互反馈 => https://uniapp.dcloud.net.cn/api/ui/prompt?id=showtoast

    • uni.showToast 显示提示框
    • uni.showLoading 显示加载提示框
    • uni.hideToast 隐藏提示框
    • uni.hideLoading 隐藏加载提示框
    • uni.showModal 显示模态框
    • uni.showActionSheet 显示菜单列表

  • 路由

    • uni.navigateTo 保留当前页面，跳转到应用内某个界面，使用uni.navigateBack 返回原页面

    • uni.redirectTo 关闭当前界面，跳转到应用内的某个界面

    • uni.reLaunch 关闭所有界面，打开应用内的某个界面

    • uni.switchTab 跳转到tab Bar页面

页面布局相关

page

页面容器css属性

1
2
3
4
page:{
  height:100%;
  background-color:red;
}

尺寸单位

可使用单位：px rpx,upx, rem vh vw

外部样式文件引入

同vue使用相同

uniapp生命周期

参考地址：https://uniapp.dcloud.net.cn/collocation/frame/lifecycle?id=%e5%ba%94%e7%94%a8%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

应用生命周期

  • onLaunch 初始化完成时触发（全局🈯️触发一次）

  • onShow uni-app启动，或从后台进入前台显示

  • onHide 当uni-app 应用从前台进入后台

    只能在App.vue里面进行监听，在其他界面监听无效

页面生命周期

  • onLoad 监听页面加载（可获取上个界面传递的参数）
  • onShow 监听页面显示，每次出现在屏幕上都进行触发
  • onReady 监听页面初次渲染完成
  • onHide 监听页面隐藏
  • onUnload 监听页面卸载
  • onReachBottom 页面滚动到底部事件

组件生命周期

  • beofreCreate
  • created
  • boforeMount
  • mounted
  • boforeDestroy
  • destroyed

uniApp特色

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

语法

image-20210712225857698

取值

image-20210712230042343

条件编译支持的文件

  • .vue
  • .js
  • .css
  • pages.json
  • 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

​ 条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 <!-- 注释 -->；

插件安装

  1. ​ scss安装

    可以使用多种预编译处理器进行安装使用，以scss文件为例

    下载地址：https://ext.dcloud.net.cn/plugin?name=compile-node-sass

    image-20210716175247652