-
uni-app uni-app创建和运行
2020-07-20 23:56:10uni-app uni-app创建和运行uni-app创建和运行1. 通过 HBuilderX 可视化界面创建uni-app运行uni-app2. 通过vue-cli命令行环境安装创建uni-app运行、发布uni-app3. 使用cli创建项目和使用HBuilderX可视化界面创建项目...uni-app uni-app创建和运行
uni-app创建和运行
uni-app支持通过
HBuilderX
可视化界面、vue-cli命令行
两种方式快速创建项目。1. 通过 HBuilderX 可视化界面
创建uni-app
uni-app自带的模板有
Hello uni-app
,是官方的组件和API示例。还有一个重要模板是uni ui
项目模板,日常开发推荐使用该模板,已内置大量常用组件。运行uni-app
-
浏览器运行
-
真机运行
-
小程序运行
2. 通过vue-cli命令行
环境安装
全局安装vue-cli
npm install -g @vue/cli
创建uni-app
使用正式版(对应HBuilderX最新正式版)
vue create -p dcloudio/uni-preset-vue my-project
使用alpha版(对应HBuilderX最新alpha版)
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
此时,会提示选择项目模板,初次体验建议选择
hello uni-app
项目模板,如下所示:
运行、发布uni-app
npm run dev:%PLATFORM% npm run build:%PLATFORM%
%PLATFORM%
可取值如下:值 平台 app-plus app平台生成打包资源(仅支持npm run build:app-plus,也就是App平台运行调试不支持cli方式,需在HBuilderX中运行调试) h5 H5 mp-alipay 支付宝小程序 mp-baidu 百度小程序 mp-weixin 微信小程序 mp-toutiao 字节跳动小程序 mp-qq qq 小程序 mp-360 360 小程序 quickapp-webview 快应用通用 quickapp-webview-union 快应用联盟 quickapp-webview-huawei 快应用华为 3. 使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别
编译器的区别
开发工具的区别
官方文档的说明
链接: uni-app官方文档
-
-
uni-app入门及uni-app项目目录介绍
2020-10-16 14:05:44uni-app项目路径介绍 介绍项目目录和文件作用 uni-app介绍 官方网页 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
为什么要去学习uni-app?
相对开发者来说,减少了学习成本,因为只学会uni-app之后,即可开发出iOS、Android、H5、以及各种小程序的应用,不需要再去学习开发其他应用的框架,相对公司而言,也大大减少了开发成本。
环境搭建
安装编辑器HbuilderX 下载地址
HBuilderX是通用的前端开发工具,但为
uni-app
做了特别强化。下载App开发版,可开箱即用
安装微信开发者工具 下载地址
利用HbuilderX初始化项目
-
点击HbuilderX菜单栏文件>项目>新建
-
选择uni-app,填写项目名称,项目创建的目录
运行项目
在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行
在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app
在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机
注意:
- 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功
- 微信开发者工具在设置中安全设置,服务端口开启
介绍项目目录和文件作用
pages.json
文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等manifest.json
文件是应用的配置文件,用于指定应用的名称、图标、权限等。App.vue
是我们的跟组件,所有页面都是在App.vue
下进行切换的,是页面入口文件,可以调用应用的生命周期函数。main.js
是我们的项目入口文件,主要作用是初始化vue
实例并使用需要的插件。uni.scss
文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss
文件里预置了一批scss变量预置。unpackage
就是打包目录,在这里有各个平台的打包文件pages
所有的页面存放目录static
静态资源目录,例如图片等components
组件存放目录
为了实现多端兼容,综合考虑编译速度、运行性能等因素,
uni-app
约定了如下开发规范:- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范,详见uni-app 组件规范
- 接口能力(JS API)靠近微信小程序规范,但需将前缀
wx
替换为uni
,详见uni-app接口规范 - 数据绑定及事件处理同
Vue.js
规范,同时补充了App及页面的生命周期 - 为兼容多端运行,建议使用flex布局进行开发
全局配置和页面配置
通过globalStyle进行全局配置
用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档
属性 类型 默认值 描述 navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色(同状态栏背景色) navigationBarTextStyle String white 导航栏标题颜色及状态栏前景颜色,仅支持 black/white navigationBarTitleText String 导航栏标题文字内容 backgroundColor HexColor #ffffff 窗口的背景色 backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面生命周期。 onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期 创建新的message页面
右键pages新建message目录,在message目录下右键新建.vue文件,并选择基本模板
<template> <view> 这是信息页面 </view> </template> <script> </script> <style> </style>
通过pages来配置页面
属性 类型 默认值 描述 path String 配置页面路径 style Object 配置页面窗口表现,配置项参考 pageStyle 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" } } } } ]
配置tabbar
如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。
Tips
- 当设置 position 为 top 时,将不会显示 icon
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
属性说明:
属性 类型 必填 默认值 描述 平台差异说明 color HexColor 是 tab 上的文字默认颜色 selectedColor HexColor 是 tab 上的文字选中时的颜色 backgroundColor HexColor 是 tab 的背景色 borderStyle String 否 black tabbar 上边框的颜色,仅支持 black/white App 2.3.4+ 支持其他颜色值 list Array 是 tab 的列表,详见 list 属性说明,最少2个、最多5个 tab position String 否 bottom 可选值 bottom、top top 值仅微信小程序支持 其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:
属性 类型 必填 说明 pagePath String 是 页面路径,必须在 pages 中先定义 text String 是 tab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标 iconPath String 否 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标 selectedIconPath String 否 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效 案例代码:
"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" } ] }
condition启动模式配置
启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。
属性说明:
属性 类型 是否必填 描述 current Number 是 当前激活的模式,list节点的索引值 list Array 是 启动模式列表 list说明:
属性 类型 是否必填 描述 name String 是 启动模式名称 path String 是 启动页面路径 query String 否 启动参数,可在页面的 onLoad 函数里获得 组件的基本使用
uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼接称自己的应用
uni-app中的组件,就像
HTML
中的div
、p
、span
等标签的作用一样,用于搭建页面的基础结构text文本组件的用法
001 - text 组件的属性
属性 类型 默认值 必填 说明 selectable boolean false 否 文本是否可选 space string . 否 显示连续空格,可选参数: ensp
、emsp
、nbsp
decode boolean false 否 是否解码 text
组件相当于行内标签、在同一行显示- 除了文本节点以外的其他节点都无法长按选中
-
-
uni-App开发环境搭建以及创建uni-app项目
2021-01-05 11:06:04uni-app开发环境搭建(推荐编辑器) uni-app环境配置 插件安装(安装自己需要的就行) 创建uni-app项目 在点击工具栏里的文件 -> 新建 -> 项目: 选择uni-app类型,输入工程名,选择模板,点击创建... -
uni-app学习笔记——uni-app资源
2019-06-28 15:27:22uni-app资源 uni-app组件、插件、模块到插件市场查看 uni-app 支持离线打包,详细参考相关文档: a.https://ask.dcloud.net.cn/article/103 b.https://ask.dcloud.net.cn/article/35139 c....uni-app资源
-
uni-app组件、插件、模块到插件市场查看
-
uni-app 支持离线打包,详细参考相关文档:
a.https://ask.dcloud.net.cn/article/103
b.https://ask.dcloud.net.cn/article/35139
c.https://ask.dcloud.net.cn/article/35379 -
uni-app 支持离线打包,详细参考相关文档 :
uni-app 案例:https://uniapp.dcloud.io/case
-
-
如何快速入门uni-app,uni-app的学习路线及重要知识点!
2019-05-08 11:53:50uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手... -
uni-app
2020-06-23 15:54:34uni-app 生命周期 应用生命周期 函数名 说明 onlaunch 当uni-app初始化完成时触发(全局只触发一次) onShow 当uni-app启动,或从后台进入前台显示 onHide 当uni-app从前台进入后台 onError 当uni-app... -
uni-app开发app之一uni-app优缺点
2019-10-23 11:00:46uni-app是一套可以适用多端的开源框架,一套代码可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序等。 优点二: uni-app对前端开发人员比较友好,学习成本比较低,首先uni-app是基于vue.js的。... -
uni-app开发环境搭建&创建uni-app项目
2019-08-22 13:07:40本文是关于使用uni-app的第一次笔记,至于有没有第二次,看我接下来的心情了!本文首先教你如何搭建uni-app开发环境,然后创建uni-app项目。 uni-app使用了快半个月了,现在准备来系统的学习一下uni-app,并做一些... -
uni-app系列(十四):uni-app判断平台
2020-09-09 09:40:31今天分享下 —— uni-app 系列(十四):uni-app 判断平台 的一些基本知识,欢迎关注! 欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路 相关文章:uni-app系列(十三):uni-app运行环境判断 ????uni-app ... -
uni-app系列(十三):uni-app运行环境判断
2020-09-09 09:40:20今天分享下 —— uni-app 系列(十三):uni-app 运行环境判断 的一些基本知识,欢迎关注! 欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路 相关文章:uni-app系列(十四):uni-app判断平台 ????运行环境... -
uni-app系列(十一):uni-app引入vuex缓存
2020-09-08 12:17:54今天分享下 —— uni-app 系列(十一):uni-app 使用 vuex 缓存 的一些基本知识,欢迎关注! 欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路 相关文章:uni-app系列(七):HBuilderx使用Git插件配置并上传... -
uni-app 介绍,什么是uni-app,它是干嘛的
2018-09-28 10:40:57uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。 uni-app 继承自 Vue.js... -
UNI-APP_uni-app input监听回车键
2020-12-10 23:49:06uni-app是基于vue的,所以,在一开始要实现按下键盘的enter键,使用了如下的方法: <input type="search" @keydown.enter="doSearch"> 生成小程序后,发现并没有用,一番百度,才知道uni-app运行在手机端,... -
uni-app---使用uni-app运行到微信开发者工具报错
2020-10-26 10:58:01使用uni-app运行到微信开发者工具(快捷键【Ctrl+R】)报错。 图中已提示错误原因为:服务端口已关闭,需要开启,开启方式如下: -
【uni-app】uni-app移动端开发 - 登录界面
2020-09-27 15:13:15本次通过完成一个登录界面,来学会uni-app 框架的使用,以及开发过程需要注意的点,还有难以排查出来且又找不到资料的一些坑,总有一些你需要的信息,接下来先明确登录界面的基本需求。 登录界面是再简单不过的界面... -
uni-app开发之二uni-app开发流程及常用组件讲解
2019-10-23 11:02:10上一篇我们讲了uni-app的各种优缺点,接下来我们要讲一下uni-app的开发流程和一些常用组件。此篇文章为uni-app基础篇,如果你是uni-app开发大神可以忽略此篇文章,当然如果您发现了文章的不足也请您不吝指出。 一:... -
uni-app(一)uni-app与framework7+cordova选择对比。
2020-09-17 18:39:13前一段时间用framework7+cordova做了2个app,后面因为甲方公司要求采用uni-app开发了2个app。如果还在徘徊选择什么框架的话,我果断推荐使用uni-app。 对比下uni-app与framework7+cordova的优缺点: framework7比uni... -
2020-web前端-uni-app-uni-app的云函数的数据库操作
2020-05-16 09:50:201.uni-app的云函数的数据库操作 'use strict'; const db = uniCloud.database() exports.main = async (event, context) => { //event为客户端上传的参数 // context包含了调用信息和运行状态,每次调用的上... -
uni-app学习笔记--浏览vue-cli创建uni-app模板的文件结构
2019-09-16 14:49:54在学习uni-app之前最好有vue和微信小程序的基础,因为uni-app是一个跨平台的开发框架,它里面不少语法是结合vue和小程序中的语法来写的。 因为本人在学习之前有使用过vue-cli来创建项目,在这里直接使用vue-cli3来... -
uni-app快速入手 ——(2)uni-app 事件处理、事件绑定、事件传参,uni-app事件对应web事件
2020-03-05 13:42:47uni-app 的事件处理器 几乎全支持Vue官方文档:事件处理器 // 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件 { click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel:... -
web前端-uni-app-uni-app的云函数的数据库操作
2020-11-19 11:02:281.uni-app的云函数的数据库操作 1.这个是写的云函数里面的 ‘use strict’; const db = uniCloud.database() exports.main = async (event, context) => { //event为客户端上传的参数 // context包含了调用信息和... -
uni-app学习记录——1.uni-app基础语法
2020-06-03 16:35:09Uni-app快速入门 -
uni-app系列(十五):uni-app使用讯飞语音开启App端语音转文字
2020-09-09 09:41:14今天分享下 —— uni-app 系列(十五):uni-app uni-app使用讯飞语音开启App端语音转文字 的一些基本知识,欢迎关注! 欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路 相关文章:uni-app系列(十三):uni-... -
uni-app爬坑,uni-app修改内部css在h5生效,app上面不生效问题
2020-12-25 17:39:12uni-app爬坑,uni-app修改内部css在h5生效,app上面不生效 #解决办法 修改内部css时将uni-改为wx-(比如说内部样式为uni-checkbox-input改为wx-checkbox-input) -
UNI-APP 编译错误 uni-app Error: Cannot find module 'node-ipc'
2020-04-17 13:47:51升级了HX的版本后uni-app编译报错,之前是不会存在这个问题的,插件已经安装。依然保错。 我的处理方式是在插件中将uni-app编译 卸载后再重新安装。 卸载重装以后,再次编译APP即可成功编译。 ... -
uni-app系列(四):uni-app 如何修改默认端口
2020-09-04 09:19:53今天分享下 —— uni-app 如何修改默认端口 的一些基本知识,欢迎关注! ????分享 uni-app 默认端口为 8080,与 tomcat 的默认端口冲突。 解决方案一:不推荐 先启动 tomcat,再启动 uni-app 端口会自动修改为 ... -
uni-app从入门到一 (二)uni-app脚手架搭建项目
2020-07-03 00:26:08uni-app两种开发方式 第一种:使用DCloud公司提供的HbuilderX编辑工具,我们只需要点击基本的创建按钮,就可以创建一个初步项目了 第二种:就是使用uni-app脚手架开快速搭建项目与开发,该方式是使用传统的node... -
uni-app入门教程(1)uni-app简介、部署和目录结构
2020-12-13 11:01:21uni-app是DCloud官方推出的使用Vue.js开发跨平台应用的前端框架,一套代码可编译到iOS、Android、微信小程序等多个平台,学习和开发成本较低。在进行uni-app开发之前需要先搭建环境,下载并安装HBuilderX、微信... -
1.1 uni-app概要【uni-app从入门到精通在线教程-前言(黄菊华-跨平台开发系列教程)】
2020-11-02 09:16:52本章节主要讲解uni-app入门知识,包含:什么是uni-app,如何安装uni-app开发工具HbuilderX,如何快速上手开发uni-app,如何发布,uni-app框架和配置的基础知识,uni-app常用语法知识,uni-app和后端你交互的JSON数据...