精华内容
参与话题
问答
  • uni-app uni-app简介

    2020-07-20 23:53:11
    uni-app uni-app简介uni-app简介简介功能框架 uni-app简介 简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/...

    uni-app uni-app简介

    uni-app简介

    简介

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

    功能框架

    在这里插入图片描述

    展开全文
  • uni-app uni-app创建和运行uni-app创建和运行1. 通过 HBuilderX 可视化界面创建uni-app运行uni-app2. 通过vue-cli命令行环境安装创建uni-app运行、发布uni-app3. 使用cli创建项目和使用HBuilderX可视化界面创建项目...

    uni-app创建和运行

    uni-app支持通过 HBuilderX 可视化界面、vue-cli命令行 两种方式快速创建项目。

    1. 通过 HBuilderX 可视化界面

    创建uni-app

    在这里插入图片描述

    在这里插入图片描述

    uni-app自带的模板有 Hello uni-app ,是官方的组件和API示例。还有一个重要模板是 uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。

    运行uni-app
    1. 浏览器运行
      在这里插入图片描述

    2. 真机运行
      在这里插入图片描述

    3. 小程序运行
      在这里插入图片描述

    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是一个使用 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脚手架一样,写起来还是很舒服呀!
    上面是一个大概的讲述,具体的学习路线还是要依赖官方文档,大家可以根据下面流程学习

    uni-app介绍
    uni-app组件
    uni-app配置
    uni-app接口
    一定要注意每个组件和接口在平台的支持情况。

    官方文档非常详细,我们无需依赖其他书籍,有问题可以加QQ群,里面有很多学习资料,也可以提资源需求,还可以私聊群主解决问题,群主就是我,哈哈哈。
    另外,想看看uni-app做出来的跨平台应用是什么体验的小伙伴,可以看下面了,体验一下中大型项目的感觉,包含登录支付功能,还可以分享

    下面是【购靓号】平台的跨平台应用,PC端可访问购靓号 或复制打开链接https://www.golianghao.com。手机端可扫码体验
    展开全文
  • uni-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 中的 divpspan 等标签的作用一样,用于搭建页面的基础结构

    text文本组件的用法
    001 - text 组件的属性
    属性 类型 默认值 必填 说明
    selectable boolean false 文本是否可选
    space string . 显示连续空格,可选参数:enspemspnbsp
    decode boolean false 是否解码
    • text 组件相当于行内标签、在同一行显示
    • 除了文本节点以外的其他节点都无法长按选中
    展开全文
  • uni-app-custom-navigation- 这是一个基于uni-app的头部自定义导航栏,采用的技术:微信小程序API,结合Vue语法实现;自定义导航进行了封装,任何页面随时都可以引入,并且可通过条件控制进行所需展示与隐藏的。以上...
  • uni-app学习笔记——uni-app资源

    千次阅读 2019-06-28 15:27:22
    uni-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项目 在点击工具栏里的文件 -> 新建 -> 项目: 选择uni-app类型,输入工程名,选择模板,点击创建...
  • uni-app

    千次阅读 2020-06-23 15:54:34
    uni-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:46
    uni-app是一套可以适用多端的开源框架,一套代码可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序等。 优点二: uni-app对前端开发人员比较友好,学习成本比较低,首先uni-app是基于vue.js的。...
  • 今天分享下 —— uni-app 系列(十四):uni-app 判断平台 的一些基本知识,欢迎关注! 欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路 相关文章:uni-app系列(十三):uni-app运行环境判断 ????uni-app ...
  • 今天分享下 —— uni-app 系列(十一):uni-app 使用 vuex 缓存 的一些基本知识,欢迎关注! 欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路 相关文章:uni-app系列(七):HBuilderx使用Git插件配置并上传...
  • uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。 uni-app 继承自 Vue.js...
  • #!/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 运行环境判断 的一些基本知识,欢迎关注! 欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路 相关文章:uni-app系列(十四):uni-app判断平台 ????运行环境...
  • 目录1.uni-app的初体验1.1 开发方式1.2 脚手架搭建项目1.3 搭建过程可能出现的问题2. 项目结构介绍2.1 项目目录 1.uni-app的初体验 1.1 开发方式 使用 DCloud 公司提供的 HBuilderX 来快速开发 使用脚手架来快速...
  • 使用uni-app运行到微信开发者工具(快捷键【Ctrl+R】)报错。 图中已提示错误原因为:服务端口已关闭,需要开启,开启方式如下:
  • 上一篇我们讲了uni-app的各种优缺点,接下来我们要讲一下uni-app的开发流程和一些常用组件。此篇文章为uni-app基础篇,如果你是uni-app开发大神可以忽略此篇文章,当然如果您发现了文章的不足也请您不吝指出。 一:...
  • 前一段时间用framework7+cordova做了2个app,后面因为甲方公司要求采用uni-app开发了2个app。如果还在徘徊选择什么框架的话,我果断推荐使用uni-app。 对比下uni-app与framework7+cordova的优缺点: framework7比uni...
  • 本次通过完成一个登录界面,来学会uni-app 框架的使用,以及开发过程需要注意的点,还有难以排查出来且又找不到资料的一些坑,总有一些你需要的信息,接下来先明确登录界面的基本需求。 登录界面是再简单不过的界面...
  • uni-app是基于vue的,所以,在一开始要实现按下键盘的enter键,使用了如下的方法: <input type="search" @keydown.enter="doSearch"> 生成小程序后,发现并没有用,一番百度,才知道uni-app运行在手机端,...
  • 1.uni-app的云函数的数据库操作 'use strict'; const db = uniCloud.database() exports.main = async (event, context) => { //event为客户端上传的参数 // context包含了调用信息和运行状态,每次调用的上...
  • 在学习uni-app之前最好有vue和微信小程序的基础,因为uni-app是一个跨平台的开发框架,它里面不少语法是结合vue和小程序中的语法来写的。 因为本人在学习之前有使用过vue-cli来创建项目,在这里直接使用vue-cli3来...
  • uni-app 的事件处理器 几乎全支持Vue官方文档:事件处理器 // 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件 { click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel:...
  • 1.uni-app的云函数的数据库操作 1.这个是写的云函数里面的 ‘use strict’; const db = uniCloud.database() exports.main = async (event, context) => { //event为客户端上传的参数 // context包含了调用信息和...
  • Uni-app快速入门
  • 今天分享下 —— uni-app 系列(十五):uni-app uni-app使用讯飞语音开启App端语音转文字 的一些基本知识,欢迎关注! 欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路 相关文章:uni-app系列(十三):uni-...
  • uni-app爬坑,uni-app修改内部css在h5生效,app上面不生效 #解决办法 修改内部css时将uni-改为wx-(比如说内部样式为uni-checkbox-input改为wx-checkbox-input)
  • uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手...
  • 升级了HX的版本后uni-app编译报错,之前是不会存在这个问题的,插件已经安装。依然保错。 我的处理方式是在插件中将uni-app编译 卸载后再重新安装。 卸载重装以后,再次编译APP即可成功编译。 ...

空空如也

1 2 3 4 5 ... 20
收藏数 14,524
精华内容 5,809
关键字:

uni-app