![](https://img-blog.csdnimg.cn/dcd1870a7fbe489a9c08d616180656db.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
uni-app
uni-app知识讲解
上晴下雪
这个作者很懒,什么都没留下…
展开
-
十、uni-app 生命周期
一、应用的生命周期onLaunch当uni-app 初始化完成时触发(全局只触发一次)onShow当 uni-app 启动,或从后台进入前台显示onHide当 uni-app 从前台进入后台二、页面生命周期onLoad监听页面加载onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面onHide监听页面隐藏onUnload监听页面卸载三、组件生命周期原创 2021-10-18 22:28:07 · 463 阅读 · 0 评论 -
九、uni-app 页面布局
scss 规范,rpx 在iphone6/7/8 中 宽度为750,2rpx = 1px<style lang="scss"> @import "./news.css";//加载别的css文件 .f1{ font-size: 50rpx; .c3{ background-color: red; } }</style>原创 2021-10-18 21:56:47 · 562 阅读 · 0 评论 -
八、uni-app 条件编绎
条件编译条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。#ifdef:if defined 仅在某平台存在#ifndef:if not defined 除了某平台均存在%PLATFORM%:平台名称...原创 2021-10-18 21:33:35 · 88 阅读 · 0 评论 -
七、uni-app 常用API
一、路由与页面跳转uni.navigateTo(OBJECT)保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。uni.redirectTo(OBJECT)关闭当前页面,跳转到应用内的某个页面。uni.reLaunch(OBJECT)关闭所有页面,打开到应用内的某个页面。uni.switchTab(OBJECT)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。uni.navigateBack(OBJECT)关闭当前页面,返回上原创 2021-10-18 21:22:43 · 865 阅读 · 0 评论 -
六、uni-app 自定义组件
父组件向子组件传递数据可以通过 props子组件向父组件传递数据可以通过自定义事件,父组件自定义事件,子组件触发父组件的事件,并传传递数据子组件可以定义插槽slot,让父组件自定义要显示的内容使用easycom规范,可以真接使用组件page/news/news.vue<template> <view> <veiw>自定义组件使用规范</veiw> <card color="red" @fclick="fclick"><.原创 2021-10-17 20:15:54 · 521 阅读 · 0 评论 -
五、uni-app 基础组件
v-model数据双向绑定<template> <view v-bind:class="msg" v-bind:data="1+2"> {{msg}} world!-{{num}} <button v-on:click="show">点我</button> <input v-model="msg" /> <view v-if="flag">vue</view> <view v-else&g.原创 2021-10-17 15:03:32 · 158 阅读 · 0 评论 -
四、uni-app 模板语法
v-bind(简写 :)组件属性中要使用data中定义的数据变量,或组件属性要使用表达式,需用v-bind指定简写 :v-on(简写@)监听DOM事件<template> <view v-bind:class="msg" v-bind:data="1+2"> hellow world! <button v-on:click="show">点我</button> </view></template><s.原创 2021-10-15 21:26:16 · 813 阅读 · 0 评论 -
二、uni-app 开发环境
通过 HBuilderX 可视化界面a. 创建uni-app;b. 运行uni-app;c. 发布uni-app通过 vue-cli 命令执行a. 安装node.js,下载地址:https://nodejs.org/en/download/##检查node.js 版本node -vv14.18.1npm -vb. 全局安装 vue-clinpm install -g @vue/clic. 创建uni-appvue create -p dcloudio/uni-pr..原创 2021-10-15 19:44:05 · 145 阅读 · 0 评论 -
一、uni-app 核心知识
规范a. 页面文件遵循vue单文件组件规范<!-- 模板块 --><template> <view class="main"> {{msg}} </view></template><!-- 脚本块 --><script> export default { data(){ return { msg:'Hello' } } }</script><!--.原创 2021-10-14 21:34:25 · 390 阅读 · 0 评论