uniapp---参考文档

悦悦妍妍
206 阅读5分钟

参考链接 www.bilibili.com/video/BV1BJ…

写在前面：uni-app基于 微信小程序 + Vue语法 + 条件编译 打造而成

环境搭建

  • 安装编辑器HbuilderX (mac安装时选择application)
  • 安装微信开发者工具 (mac安装时选择application)
  • 利用HbuilderX初始化项目(点击HbuilderX菜单栏文件>项目>新建 选择uni-app)
  • 运行项目(运行到浏览器 或 运行到小程序模拟器)

注意： 如果是第一次使用，需要先配置小程序ide的相关路径并且需要在微信开发者工具的设置中安全设置，服务端口开启

介绍项目目录和文件作用

  • pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
  • manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
  • App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
  • main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
  • uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
  • unpackage 就是打包目录，在这里有各个平台的打包文件
  • pages 所有的页面存放目录
  • static 静态资源目录，例如图片等

注意: uni-app 约定了如下开发规范：

  1. 页面文件遵循 Vue 单文件组件 (SFC) 规范，uni-app中 [模板|事件绑定|指令|注册组件|传值] 同vue组件
  2. 组件标签靠近小程序规范，详见uni-app 组件规范
  3. 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
  4. 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
  5. 为兼容多端运行，建议使用flex布局进行开发

pages.json 全局配置和页面配置

  • 通过globalStyle进行全局配置, 用于设置应用的状态栏、导航条、标题、窗口背景色等
  • 通过pages来配置页面
  • 配置tabbar(tabbar对应的页面展示一次后就会保留在内存中,再次切换回，不会再次触发页面的钩子onLoad 和 onReady,但是会触发onShow钩子)
  • condition启动模式配置,用于模拟直达页面的场景,仅开发期间生效

组件的基本使用

  • text文本组件,类似html中的span
  • view 视图容器,类似html中的div
  • button按钮组件

uni-app中的样式

  • 单位：rpx 即响应式px
  • @import后跟需要导入的外联样式表的相对路径，用;表示语句结束
  • 在 uni-app 中不能使用 * 选择器。
  • page 替代 body 节点
  • 定义在 App.vue 中的样式为全局样式，在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面
  • 使用字体图标(注意:字体文件iconfont.css中的引用其他svg|ttf|woff等文件的路径url推荐改成以 ~@ 开头的绝对路径)

uni-app的生命周期

1.应用的生命周期(定义在App.vue)

  • onLaunch
  • onShow
  • onHide
  • onError

2.页面的生命周期

  • onLoad 监听页面加载，其参数为上个页面传递的路由数据，会自动转成参数对象
  • onShow
  • onReady
  • onHide
  • onUnload

下拉刷新（用户手指方法向下）

1.在uni-app中有两种方式开启下拉刷新

  • 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh：true
  • 通过调用uni.startPullDownRefresh方法来开启下拉刷新

2.监听下拉刷新

  • 通过onPullDownRefresh可以监听到下拉刷新的动作(和data同级的钩子函数)

3. 关闭下拉刷新

  • uni.stopPullDownRefresh()

上拉加载（用户手指方法向上）

  • 通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px
  • 通过onReachBottom钩子(和data同级的钩子函数)监听到触底的行为

网络请求

  • 在uni中可以调用uni.request方法进行请求网络请求
  • 注意：在小程序中网络相关的 API 在使用前需要配置域名白名单。(开发环境不需要配置)
  • 若小程序中发送请求没有成功，可以在微信开发工具里 详情->本地设置->勾选不校验合法域名

数据缓存(替代localstorage)

  • 异步存储 uni.setStorage
  • 同步存储 uni.setStorageSync
  • uni.getStorage uni.getStorageSync
  • uni.removeStorage uni.removeStorageSync

上传图片、预览图片

  • 上传图片 uni.chooseImage方法从本地相册选择图片或使用相机拍照。
  • 预览图片(方便左右滑动方式等预览图片) uni.previewImage

条件注释实现跨段兼容

  • 条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
  • template结构写法：开始<!-- #ifdef 平台标识 -->，以<!-- #endif -->结尾。
  • js写法 开始： //#ifdef 平台标识, 以// #endif 结尾
  • 样式 开始 ：/* #ifdef 平台标识 */ , 以/* #endif */结尾

uni中的导航跳转

1. 利用组件navigator进行跳转

  • 跳转非tabbar页面
<navigator url="/pages/about/about" hover-class="navigator-hover">
   跳转到非tabbar的某个页面
</navigator>
  • 跳转tabbar页面 open-type="switchTab"
<navigator url="/pages/about/about" hover-class="navigator-hover" open-type="switchTab">
   跳转到tabbar的某个页面
</navigator>

注意 open-type="redirect" 跳转到下个目标页，同时会销毁当前页面，离开的这个页面onUnload钩子会触发。

2. 编程式导航进行跳转

  • navigateTo非tabbar页面，当前页面不会卸载
  • switchTab跳转到tabbar页面，会关闭卸载所有的非tabbar页面
  • redirectTo关闭卸载当前页面，跳转到应用内的某个页面。

3. 传递参数和接收参数

  • 传递参数 url: '/pages/about/about?id=80&age=18'
  • 接收参数 onLoad钩子函数会接收上个页面的跳转参数
// 构造函数
onLoad (options) {
  // {id:80, age:18}
  console.log(options)
 }

uni-appx

在uni-appx + Vue3中npm方式使用[uview-plus] uview-plus.jiangruyi.com/components/…

avatar
文章
阅读
粉丝