javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > uni-app基本使用

uni-app的基本使用教程

作者:Bonsoir777

uni-app​​​ 是一个使用 ​ ​Vue.js​​ 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台,这篇文章主要介绍了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修改页面的标题和导航栏背景色,并且设置h5下拉刷新的特有样式

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    {
      "path":"pages/message/message",
      "style": {
        "navigationBarBackgroundColor": "#007AFF",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true,
        "disableScroll": true,
        "h5": {
          "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基本使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文