uni-app 基础

淡定浮云 發表於 2019-7-30 09:55:00

uni-app 是一款基于 vue 的支持多端开发的一套开源的架构
<h3>创建 && 运行发布</h3>
　　除了运用 HBuilderX 之外，还可以使用 vue-cli 进行创建项目，但是 vue-cli 必须是 3.x 的版本
　　　　npm instiall -g @vue/cli      // 安装 vue-cli 最新的版本
　　　　vue creat -p dcloudio/uni-preset-vue my-project
　　　　npm run dev:mp-weixin   // dev 环境运行项目
　　　　npm run build:mp-weixin  // 打包项目
 
 
<h3>生命周期</h3>
<h4>　　应用生命周期</h4>
　　　　onLaunch：当 uni-app 初始化完成时触发（全局只触发一次）；
　　　　onShow：当 uni-app 启动，或者从后天进入前台显示；
　　　　onHide：当 uni-app 从前台进入后台；
　　　　onUniNViewMessage：对 nuve 页面发送的数据进行监听；
　　
<h4>　　页面生命周期</h4>
　　　　onLoad：监听页面加载，其参数为上个页面传递的数据，参数类型为 Object；
　　　　onShow：监听页面显示；页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面；
　　　　onReady：监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发；
　　　　onHide：监听页面隐藏；
　　　　onUnload：监听页面卸载；
　　　　onResize：监听窗口尺寸变化；
　　　　onPullDownRefresh：监听用户下拉动作，一般用于下拉刷新；
　　　　onReachBottom：页面上拉触底事件的处理函数；
 
　　　　onTabltemTap：点击 tab 时触发，参数为 Object；
　　　　　　onTabItemTap 常用于点击当前 tabItem，滚动或者刷新当前页面；如果是点击不同的 tabitem，一定会触发页面切换；
　　　　　　如果想要在 App 端实现点击某个 tabItem 不跳转页面，不能使用 onTabItemTap，可以使用 plus.nativeObj.view 放一个区块盖住原先的 tabItem，并拦截点击事件；
　　　　　　参数说明：index：string 类型，被点击 tableItem 的序号，从 0 开始；
　　　　　　　　　　　pagePath：string 类型，被点击 tableItem 的页面路径；
　　　　　　　　　　　text：string 类型，被点击 tableItem 的按钮文字；
 
　　　　onShareAppMessage：用户点击右上角分享；
 
　　　　onPageScroll：监听页面滚动，参数为 Object；
　　　　　　参数说明：scrollTop：number类型，页面在垂直方向已滚动的距离（单位px）;
 
　　　　onNavigationBarButtonTap：监听原生标题栏按钮事件，参数为 Object；
　　　　　　参数说明：index：string 类型，原生标题栏按钮数组的下标；
 
　　　　onBackPress：监听页面返回，返回 event = { from: backButton、navigateBack}，backButton 表示来源是左上角返回按钮或者 android 返回键；navigateBack 表示来源是 uni.navigateBack；
　　　　　　参数说明：from：string 类型，触发返回行为的来源：“backButton” -- 左上角导航栏按钮以及安卓返回键；“navigateBack” -- uni.navigateBack() 方法； 
 
　　　　onNavigationBarSearchInputChanged：监听原生标题栏搜索输入框输入内容变化事件；
　　　　onNavigationBarSearchInputConfirmed：监听原生标题输入框搜索事件，用户点击软键盘上的 “搜索” 按钮时触发；
　　　　onNavigationBarSearchInputClicked：监听原生标题栏搜索输入框点击事件； 
来源：https://www.cnblogs.com/mufc/p/11268181.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 基础