uniapp入门基本使用

王摆摆
759 阅读6分钟

uniapp

基础组件

视图容器
组件名说明
view视图容器，类似于HTML中的div
scroll-view可滚动视图容器
swiper滑块视图容器，比如用于轮播banner
match-media屏幕动态适配组件，比如窄屏上不显示某些内容
movable-area可拖动区域
movable-view可移动的视图容器，在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中
cover-view可覆盖在原生组件的上的文本组件
cover-image可覆盖在原生组件的上的图片组件
基础内容
组件名说明
icon图标
text文字
rich-text富文本显示组件
progress进度条
表单组件
标签名说明
button按钮
checkbox多项选择器
editor富文本输入框
form表单
input输入框
label标签
picker弹出式列表选择器
picker-view窗体内嵌式列表选择器
radio单项选择器
slider滑动选择器
switch开关选择器
textarea多行文本输入框
路由与页面跳转
组件名说明
navigator页面链接。类似于HTML中的a标签
媒体组件
组件名说明
audio音频
camera相机
image图片
video视频
live-player直播播放
live-pusher实时音视频录制，也称直播推流
地图
组件名说明
map地图
画布
组件名说明
canvas画布
广告
组件名说明
ad广告组件
ad-draw沉浸视频流广告组件

页面属性配置

组件名说明
custom-tab-bar底部tabbar自定义组件
navigation-bar页面顶部导航
page-meta页面属性配置节点

配置

pages.json
pages

页面路径，默认第一个为首页组件路径

path组件路径

style样式：

navigationBarTitleText头部标题信息

navigationBarBackgroundColor头部标题背景颜色

tabBar

设置底部导航区域tab的表现

condition

启动模式配置

标签属性

hover-start-time=20点击后20ms触发

hover-class=""

阻止点击事件的冒泡（点击子元素，父元素也认为被点击）hover-stop-propagition

view标签类似于div

text标签类似于span

scroll-view可滚动视图区域。用于区域滚动。

navigator标签类似于a

路由跳转

路径跳转
<navigator url='/pages/index/index'></navigator>
编程导航
uni.navigateTo({
                    url:"../reportForm/reportForm",
                })
//跳转到导航页
uni.switchTab({
                    url:"../reportForm/reportForm",
                })
//跳转并关闭其他页面，没有返回按钮
uni.redirectTo({
                    url:"../reportForm/reportForm",
                })
传参

url='/pages/index/index?id=80&age=19'携带参数id=80跳转到新页面

新页面 options为接受的参数

onLoad(options){
}

组件创建与组件生命周期函数

应用生命周期

uni-app 支持如下应用生命周期函数：

函数名说明
onLaunch当uni-app 初始化完成时触发（全局只触发一次）
onShow当 uni-app 启动，或从后台进入前台显示
onHide当 uni-app 从前台进入后台
onError当 uni-app 报错时触发
onUniNViewMessage对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound页面不存在监听函数
onThemeChange监听系统主题变化

注意

  • 应用生命周期仅可在App.vue中监听，在其它页面监听无效。
  • onlaunch里进行页面跳转，如遇白屏报错，请参考ask.dcloud.net.cn/article/359…
  • onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）
页面生命周期

uni-app 支持如下页面生命周期函数：

函数名说明平台差异说明最低版本
onInit监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad百度小程序3.1.0+
onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化App、微信小程序
onPullDownRefresh监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap点击 tab 时触发，参数为Object，具体见下方注意事项微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App
onShareAppMessage用户点击右上角分享微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序
onPageScroll监听页面滚动，参数为Objectnvue暂不支持
onNavigationBarButtonTap监听原生标题栏按钮点击事件，参数为ObjectApp、H5
onBackPress监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。app、H5、支付宝小程序
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H51.6.0
onShareTimeline监听用户点击右上角转发到朋友圈微信小程序2.8.1+
onAddToFavorites监听用户点击右上角收藏微信小程序2.8.1+
组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

函数名说明平台差异说明最低版本
beforeCreate在实例初始化之后被调用。详见
created在实例创建完成后被立即调用。详见
beforeMount在挂载开始之前被调用。详见
mounted挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。详见仅H5平台支持
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见仅H5平台支持
beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

组件通讯

兄弟组件传值

a组件和b组件

a.vue

created(){
    uni.$on("myEvent",(n) => {
        this.num+=n
    })
}

b.vue

handelAdd(){
    uni.$emit("myEvent",10);
}

即可实现b组件中的点击事件修改a组件中data的值。

toast

// uni.showToast({ //uni.showLoading、uni.showModal
//  title: '提交成功',
//  duration: 2000,
//  icon: "none", //不显示图标
// });
​
// this.$u.toast("上传成功")
​
uni.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    success: function (res) {
        if (res.confirm) {
            console.log('用户点击确定');
        } else if (res.cancel) {
            console.log('用户点击取消');
        }
    }
});
​
this.$refs.uToast.show({ //u-toast不能在小程序中使用
    type: 'success',
    title: "上传成功",
    url: "/pages/index/index",
    isTab: true, // 是否是tabbar的页面
    params: {
        id: 1
    },
})

封装$myRequest方法、挂载到全局

根目录下节点utilt/api.js

const BASE_URL = "http://172.0.0.1:8080"
export const myRequest = (options) => {
    return new Promise((resolve,reject) => {
        uni.request(() => {
            url: BASE_URL + options.url,
            method: options.method || "GET",
            data: options.data || {},
            success: (res) => {
                if (res.data.status !== 0) {
                    return uni.showToast({
                        title: '获取数据失败',
                        duration: 2000
                    });
                }
                resolve(res)
            },
            fail: (err) => {
                uni.showToast({
                    title: '获取数据失败',
                    duration: 2000
                });
                reject(err)
            }
        })
    })
}
​

main.js

import { myRequest } from "./util/api.js"
Vue.prototype.$myRequest = $myRequest

组件中使用

this.$myRequest({url:'',})

\

avatar
文章
阅读
粉丝