uni-app如何使用

发布时间:2022-11-14 10:14:32 作者:iii
来源:亿速云 阅读:146

这篇文章主要介绍了uni-app如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇uni-app如何使用文章都会有所收获,下面我们一起来看看吧。

一、uni-app介绍

uni-app 是一个使用  Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

即使不跨端,uni-app同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验,可快速上手uni-app

1.1为什么要去学习uni-app?

相对开发者来说,减少了学习成本,因为只学会uni-app之后,即可开发出iOS、Android、H5、以及各种小程序的应用,不需要再去学习开发其他应用的框架,相对公司而言,也大大减少了开发成本。

1.2 环境搭建

安装编辑器HbuilderX (应用商城下载即可)

HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

下载App开发版,可开箱即用

安装微信开发者工具  微信开发者工具下载地址与更新日志 | 微信开放文档

1.3 利用HbuilderX初始化项目

点击HbuilderX菜单栏文件>项目>新建
选择uni-app,填写项目名称,项目创建的目录

1.4 运行项目

在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意:

如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功
微信开发者工具在设置中安全设置,服务端口开启

1.5 介绍项目目录和文件作用

为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:

页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范,详见 uni-app 组件规范
接口能力(JS API)靠近微信小程序规范,但需将前缀wx 替换为uni,详见 uni-app接口规范
数据绑定及事件处理同Vue.js 规范,同时补充了App及页面的生命周期
为兼容多端运行,建议使用flex布局进行开发

2.全局配置和页面配置

2.1 通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。

属性类型默认值描述
navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色(同状态栏背景色)
navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色,仅支持 black/white
navigationBarTitleTextString 导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / light
enablePullDownRefreshBooleanfalse是否开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位只支持px,

2.2 创建新的message页面

右键pages新建message目录,在message目录下右键新建.vue文件,并选择基本模板

<template>
  <view>
    这是信息页面
  </view>
</template>
 
<script>
</script>
 
<style>
</style>

2.3 通过pages来配置页面

属性类型默认值描述
pathString 配置页面路径
styleObject 配置页面窗口表现

pages数组数组中第一项表示应用启动页

"pages": [ 、
    {
      "path":"pages/message/message"
    },
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    }
  ]

通过style修改页面的标题和导航栏背景色,并且设置h6下拉刷新的特有样式

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    {
      "path":"pages/message/message",
      "style": {
        "navigationBarBackgroundColor": "#007AFF",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true,
        "disableScroll": true,
        "h6": {
          "pullToRefresh": {
            "color": "#007AFF"
          }
        }
      }
    }
  ]

2.4 配置tabbar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。

Tips:

属性类型必填默认值描述平台差异说民
colorHexColor tab上的文字默认颜色 
selectColorHexColor tab上的文字选中时的颜色 
backgroundColorHexColor tab的背景颜色 
borderStyleStringblacktabbar 上边框的颜色,仅支持 black/whiteApp 2.3.4+ 支持其他颜色值
listArray tab 的列表,详见 list 属性说明,最少2个、最多5个 tab 
positionStringbottom可选值 bottom、toptop 值仅微信小程序支持

案例代码:

"tabBar": {
    "list": [
      {
        "text": "首页",
        "pagePath":"pages/index/index",
        "iconPath":"static/tabs/home.png",
        "selectedIconPath":"static/tabs/home-active.png"
      },
      {
        "text": "信息",
        "pagePath":"pages/message/message",
        "iconPath":"static/tabs/message.png",
        "selectedIconPath":"static/tabs/message-active.png"
      },
      {
        "text": "我们",
        "pagePath":"pages/contact/contact",
        "iconPath":"static/tabs/contact.png",
        "selectedIconPath":"static/tabs/contact-active.png"
      }
    ]
  }

2.5 condition启动模式配置

启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。

属性说明:

属性类型是否必填描述
currentNumber当前激活的模式,List 节点的索引值
listArray启动模式列表

list说明:

属性类型是否必填描述
nameString启动模式名称
pathString启动页面路径
queryString启动参数,可在也页面的onLoad函数里获得

关于“uni-app如何使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“uni-app如何使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. uni-app如何使用微信小程序云函数
  2. 使用uni-app开发微信小程序的实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

uni-app

上一篇:JavaScript数组合并的常见方法有哪些

下一篇:JavaScript模板字符串是什么及如何使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》