首页 > 其他分享 >uni-app 介绍及使用

uni-app 介绍及使用

时间:2023-04-17 09:23:11浏览次数:50  
标签:app 程序 介绍 api 组件 uni 模拟器

一、什么是uni-app

        uni-app由dcloud公司开发的多端融合框架,是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。最大的优势一次开发,多端运行。

        官方学习网站uni-app官网

二、如何学习uni-app

        在学习uni-app之前,建议先学习vue和小程序。uni-app技术框架为Vue语法+小程序的api,有所了解之后再使用uni-app,会更快上手。

        如果要开始学习,请准备:

        1. HBuilderx开发与编译工具;

        2. 微信小程序开发工具:用于微信小程序预览测试;

        3. 小程序模拟器:MuMu、雷电等。

三、uni-app使用

3.1 创建项目

        利用HBuilderX可视化创建比较简单,无需配置nodejs,Hbuilder已经有相关环境配置了。 注意要安装相对应的插件。

3.2 运行到多端

1. H5运行,即运行到内置浏览器

2. 运行到小程序,以微信小程序为例

打开开发工具的服务端口 设置小程序的端口

 

HBuilderx 配置微信开发工具的地址,运行->运行到小程序模拟器->运行设置输入微信开发者工具路径

 manifest.json->微信小程序配置

 运行到微信小程序

 3. 运行到模拟器

 打开模拟器或者手机

配置模拟器端口,运行->运行到手机或模拟器->Android模拟器端口设置

夜神模拟器端口号:62001、海马模拟器端口号:26944、逍遥模拟器端口号:21503、MuMu模拟器端口号:7555、天天模拟器端口号:6555。

运行

四、组件/标签

来自:白话uni-app:https://ask.dcloud.net.cn/article/35657,将uni-app的组件/标签跟html做了一个对比。

  1. div 改成 view
  2. span、font 改成 text
  3. a 改成 navigator
  4. img 改成 image
  5. input 仅仅是输入框。 原html规范中input不仅是输入框,还有radio、checkbox、时间、日期、文件选择功能。在uni-app和小程序规范中,input仅仅是输入框。其他功能uni-app有单独的组件或API:radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择。
  6. form、button、label、textarea、canvas、video 这些还在。
  7. select 改成 picker
  8. iframe 改成 web-view
  9. ul、li没有了,都用view替代。做列表一般使用uList组件
  10. audio 不再推荐使用,改成api方式,背景音频api文档
  11. 其实老的HTML标签也可以在uni-app里使用,uni-app编译器会在编译时把老标签转为新标签,比如把div编译成view。但不推荐这种用法,调试H5端时容易混乱。

除了改动外,还新增了一批手机端常用的新组件。

  1. scroll-view 可区域滚动视图容器
  2. swiper 可滑动区域视图容器
  3. icon 图标
  4. rich-text 富文本(不可执行js,但可渲染各种文字格式和图片)
  5. progress 进度条
  6. slider 滑块指示器
  7. switch 开关选择器
  8. camera 相机
  9. live-player 直播
  10. map 地图
  11. cover-view 可覆盖原生组件的视图容器 cover-view需要多强调几句,uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。如需覆盖原生组件,则需要使用cover-view组件。

         因为uni-app的api是参考小程序的,所以和浏览器的js api有很多不同,uni-app的js api还有很多,但基本就是小程序的api,把wx.xxx改为uni.xxx即可。

  1. alert,confirm ->uni.showmodel
  2. ajax axios -> uni.request
  3. cookie、session 没有 local.storage->uni.storage
  4. vue-router-> uni.navigateTo

         uni-app在不同的端,支持条件编译,无限制的使用各端独有的api。

五、页面管理

        每个可显示的页面,都必须在 pages.json 中注册。如果你开发过小程序,那么pages.json类似app.json。如果你熟悉vue,这里没有vue的路由,都是在pages.json里管理。

        在vue项目中首页一般是index.html或default.html,是在web server里配的。而uni-app的首页,是在pages.json里配的,page节点下第一个页面就是首页。一般在/pages/xx的目录下。

        app和小程序中,为了提升体验,页面提供了原生的导航栏和底部tabbar,注意这些配置是在pages.json中做,而不是在vue页面里创建,但点击事件的监听在显示的vue页面中做。

查看文章链接:csdn的博主:zhangxiaobai___ 的文章:uni-app 介绍及使用

标签:app,程序,介绍,api,组件,uni,模拟器
From: https://www.cnblogs.com/fairya/p/17324740.html

相关文章

  • APP产品设计到开发交付的流程
    APP产品设计到开发交付的流程可以分为以下几个步骤:需求分析阶段:在这个阶段,产品团队需要明确产品的目标、功能需求、用户群体、竞争对手等信息,以确定产品的设计方向。需求评审阶段:开发团队需要参与需求评审,以评估需求的可行性和实现难度,提出技术上的建议和优化方案,确保产品的......
  • pyqt5-介绍
    1、介绍pyqt是python的一个主流的第三方模块,与Qt融合,用于GUI开发。支持多种常用组件,并且具有很好的默认显示效果QtDesigner支持图形化直接设计ui,大大减轻工作,得到更好的效果使用范围广,网络上有很多的中文文档和问答,方便开发支持pyqthon3语法,目前是pyqt5版本2、比较tkint......
  • CesiumJS 源码杂谈 - 从光到 Uniform
    目录1.有什么光2.光如何转换成Uniform以及何时被调用2.1.统一值状态对象(UniformState)2.2.上下文(Context)执行DrawCommand2.3.对WebGLUniform值的封装2.4.自动统一值(AutomaticUniforms)3.在着色器中如何使用3.1.点云3.2.冯氏着色法3.3.地球3.4.模型架构中的光着色阶......
  • Pake 基于rust 开发的快速web 页面打包app 的工具
    Pake利用了tauri可以实现web页面快速打包桌面app说明对于希望快速打开一个桌面应用的场景,Pake还是值得试用的参考资料https://github.com/tw93/Pake......
  • Unique Snowflakes uva11572
    找最长的,没有相同元素的区间 双指针#include<iostream>#include<set>usingnamespacestd;constintN=1e6+2;intn,a[N];voidsolve(){ intx=1,y=1,ans=0; set<int>st; while(y<=n){ while(y<=n&&!st.count(a[y]))s......
  • APP爬虫初阶之Pixel2刷机root
    pixel2刷机刷机准备lineageziptwrpimgmagiskzip(github上下的是APK,需要把后缀改为zip)刷机步骤首先需要一个底包,这里我用的出厂自带的google官方系统,没有重新刷入手机上打开usb调试,关闭屏幕超时锁屏,打开OEM锁手机完全关机,按住向下键重启(或者通过adbrebootbootl......
  • 特性介绍 | MySQL 测试框架 MTR 系列教程(一):入门篇
    作者:卢文双资深数据库内核研发去年年底通过微信公众号【数据库内核】设定了一个目标——2023年要写一系列特性介绍+内核解析的文章(现阶段还是以MySQL为主)。虽然关注者很少,但本着“说到就要做到”的原则,从这篇就开始了。序言:以前对MySQL测试框架MTR的使用,主要集中......
  • 成都控制设备订做:利用74373芯片进行单片机IO口扩展的方法介绍
    本文介绍用74373芯片进行微处理器IO口扩展的方法。1.为什么要进行IO口扩展?在电路设计的某些时候,微处理器(如单片机)IO口不够用了,此时该怎么办呢?利用辅助芯片进行IO口扩展是个简单直接的方法,能用较少的成本增多IO口。我处提供单片机、PLC、电路板、控制器/箱、仪器仪表、机电设备或系......
  • Hugging News #0414: Attention 在多模态情景中的应用、Unity API 以及 Gradio 主题构
    每一周,我们的同事都会向社区的成员们发布一些关于HuggingFace相关的更新,包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等,我们将其称之为「HuggingNews」,本期HuggingNews有哪些有趣的消息,快来看看吧!社区动向Attention在视觉领域的应用注......
  • uniapp面试题
    1.uniapp进行条件编译的两种方法?小程序端和H5的代表值是什么?通过#ifdef、#ifndef的方式H5:H5MP-WEIXIN:微信小程序2.uniapp的配置文件、入口文件、主组件、页面管理部分pages.json配置文件main.js入口文件App.vue主组件pages页面管理部分3.uniapp上传文件时用到a......