• uni-app 基础


      uni-app 是一款基于 vue 的支持多端开发的一套开源的架构

    创建 && 运行发布

      除了运用 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  // 打包项目

    生命周期

      应用生命周期

        onLaunch:当 uni-app 初始化完成时触发(全局只触发一次);

        onShow:当 uni-app 启动,或者从后天进入前台显示;

        onHide:当 uni-app 从前台进入后台;

        onUniNViewMessage:对 nuve 页面发送的数据进行监听;

      

      页面生命周期

        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:监听原生标题栏搜索输入框点击事件;

  • 相关阅读:
    10分钟用JS实现微信 "炸屎"大作战
    基于nodejs 的多页面爬虫
    react+react-router 4.0+redux 构建购物车实战项目
    vue+websocket+express+mongodb实战项目(实时聊天)
    用vuejs仿网易云音乐(实现听歌以及搜索功能)
    js 实现 bind 的这五层,你在第几层?
    教你如何搭建一个自动化构建的博客
    vue-chat项目之重构与体验优化
    vue+websocket+express+mongodb实战项目(实时聊天)(二)
    css 多栏自适应布局
  • 原文地址:https://www.cnblogs.com/mufc/p/11268181.html
Copyright © 2020-2023  润新知