基础知识储备

资源路径说明

  • template内引入静态资源,如image、video等标签的src属性时,可以使用相对路径或者绝对路径
<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
  • js文件或script标签内(包括renderjs等)引入js文件时,可以使用相对路径和绝对路径。js文件不支持使用/开头的方式引入
// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
  • css文件或style标签内引入css文件时(scss、less文件同理),可以使用相对路径和绝对路径。
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
  • css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径,需要注意的是,有些小程序端css文件不允许引用本地文件
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

生命周期

应用生命周期

函数名 说明
onLaunch 当uni-app 初始化完成时触发(全局只触发一次)
onShow 当 uni-app 启动,或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onError 当 uni-app 报错时触发

页面生命周期

函数名 说明
onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)
onShow 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化
onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新
onReachBottom 页面上拉触底事件的处理函数
onTabItemTap 点击 tab 时触发,参数为Object
onShareAppMessage 用户点击右上角分享
onPageScroll 监听页面滚动,参数为Object
onNavigationBarButtonTap 监听原生标题栏按钮点击事件,参数为Object
onBackPress 监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack
onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmeds 监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发
onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件

Vue生命周期

函数名 说明
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

路由

uni-app路由统一有框架管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。

路由跳转

uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转

页面栈

路由方式 页面栈表现 触发时机
初始化 新页面入栈 uni-app 打开的第一个页面
打开新页面 新页面入栈 调用 API uni.navigateTo 、使用组件 <navigator open-type=”navigate”/>
页面重定向 当前页面出栈,新页面入栈 调用 API uni.redirectTo 、使用组件 <navigator open-type=”redirectTo”/>
页面返回 页面不断出栈,直到目标返回页 调用 API uni.navigateBack 、使用组件 <navigator open-type=”navigateBack”/> 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换 页面全部出栈,只留下新的 Tab 页面 调用 API uni.switchTab 、使用组件 <navigator open-type=”switchTab”/> 、用户切换 Tab
重加载 页面全部出栈,只留下新的页面 调用 API uni.reLaunch 、使用组件 <navigator open-type=”reLaunch”/>

运行环境判断

// uEnvDev
if (process.env.NODE_ENV === 'development') {
    // TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
    // TODO
}

页面样式与布局

单位

px为屏幕像素,rpx响应式px,它们之间的换算公式为750 * 元素在设计稿中的宽度 / 设计稿基准宽度

样式导入

<style>
    @import "../../common/uni.css";
    .uni-card {
        box-shadow: none;
    }
</style>

flex布局

<style>
/*主要有两个概念 容器与项目*/
 .container{
    display: flex; 
    flex-direction:row;
    flex-wrap:nowrap;
    flex-flow: row nowrap;/*简写方式*/
    justify-content: center;/*定义项目在主轴上的对齐方式*/
    align-items:center;/*定义项目在交叉轴上如何对齐*/
}
.item {
  order: 1;
  flex-grow:0;/*定义项目的放大比例*/
  flex-shrink:1;/*定义了项目的缩小比例*/
  align-self:auto;/*单个项目有与其他项目不一样的对齐方式*/
}
</style>

定义全局变量

  • 共用模块
  • Vue.prototype
  • globalData
  • Vuex

参考文章 uni-app全局变量的几种实现方式

class与style绑定

支持数组合对象的方式

计算属性

计算属性是基于它们的响应式依赖进行缓存的

条件渲染

v-if v-show

列表渲染

v-for 注意携带key

事件处理

// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap', //推荐使用longpress代替
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

表单控件绑定

推荐使用uni-app的表单组件

组件分为全局组件和局部组件

都存在类似的操作,即导入,注册,使用

常见问题

1、如何获取上个页面传递的数据
onLoad(args)
2、如何设置全局的数据和全局的方法
vuex(uni-app已经内置了vuex)

uni-app自带统计平台,只要稍作配制就可以使用

uni统计官网地址:tongji.dcloud.net.cn/

本作品采用《CC 协议》,转载必须注明作者和本文链接

趁还没掉光,赶紧给每根头发起个名字吧~

zs4336
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!