uni-app禁止点击_5分钟极速入门uniapp
之前已经简单介绍过uni-app的强大跨端能力,So,今天来带大家5分钟快速入门uni-app。
本篇为基础教程,涉及如运行原理、源码解析、APP开发、uniCloud(Serverless)、NVUE,见后续更新。
准备工作
需要具备的知识
因为uni-app使用的DSL是Vue,所以最好先学习下Vue基础知识和Vue相关技术栈。
不熟悉Vue基础知识的同学可以去官方文档学习一下:https://cn.vuejs.org/index.html。
uni-app目前使用到的Vue相关技术栈主要包括:
- vuex:用于状态管理,不熟悉的可以去官方文档学习下:https://vuex.vuejs.org/zh/guide/。
- vue-router、vue-cli、webpack、rollup、babel、eslint等,这些可以了解下,开发中基本不需要用到。
开发工具
在进行uni-app开发之前,一个顺手的开发工具必不可少。
uni-app有提供相关cli工具,理论上可以支持任何开发工具,但是考虑到使用体验,我比较推荐的是uni-app自家的hbuilderx和vscode。
注意:cli工具有一些功能还不支持,例如uniCloud、App云打包等,如果需要用到上述功能,建议还是使用hbuilderx。
编写页面
万事具备,来到了最激动人心的时候,Let's code!
uni-app使用vue-template方式开发页面和组件,并且基本支持vue的所有特性:数据双向绑定、计算属性、filter、mixins、ref等。
不同平台支持不一样,并且也在不断更新中,具体以使用为准.
下面是一个简单的页面示例:
<template>
支持的组件
uni-app中的组件和微信小程序中的类似,常用组件包括view、text、swiper、scroll-view等。
针对一些组件,后面会有专门的文章来讲解如何使用。
支持的接口
uni-app提供了一套完善的uni-app接口,基本覆盖了日常使用场景:例如发送请求、保存相册、调用分享等,并且会根据编译平台调用对应的接口。
因为微信小程序在小程序领域算是发布最早,且功能最为完善的,所以uni-app设计规范基本以微信小程序为准。
另外uni-app接口支持异步调用,如下所示:
// 返回错误,结果
在App开发中,还可以使用h5+接口,用来访问一些原生接口,如跳转App、调用系统级分享等。当然也可以自己开发或使用插件市场中的原生插件获得更强的原生能力。
编写组件
uni-app组件编写和vue组件编写一致,支持属性传值、插槽等。
具体可以查看vue组件文档:https://cn.vuejs.org/v2/guide/components.html
下面是一个简单的组件示例:
<template>
小程序原生组件混用
uni-app支持vue组件和小程序原生组件混用,具体的使用方式见uni-app 小程序组件支持:https://uniapp.dcloud.io/frame?id=小程序组件支持。
注册全局组件
为了防止每次使用时手动引入,可以注册为全局组件,需要在main.js里进行全局导入和注册,如下所示:
import Vue
生命周期
在页面和组件设计中,我们往往需要在一些特殊时机,处理一些业务逻辑,因此我们需要了解下uni-app生命周期。
应用生命周期
应用生命周期,是指主页面的生命周期:App.vue。
包括:onLoad、onShow、onReady、onHide等。
详情见uni-app 应用生命周期:https://uniapp.dcloud.io/collocation/frame/lifecycle?id=应用生命周期
需要注意的是例如onLoad,onShow是在整个应用/小程序,加载以及重新打开时触发,不同于页面生命周期每次打开或关闭触发。
页面生命周期
页面生命周期,是指每个单独页面的生命周期:如pages/index/index.vue。
和应用生命周期类似,详见uni-app 页面生命周期:https://uniapp.dcloud.io/collocation/frame/lifecycle?id=页面生命周期
组件生命周期
组件生命周期,是指每个组件的生命周期:如components/popup.vue。
组件支持的生命周期和vue标准组件生命周期相同,这里没有页面级的onLoad、onShow等。
详见uni-app 组件生命周期:https://uniapp.dcloud.io/collocation/frame/lifecycle?id=组件生命周期
条件编译
不同平台虽然能保持大部分特性一致,但是也很难完全兼容,所以针对不同的情况需要使用条件编译,来使用不同实现方式。
注意:在对应模块需使用对应的注释格式。
更多条件编译取值说明,可以查看官方文档:https://uniapp.dcloud.io/platform
使用插件
很多时候,为了防止我们在开发的时候做一些重复工作,或者别人有一些好的实现方式,可以使用插件的形式引入。
我们可以到uni-app 插件市场:https://ext.dcloud.net.cn/,去找一些适合我们业务场景的插件。
例如下拉刷新插件、原生APP一键登录插件等。
当然如果你自己造了一些轮子,觉得不错,也可以上传到uni-app插件市场,帮助其他开发者更快捷开发,让uni-app生态更完善。
多端运行、发布
使用hbuilder
hbuilderx在操作界面,有编译/发布菜单,选择你想要运行发布的平台,点击执行即可。
使用cli工具
可以使用命令:npm run dev:%PLATFORM%
、npm run build:%PLATFORM%
,来运行和发布应用。
针对APP的运行、发布相比较于h5、小程序,相对要稍微复杂点,包括制作云基座、云打包等,会单独写一篇文章进行说明。
那今天关于uni-app的快速入门教程就到这里结束啦,你学会了没?
关注公众号,第一时间接收推送哦~
点击 “分享”
让更多人看到,点击 “在看”
支持我继续创作。
* 本文原创,未经本人同意,禁止转载
uni-app禁止点击_5分钟极速入门uniapp相关推荐
- 九十分钟极速入门Linux——Linux Guide for Developments 学习笔记
转载自: 九十分钟极速入门Linux--Linux Guide for Developments 学习笔记 http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA ...
- PyTorch 深度学习: 60 分钟极速入门
PyTorch 深度学习: 60 分钟极速入门 2019年年初,ApacheCN组织志愿者翻译了PyTorch1.2版本中文文档(github地址),同时也获得了PyTorch官方授权,我相信已经有许 ...
- 60 分钟极速入门 PyTorch
2017 年初,Facebook 在机器学习和科学计算工具 Torch 的基础上,针对 Python 语言发布了一个全新的机器学习工具包 PyTorch. 因其在灵活性.易用性.速度方面的优秀表现,经 ...
- thinkcmf搭建教程_5分钟快速入门
# 5分钟快速入门 [TOC=1,5] ## 1.创建模板目录 在`public/themes/`目录下创建`quick_start`目录 ## 2.添加模板描述文件 在`public/themes/ ...
- uni app push 点击通知栏 打开app 跳转页面
参考 点击通知栏消息启动应用后无法跳转页面 - DCloud问答 onLaunch: function() {//#ifdef APP-PLUSplus.push.addEventListener(& ...
- java速学_5分钟快速入门Java,不看真的可惜了
你好,世界! 源代码组织方式 Java程序由package+class组成,package对应目录的相对路径,class对应文件,如 关于class有如下几点规则: 文件的名字必须和class的名字一 ...
- python能做数据库开发吗_5分钟快速入门,用Python做SQLite数据库开发,附代码适合初学...
1. 它是内置的,不需要安装,节省很多麻烦.2. 使用方便,不需要复杂的连接配置,打开本地文件一样简单.3.方便转移.数据库是一个文件.复制.传输和删除可以很容易地处理.4所示.轻量级的性能比大多数其 ...
- python建立sqlite数据库_5分钟快速入门,用Python做SQLite数据库开发,附代码适合初学...
1.它内置,无需安装,省了很多麻烦. 2.使用方便,无需复杂的连接配置,和打开本地文件一样简单. 3.转移方便,数据库就是一个文件,复制.转移.删除都能简单处理 4.轻量级应用中性能优于多数其它的数据 ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
最新文章
- NLP之WE之Skip-Gram:基于TF利用Skip-Gram模型实现词嵌入并进行可视化、过程全记录
- 堆排序 海量数据求前N大的值
- c语言 函数的参数传递示例_scalbln()函数以及C ++中的示例
- 一个form 如何做两次提交_如何做一个调酒师
- java 交集怎么写_Java里面如何求两个集合的交集
- [220221] Majority Element
- JS小技巧 ----- 关于 ... 运算符的使用场景
- 【图像处理】基于matlab GUI Hough变换+PDE图像去雨(带面板)【含Matlab源码 811期】
- vb从入门到精通_干货|让你 ArcGIS Engine从入门到精通的22个视频
- Eclipse安装插件详解
- Spring获取外网IP
- DXP改变字体的方法
- Inno Setup 介绍
- 给懒懒的Git操作手册
- 有没有游泳可以戴的耳机、防水耳机能戴着游泳
- C++常用功能汇总-文件读写 计时 随机数
- 计算机电源常见的认证有哪些,哪些电源适配器需要办理CCC认证
- 云服务器与虚拟主机有什么区别,我们应该如何选择?
- android 应用未验证,解决微信分享显示“未验证应用”问题。
- 这是烙印,是成长的陪伴,是归属
热门文章
- 安全管理入门 七大CSO必备秘方收藏
- 自定义类组件无法ref的解决方法 React
- 微信终极秘籍:精通公众号商业运营(最强作者阵容资深大号实战揭秘营销极限智慧唯一基于5.0)...
- android:TextView中显示平方米符号㎡
- Why extends is evil
- MySQL日志/索引/锁/事务特性的理解
- 微信小程序:商城系列专辑(开发指南+精品Demo)
- 优思学院|平衡计分卡是什么?
- Android studio插件GsonFormat,返回json快速创建实体对象
- ConstraintLayout 开发报错:This view is not constrained. It only has designtime positions, so it will jum