uni-app新手使用入门

这个少年不太冷kk

于 2024-09-11 16:39:44 发布

阅读量238

点赞数 2

文章标签： uni-app vue.js javascript

本文链接：https://blog.csdn.net/m0_62712357/article/details/142141385

版权

现在vue市场上开发移动端主要有两个框架一个是uni-app 一个是vant 今天介绍一下uni-app的用法

uni-app也是基于vue开发的生命周期除了有vue的生命周期还有内置的下面上常规代码

<template>
	<view class="content">
    在uni里面 div变成了view
        <image src="../../../../static/images/huore.png"></image>
        图片标签不是img 而是image
    </view>
</template>
<script>
    export default {
		data() {
			return {}
        }
	},
    components:{
	},
    onNavigationBarButtonTap() {
        // 说明 这个生命周期是需要页面路由配置了 titleNView的buttons  点击按钮才触发
	},
    onLoad(option) {
        // 页面加载时触发 每个页面进去调用一次 option是页面上带的参数
	},
    onShow() {
        // 页面显示时触发 比如从别的页面返回回来时
    },
    onHide() {
        // 页面隐藏时触发
    },
    methods: {},
    onReachBottom() {
        // 页面滚动到底部触发
    },
    onPullDownRefresh() {
        // 需要页面路由设置 "enablePullDownRefresh": true, 页面就有下拉刷新了
    },
</script>
<style lang="less">
.content {
    padding-top: var(--status-bar-height); // 安全距离 不加这个页面会直接顶进系统栏里面
}
</style>

uni-app路由写法

常规
     {
      "path": "pages/commission/withdrawDetail",
      "style": {
        "navigationBarTitleText": "某某页面",
        "app-plus": {
          "bounce": "none"
        }
      }
    },
带按钮和下拉刷新的
    {
      "path": "pages/land/getLand/getLand",
      "style": {
        "navigationBarTitleText": "某某页面",
        "navigationBarBackgroundColor": "#FFFFFF", // 导航栏背景色
        "enablePullDownRefresh": true, // 页面就多了一个 onPullDownRefresh() {}生命周期
        "app-plus": {
          "bounce": "none", //关闭窗口回弹效果
          "softinputMode": "adjustPan", // 确保键盘出现时 输入框不被遮挡
          "titleNView": {
            "buttons": [ //原生标题栏按钮配置,
              {
                "type": "none",
                "color": "rgba(255,255,255, .0)",
                "background": "rgba(255,255,255, .0)",
                "text": "距离",
                "fontSize": "10",
                "width": "10px"
              },
              {
                "type": "none",
                "width": "auto",
                "fontSize": 15,
                "text": "按钮名称" //原生标题栏增加按钮，点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
              }
            ]
          }
        }
      }
    }

还有需要注意的是 uni-app在苹果安卓 h5上编译出来难免会有兼容性问题通常是样式上有问题比如使用绝对定位安卓就是正常苹果会顶到系统栏里这时候需要写if 包不同的代码做适配

<!-- #ifdef H5 -->
代码只在H5平台上编译
<!-- #endif -->

<!-- #ifndef H5 -->
代码在H5平台上不编译
<!-- #endif -->

取反直接把ifdef换成ifndef

<!-- #ifdef MP-WEIXIN -->
代码只在微信小程序里面编译
<!-- #endif -->

<!--#ifdef APP-PLUS-->
代码只在APP里面编译
<!--#endif-->

区分是安卓还是ios设备
直接
if (uni.getSystemInfoSync().platform==='android') {
    // 安卓
} else {
    // ios
}

其实没用过Uni-app也可以照着官网文档直接开发官网很多都比较详细