亲宝软件园·资讯

展开

uni-app的基本使用教程

Bonsoir777 人气:0

一、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函数里获得

加载全部内容

相关教程
猜你喜欢
用户评论