-
uni-app uni-app简介
2020-07-20 23:53:11 -
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的学习路线及重要知识点!
2019-05-08 11:53:50uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手...uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手uni-app。
uni-app使用的是vuejs的语法,所以会vuejs的朋友就可以跳过学习语法这一步了,还不会vuejs的朋友也不要紧,可以先去vue官方文档看看,vue的文档可以说非常通俗易懂了,如果你有遇到前端方面的问题或者需要一些前端学习资料可以加q群:682783851。下面就假设大家都会vuejs了。
首先,我们已经知道uni-app是用来制作一个跨平台应用的,所以,在开始之前,我们一定要知道uni-app是如何打包到多个平台的,使用uni-app开发,我这里是建议大家使用官方的开发者工具的,官方工具也非常好用,对于一些配置项非常方便,可以省去很多麻烦,使用开发者工具我们就知道了,uni-app跨平台都是开发者工具来完成编译的。
那么对于多个平台,是不是只需要看一端就行了呢?答案是否定的,uni-app对百分之90的样式是完全跨平台的,对于一些特殊的,因为每个平台要求不一样,所以我们要使用条件编译来做适配,另外对于一些第三方授权登录或者支付功能每个平台也有所不同。这里我们注意要使用条件编译,重要点是一定要注意每个平台对组件或接口的兼容性。
另外,需要注意的是uni-app中对vue语法的兼容性,使用 Vue.js 注意事项
了解上面的两点之后,我们就可以开始创建一个项目了,打开hbuilder X,左上角文件-新建-项目,可以选择uni-app的模板学习一下,看看uni-app的目录结构如何,下面是【购靓号】项目的目录结构下面目录说明好好看一下
common 是存放公共js和css的目录,大家可以把一些工具js或者公共的css放这里面
components是放组件的目录,我们所有的组件都可以放这里面,记住组件里面不能使用uni-app页面钩子函数
pages 是uni-app放页面的文件夹,我们每次在这里面新建一个页面,hbuilder X都会在pages.json里面配置好。
static 是存放字体或图片的文件夹,一些静态资源都可以放这里面
store 是vuex状态管理,因为uni-app项目内置vuex所以直接在main.js里面配置一下就可以使用了
subpages 是因为内容过多,分的包,这里面新建的页面pages.json里面不会自动生成对应配置项
subpagesA 也是分的包,因为小程序限制,所以建议大家在一开始就考虑分包情况。免得后面又要整理
unpackage 里面的打包后的东西,我们可以不用管,h5打包后会放在这个里面的dist/build/h5里面
App.vue 可以说是入口文件,我们公共的css可以放这里面,应用启动需要做的事情也可以放这里面,但是这个里面是不能进行页面跳转的
main.js 是入口js文件,跟vue脚手架一样的,我们可以引入全局js,配置一些全局js函数等都可以在这里操作
manifest.json是uni-app的配置项,一般都是可视化配置,很少用到源码配置,大家基本看一看就知道了,不知道的加QQ群私聊群主:682783851
pages.json 就是页面配置文件了,你写的每一个页面都要在这里面配置,每个页面一些的特殊配置项也是在这里面写,uni-app pages配置项
uni.scss 是uni-app的样式包,大家随意放这个时候我们就可以开始开发页面了,直接在pages文件夹上右键就可以新建页面了,每一个页面都是vue文件,结构跟我们使用vue脚手架一样,写起来还是很舒服呀!
上面是一个大概的讲述,具体的学习路线还是要依赖官方文档,大家可以根据下面流程学习一定要注意每个组件和接口在平台的支持情况。
官方文档非常详细,我们无需依赖其他书籍,有问题可以加QQ群,里面有很多学习资料,也可以提资源需求,还可以私聊群主解决问题,群主就是我,哈哈哈。
另外,想看看uni-app做出来的跨平台应用是什么体验的小伙伴,可以看下面了,体验一下中大型项目的感觉,包含登录支付功能,还可以分享。下面是【购靓号】平台的跨平台应用,PC端可访问购靓号 或复制打开链接https://www.golianghao.com。手机端可扫码体验
-
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-custom-navigation- 这是一个基于uni-app的头部自定义导航栏,采用的技术:微信小程序API,结合Vue语法实现;自定义导航进行了封装,任何页面随时都可以引入,并且可通过条件控制进行所需展示与隐藏的。以上...
-
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项目
2021-01-05 11:06:04uni-app开发环境搭建(推荐编辑器) uni-app环境配置 插件安装(安装自己需要的就行) 创建uni-app项目 在点击工具栏里的文件 -> 新建 -> 项目: 选择uni-app类型,输入工程名,选择模板,点击创建... -
uni-app
2020-06-23 15:54:34uni-app 生命周期 应用生命周期 函数名 说明 onlaunch 当uni-app初始化完成时触发(全局只触发一次) onShow 当uni-app启动,或从后台进入前台显示 onHide 当uni-app从前台进入后台 onError 当uni-app... -
uni-app开发环境搭建&创建uni-app项目
2019-08-22 13:07:40本文是关于使用uni-app的第一次笔记,至于有没有第二次,看我接下来的心情了!本文首先教你如何搭建uni-app开发环境,然后创建uni-app项目。 uni-app使用了快半个月了,现在准备来系统的学习一下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判断平台
2020-09-09 09:40:31今天分享下 —— uni-app 系列(十四):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... -
Webstorm 新建 uni-app项目脚本 ------ uni-app.sh
2020-10-04 13:48:02#!/bin/bash case $1 in "install") #安装vue-cli 3.x (如已经安装... #通过cli创建uni-app项目($2是项目名称) vue create -p dcloudio/uni-preset-vue $2 ;; "start") cd ~/Webstorm/$2 yarn serve ;; esac ... -
uni-app系列(十三):uni-app运行环境判断
2020-09-09 09:40:20今天分享下 —— uni-app 系列(十三):uni-app 运行环境判断 的一些基本知识,欢迎关注! 欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路 相关文章:uni-app系列(十四):uni-app判断平台 ????运行环境... -
【uni-app】uni-app基础知识
2020-03-31 17:05:05目录1.uni-app的初体验1.1 开发方式1.2 脚手架搭建项目1.3 搭建过程可能出现的问题2. 项目结构介绍2.1 项目目录 1.uni-app的初体验 1.1 开发方式 使用 DCloud 公司提供的 HBuilderX 来快速开发 使用脚手架来快速... -
uni-app---使用uni-app运行到微信开发者工具报错
2020-10-26 10:58:01使用uni-app运行到微信开发者工具(快捷键【Ctrl+R】)报错。 图中已提示错误原因为:服务端口已关闭,需要开启,开启方式如下: -
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... -
【uni-app】uni-app移动端开发 - 登录界面
2020-09-27 15:13:15本次通过完成一个登录界面,来学会uni-app 框架的使用,以及开发过程需要注意的点,还有难以排查出来且又找不到资料的一些坑,总有一些你需要的信息,接下来先明确登录界面的基本需求。 登录界面是再简单不过的界面... -
UNI-APP_uni-app input监听回车键
2020-12-10 23:49:06uni-app是基于vue的,所以,在一开始要实现按下键盘的enter键,使用了如下的方法: <input type="search" @keydown.enter="doSearch"> 生成小程序后,发现并没有用,一番百度,才知道uni-app运行在手机端,... -
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的学习路线及知识点
2019-10-29 15:39:44uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手... -
UNI-APP 编译错误 uni-app Error: Cannot find module 'node-ipc'
2020-04-17 13:47:51升级了HX的版本后uni-app编译报错,之前是不会存在这个问题的,插件已经安装。依然保错。 我的处理方式是在插件中将uni-app编译 卸载后再重新安装。 卸载重装以后,再次编译APP即可成功编译。 ...
-
CA53 pipeline ordering and memory ordering
-
22. 括号生成
-
Qt自定义结构序列化
-
T+V15专属云高发问题处理
-
Go-sdk1.13.12-csdn高速下载
-
rabbitmq-server-3.8.9.exe
-
可扩展、高性能、响应迅速的API网关——Soul(四)
-
MATLAB基础知识学习笔记:01 基础操作与矩阵输入
-
安卓app逆向破解脱壳教程
-
uni-app实战专题
-
ant design pro V5 (for react)修改缺省的端口8000为9090
-
PVE安装笔记
-
第3章 入门程序、常量、变量
-
Unity游戏开发之数字华容道
-
AgileOne1.1正式版
-
otp_win64_23.2.exe
-
RestAPI.rar
-
Redis数据库入门与使用
-
A算法求解八数码难题.pdf
-
机器学习学习笔记(一)分类模型的评估