精华内容
下载资源
问答
  • uni-app uni-app创建和运行

    千次阅读 2020-07-20 23:56:10
    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项目路径介绍 介绍项目目录和文件作用 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开发环境搭建(推荐编辑器) uni-app环境配置 插件安装(安装自己需要的就行) 创建uni-app项目 在点击工具栏里的文件 -> 新建 -> 项目: 选择uni-app类型,输入工程名,选择模板,点击创建...
    • uni-app开发环境搭建(推荐编辑器)

    在这里插入图片描述

    • uni-app环境配置

      • 插件安装(安装自己需要的就行)

      在这里插入图片描述

      在这里插入图片描述

    创建uni-app项目

    在点击工具栏里的文件 -> 新建 -> 项目:

    img

    选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。

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

    在这里插入图片描述

    展开全文
  • 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资源

    1. uni-app组件、插件、模块到插件市场查看

    2. 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

    3. uni-app 支持离线打包,详细参考相关文档 :
      uni-app 案例:https://uniapp.dcloud.io/case

    4. uni-app导航栏文档和注意事项

    5. 导航栏开发指南

    6. uni-app 升级检测

    展开全文
  • uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手...
  • uni-app

    千次阅读 2020-06-23 15:54:34
    uni-app 生命周期 应用生命周期 函数名 说明 onlaunch 当uni-app初始化完成时触发(全局只触发一次) onShow 当uni-app启动,或从后台进入前台显示 onHide 当uni-app从前台进入后台 onError 当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项目

    千次阅读 2019-08-22 13:07:40
    本文是关于使用uni-app的第一次笔记,至于有没有第二次,看我接下来的心情了!本文首先教你如何搭建uni-app开发环境,然后创建uni-app项目。 uni-app使用了快半个月了,现在准备来系统的学习一下uni-app,并做一些...
  • 今天分享下 —— uni-app 系列(十四):uni-app 判断平台 的一些基本知识,欢迎关注! 欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路 相关文章:uni-app系列(十三):uni-app运行环境判断 ????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...
  • UNI-APP_uni-app input监听回车键

    千次阅读 2020-12-10 23:49:06
    uni-app是基于vue的,所以,在一开始要实现按下键盘的enter键,使用了如下的方法: <input type="search" @keydown.enter="doSearch"> 生成小程序后,发现并没有用,一番百度,才知道uni-app运行在手机端,...
  • 使用uni-app运行到微信开发者工具(快捷键【Ctrl+R】)报错。 图中已提示错误原因为:服务端口已关闭,需要开启,开启方式如下:
  • 本次通过完成一个登录界面,来学会uni-app 框架的使用,以及开发过程需要注意的点,还有难以排查出来且又找不到资料的一些坑,总有一些你需要的信息,接下来先明确登录界面的基本需求。 登录界面是再简单不过的界面...
  • 上一篇我们讲了uni-app的各种优缺点,接下来我们要讲一下uni-app的开发流程和一些常用组件。此篇文章为uni-app基础篇,如果你是uni-app开发大神可以忽略此篇文章,当然如果您发现了文章的不足也请您不吝指出。 一:...
  • 前一段时间用framework7+cordova做了2个app,后面因为甲方公司要求采用uni-app开发了2个app。如果还在徘徊选择什么框架的话,我果断推荐使用uni-app。 对比下uni-app与framework7+cordova的优缺点: framework7比uni...
  • 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)
  • 升级了HX的版本后uni-app编译报错,之前是不会存在这个问题的,插件已经安装。依然保错。 我的处理方式是在插件中将uni-app编译 卸载后再重新安装。 卸载重装以后,再次编译APP即可成功编译。 ...
  • 今天分享下 —— uni-app 如何修改默认端口 的一些基本知识,欢迎关注! ????分享 uni-app 默认端口为 8080,与 tomcat 的默认端口冲突。 解决方案一:不推荐 先启动 tomcat,再启动 uni-app 端口会自动修改为 ...
  • uni-app两种开发方式 第一种:使用DCloud公司提供的HbuilderX编辑工具,我们只需要点击基本的创建按钮,就可以创建一个初步项目了 第二种:就是使用uni-app脚手架开快速搭建项目与开发,该方式是使用传统的node...
  • uni-app是DCloud官方推出的使用Vue.js开发跨平台应用的前端框架,一套代码可编译到iOS、Android、微信小程序等多个平台,学习和开发成本较低。在进行uni-app开发之前需要先搭建环境,下载并安装HBuilderX、微信...
  • 本章节主要讲解uni-app入门知识,包含:什么是uni-app,如何安装uni-app开发工具HbuilderX,如何快速上手开发uni-app,如何发布,uni-app框架和配置的基础知识,uni-app常用语法知识,uni-app和后端你交互的JSON数据...

空空如也

空空如也

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

uni-app