UniApp学习

uniapp官网文档

新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握

微信小程序开发基础介绍篇-零基础快速入门

• view标签

• rpx响应式单位 (750rpx占满整个宽度)

• 、、、

• 、white-space:nowrap 可以让块级元素里的行内块元素不换行

• 、（有默认宽高320px*240px）

• uview（uView UI,是uni-app生态最优秀的UI框架）、TMUI、TuniaoUI

• 、 、

  、、等表单组件

• 用于跳转在pages.json中注册的本地页面

• tabBar配置

• vue2语法

• 配色网站colordrop.io

• App.vue生命周期（o’nLaunch、onShow、onHide）、onLoad、vue生命周期函数

• 路由页面跳转api：

  • uni.navigateTo
    • 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面；
    • 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。
  • uni.redirectTo
    • 关闭当前页面，跳转到应用内的某个页面。
    • 需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。
  • uni.reLaunch
    • 关闭所有页面，打开到应用内的某个页面（可以到tabBar的页面路径）。
    • 需要跳转的应用内页面路径 , 路径后可以带参数。
  • uni.switchTab
    • 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
    • 需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
  • uni.navigateBack
    • 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
    • delta参数表示：返回的页面数，如果 delta 大于现有页面数，则返回到首页。

• 路由参数

  • 在跳转页面路径后面使用?拼接参数名=参数值，不同参数使用&分隔，这样在h5可以使用$route获取到请求参数，但是在微信小程序中使用$route获取不到；可以使用onLoad(e){console.log(e);console.log(getCurrentPages());}这个生命周期函数，在h5和微信小程序中都可以正常获取到请求参数

• uni.showToast(OBJECT)（显示消息提示框）、uni.hideToast() （隐藏消息提示框）

• uni.showLoading(OBJECT)（显示 loading 提示框, 需主动调用 uni.hideLoading() 才能关闭提示框）、uni.hideLoading()（隐藏 loading 提示框）

• uni.showModal(OBJECT)（显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm）

• uni.showActionSheet(OBJECT)（从底部向上弹出操作菜单）

• uni.setNavigationBarTitle(OBJECT) （动态设置导航条中当前页面的标题）、

• uni.setNavigationBarColor(OBJECT)（设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖）

• uni.showNavigationBarLoading(OBJECT)（在当前页面显示导航条加载动画）、uni.hideNavigationBarLoading(OBJECT)（在当前页面隐藏导航条加载动画）

• tabBar配置iconfont字体图片使用（h5可以，但小程序不支持）

• uni.setTabBarItem(OBJECT)（动态设置 tabBar 某一项的内容）

• uni.setTabBarStyle(OBJECT)（动态设置 tabBar 的整体样式）

• uni.hideTabBar(OBJECT) （隐藏 tabBar）

• uni.showTabBar(OBJECT) （显示 tabBar）

• uni.setTabBarBadge(OBJECT) （为 tabBar 某一项的右上角添加文本）

• uni.removeTabBarBadge(OBJECT) （移除 tabBar 某一项右上角的文本）

• uni.showTabBarRedDot(OBJECT)（显示 tabBar 某一项的右上角的红点）

• uni.hideTabBarRedDot(OBJECT)（隐藏 tabBar 某一项的右上角的红点）

• uni.request(OBJECT)（发起网络请求）

  • 几个免费的接口：随机宠物狗图片、随机宠物猫图片、土味情话、英语评论