IdbI

uniApp-微信小程序笔记

逻辑层

  • 增加  App  和  Page  方法，进行程序注册和页面注册。
  • 增加  getApp  和  getCurrentPages  方法，分别用来获取  App  实例和当前页面栈。
  • 提供丰富的  API，如微信用户数据，扫一扫，支付等微信特有能力。
  • 提供模块化能力，每个页面有独立的作用域。

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过  getApp  方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在  App  上的函数

  • 构造器

    • App({ behaviors: [] }) — behaviors 可以用来让多个页面有相同的数据字段和方法
    • Const behavior = Behavior({})
    • Page({})
    • Component({})—方法需要放在  methods: { }

应用生命周期

  • onLaunch 小程序初始化完成时触发，全局只触发一次
  • onShow 小程序启动，或从后台进入前台显示时触发
  • onHide 小程序从前台进入后台时触发
  • onError 小程序发生脚本错误或 API 调用报错时触发
  • onPageNotFound 小程序要打开的页面不存在时触发
  • onUnhandledRejection()小程序有未处理的 Promise 拒绝时触发
  • onThemeChange 系统切换主题时触发

页面生命周期

  • onLoad 监听页面加载
  • onShow 监听页面显示
  • onReady 监听页面初次渲染完成
  • onHide 监听页面隐藏
  • onUnload 监听页面卸载

组件生命周期

  • created 在组件实例刚刚被创建时执行
  • attached 在组件实例进入页面节点树时执行
  • ready 在组件在视图层布局完成后执行
  • moved 在组件实例被移动到节点树另一个位置时执行
  • detached 在组件实例被从页面节点树移除时执行
  • error 每当组件方法抛出错误时执行

页面路由 | 微信开放文档 (qq.com) 在小程序中所有页面的路由全部由框架进行管理。

  • getCurrentPages()  函数获取当前页面栈
  • navigateTo, redirectTo  只能打开非 tabBar 页面。
  • switchTab  只能打开 tabBar 页面。
  • reLaunch  可以打开任意页面。
  • 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的 onLoad 中获取

视图层

  • 模板 FirstName: {{firstName}}, LastName: {{lastName}}

  • 空标签
  • wxss
    • Rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素
    • 样式导入 使用@import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束（@import "common.wxss";）
  • 事件系统 除  bind  外，也可以用  catch  来绑定事件。与  bind  不同， catch  会阻止事件向上冒泡 可以采用 capture-bind、capture-catch 关键字，后者将中断捕获阶段和取消冒泡阶段

css

  • rpx

页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明：

若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 _ 100 / 750，结果为：100rpx。 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 _ 100 / 640，结果为：117rpx。 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。

uni-app 中不能使用 * 选择器

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

  • 固定值 NavigationBar：44px TabBar：50px

  • 背景图片 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用

多端条件编译

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾

  • #ifdef：if defined 仅在某平台存在
  • #ifndef：if not defined 除了某平台均存在
  • %PLATFORM%：平台名称

API

https://uniapp.dcloud.net.cn/api/

  • uni.request 发起网络请求

  • uni.uploadFile 上传文件

  • uni.downloadFile 下载文件

  • uni.getStorage 获取本地数据缓存

  • uni.getStorageSync 获取本地数据缓存 uni.setStorage 设置本地数据缓存 uni.setStorageSync 设置本地数据缓存 uni.getStorageInfo 获取本地缓存的相关信息 uni.getStorageInfoSync 获取本地缓存的相关信息 uni.removeStorage 删除本地缓存内容 uni.removeStorageSync 删除本地缓存内容 uni.clearStorage 清理本地数据缓存 uni.clearStorageSync 清理本地数据缓存

uni.setTabBarItem 动态设置 tabBar 某一项的内容 uni.setTabBarStyle 动态设置 tabBar 的整体样式 uni.hideTabBar 隐藏 tabBar uni.showTabBar 显示 tabBar uni.setTabBarBadge 为 tabBar 某一项的右上角添加文本 uni.removeTabBarBadge 移除 tabBar 某一项右上角的文本 uni.showTabBarRedDot 显示 tabBar 某一项的右上角的红点 uni.hideTabBarRedDot 隐藏 tabBar 某一项的右上角的红点

uni.pageScrollTo 将页面滚动到目标位置。

onPullDownRefresh 监听该页面用户下拉刷新事件 uni.startPullDownRefresh 开始下拉刷新 uni.stopPullDownRefresh 停止当前页面下拉刷新

uni.navigateTo 保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack 可以返回到原页面 uni.redirectTo 关闭当前页面，跳转到应用内的某个页面 uni.reLaunch 关闭所有页面，打开到应用内的某个页面 uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 uni.navigateBack 关闭当前页面，返回上一页面或多级页面

返回上级