1 uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

1.1 创建项目

安装HBuildX IDE，文件->新建->项目，然后选择uni-app项目即可

要打包小程序或APP等需要安装相应的开发者工具，不多介绍，百度即可

1.2 项目目录

image-20201029102849458

1.3 pages.json

pages字段下配置页面，第一项为启动页

  • path：页面文件路径
  • style：配置页面窗口表现

globalStyle配置全局标题样式（page中的样式优先于全局）

参考官网介绍

image-20201029104548375

tabBar指定 tab 栏的表现

  • list：数组，tab 的列表，详见 list 属性说明，最少2个、最多5个 tab

样式等设置见文档

condition直达模式（仅用于开发模式）

相当于微信开发工具中的自定义编译模式

image-20201029110421486

1.4 uni-app生命周期

应用生命周期

image-20201029110636733

应用生命周期仅可在App.vue中监听，在其它页面监听无效。

页面生命周期

image-20201029110841260

2 模板语法

Vue的语法，在此不赘述

3 uni-app组件

3.1 基础组件

view：相当于HTML中的div

scroll-view：无限滚动组件

swiper：滑块视图容器，比如轮播图

3.2 表单组件

官网文档，表单组件

3.3 导航与传参

navigator，进行页面跳转

属性名 类型 默认值 说明
url String 应用内的跳转链接，值为相对路径或绝对路径，如：”../first/first”，”/pages/first/first”，注意不能加 .vue 后缀
open-type String navigate 跳转方式
delta Number 当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
animation-type String pop-in/out 当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画
animation-duration Number 300 当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。
hover-class String navigator-hover 指定点击时的样式类，当hover-class=”none”时，没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态
hover-start-time Number 50 按住后多久出现点击态，单位毫秒
hover-stay-time Number 600 手指松开后点击态保留时间，单位毫秒
target String self 在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram

open-type：

  • navigate：保留当前页面，跳转页面
  • redirect：关闭当前页面，跳转页面
  • switchTab：跳转到tabBar页面
  • reLaunch：关闭所有页面，打开目标
  • navigateBack：返回上层
  • exit：退出小程序，target=”miniProgram”时生效

传参

通过url中的request.query方法传递参数（switchTab无法使用）

4 API

4.1 网络

uni.request()，发送http请求，接收一个对象参数，包括url，请求方式，发送的数据，成功的响应等

示例

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

4.2 页面跳转与路由

与navigator组件中的每个mode功能对应，也就是说，有两种方法可以实现路由跳转（使用navigator组件和触发事件）

  • uni.navigateTo
  • uni.redirectTo
  • uni.reLaunch
  • uni.switchTab
  • uni.navigateBack
  • uni.preloadPage

4.3 数据缓存

带有sync的是同步接口，接收键值对；异步接口接收的是Object，除了键值之外还包括成功的回调函数，失败的回调函数，调用结束的回调函数

  • uni.setStorage（设置缓存）
  • uni.setStorageSync
  • uni.getStorage（读取缓存）
  • uni.getStorageSync
  • uni.getStorageInfo（获取所有的缓存）
  • uni.getStorageInfoSync
  • uni.removeStorage（移除某个缓存）
  • uni.removeStorageSync
  • uni.clearStorage（清除所有缓存）
  • uni.clearStorageSync

4.4 媒体相关

图片

属性说明

示例代码

readImage() {
    uni.chooseImage({
        success(res) {
            uni.getImageInfo({
                src: res.tempFilePaths[0],
                success(img) {
                    console.log(img.width, img.height);
                }
            })
        }
    })
}

代码中使用了两个api组合，选择图片和获取图片信息，选择图片成功返回的结果是两个数组，本地文件路径列表和本地文件列表，每一项是一个File

点击选择图片，选中图片点击确认

image-20201029165836222

然后就可以看到宽高信息

image-20201029165931894

赏

前端小白