技术标签: web app ui Vue 前端 小程序 javascript
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS,Android,H5,以及各种小程序(微信/支付宝/百度/头条/ QQ /钉钉)等多个平台
通过HBuilderX可视化界面,HBuilderX内置相关环境,开箱即用,无需配置nodejs
开始之前,开发者需先下载安装如下工具:
下载App开发版,可开箱即用;如下载标准版,在运行或发行uni-app时,会提示安装uni-app插件,插件下载完成后方可使用。
如使用cli方式创建项目,可直接下载标准版,因为uni-app编译插件被安装到项目下了
在点击工具栏里的文件->新建->项目:
选择uni-app类型,输入项目名,选择模板,点击创建,即可成功创建。
uni-app自带的模板有。Hello uni-app,是官方的组件和API示例。还有一个重要模板是uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。
提示
运行的快捷键是Ctrl+r。HBuilderX还提供了快捷运行菜单,可以按数字快速选择要运行的设备:
一个 uni-app 工程,默认包含如下目录及文件:
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录,详见
├─platforms 存放各平台专用页面的目录,详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录,详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
下载手机模拟器
MUMU模拟器:https://mumu.163.com/
模拟器端口:
手机模拟器的名称 | 默认端口号 |
Genymotion模拟器 | 5555 |
夜神模拟器 | 62001/52001 |
海马玩模拟器 | 26944 |
mumu模拟器 | 7555 |
天天模拟器 | 6555 |
逍遥安卓模拟器 | 21503 |
BlueStacks 蓝叠3模拟器 | 5555 |
雷神安卓模拟器 | 5555 |
腾讯手游助手 | 5555 |
uni-app 支持如下应用生命周期函数:
函数名 | 说明 |
---|---|
onLaunch | 当uni-app 初始化完成时触发(局部只触发一次) |
onShow | 当uni-app 启动,或从后台进入前台显示 |
onHide | 当uni-app 从前台进入后台 |
onError | 当uni-app 报错时触发 |
onUniNViewMessage | 对nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯 |
onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数(2.8.1+) |
onPageNotFound | 页面不存在监听函数 |
onThemeChange | 监听系统主题变化 |
注意:应用生命周期仅可在 App.vue 中监听,在其他页面监听无效
uni-app 支持如下页面生命周期函数:
函数名 | 说明 | 平台差异说明 | 最低版本 |
---|---|---|---|
onInit | 监听页面初始化,其参数通onLoad参数,为上个页面传递的数据,参数类型为Object(用于页面传参),触发时机早于onLoad | 百度小程序 | 3.1.0+ |
onLoad | 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参) | ||
onShow | 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回进入当前页面 | ||
onReady | 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 | ||
onHide | 监听页面隐藏 | ||
onUnload | 监听页面卸载 | ||
onResize | 监听窗口尺寸变化 | App,微信小程序 | |
onPullDownRefresh | 监听用户拖动动作,一般用于拖动刷新,参考示例 | ||
onReachBottom | 页面上拉触底事件的处理函数 | ||
onTabItemTap | 单击选项卡时触发,参数为对象,具体见以下注意事项 | 微信小程序,百度小程序,H5,App(自定义组件模式) | |
onShareAppMessage | 用户点击右上角分享 | 微信小程序,百度小程序,字节跳动小程序,支付宝小程序 | |
onPageScroll | 监听页面滚动,参数为对象 | nvue 暂不支持 | |
onNavigationBarButtonTap | 监听原生标题栏按钮点击事件,参数为对象 | 5+ App,H5 | |
onBackPress | 监听页面返回,返回事件= {from:backbutton,navigationBack},backbutton 表示来源是左上角返回按钮或android 返回键; navigateBack 表示来源是 uni.navigateBack;详细说明及使用:onBackPress 详解。支付宝小程序只有真机能触发,只能监听非 navigateBack 引起的返回,不可阻止默认行为。 | App,H5、支付宝小程序 | |
onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 | App,H5 | 1.6.0 |
onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。 | App,H5 | 1.6.0 |
onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件 | App,H5 | 1.6.0 |
onShareTimeline | 监听用户点击右上角转发到朋友去 | 微信小程序 | 2.8.1+ |
onAddToFavorites | 监听用户点击右上角收藏 | 微信小程序 | 2.8.1+ |
onInit使用注意
uni-app
组件支持的生命周期,与 vue 标准组件的生命周期相同。这里没有页面级的 onLoad 等生命周期:
函数名 | 说明 | 平台差异说明 | 最低版本 |
---|---|---|---|
beforeCreate | 在实例初始化之后被调用。详见 | ||
created | 在实例创建完成后被立即调用。详见 | ||
beforeMount | 在挂载开始之前被调用。详见 | ||
mounted | 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick Vue官方文档 |
||
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见 | 仅 H5 平台支持 | |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见 | 仅 H5 平台支持 | |
beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用。详见 | ||
destroyed | Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见 |
uni-app页面路由为框架统一管理,需要在pages.json里配置每个路由页面的路径和页面样式。类似的小程序在app.json中配置页面路由相同
框架以栈的形式管理当前所有页面,当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 | 触发时机 |
---|---|---|
初始化 | 新页面入栈 | uni-app:的第一个页面 |
新页面 | 新页面入栈 | 调用API uni.navigateTo ,使用组件 <navigator open-type =“ navigate” /> |
页面重启 | 当前页面出栈,新页面入栈 | 调用API uni.redirectTo ,使用组件 <navigator open-type =“ redirectTo” /> |
页面返回 | 页面不断出栈,直到目标返回页 | 调用API uni.navigateBack ,使用组件 <navigator open-type =“ navigateBack” /> ,用户按左上角返回按钮,安卓用户点击物理后退键 |
标签切换 | 页面全部出栈,只留下新的标签页面 | 调用API uni.switchTab ,使用组件 <navigator open-type =“ switchTab” /> ,用户切换Tab |
重加载 | 页面全部出栈,只留下新的页面 | 调用API uni.reLaunch ,使用组件 <navigator open-type =“ reLaunch” /> |
平台判断有2种场景,一种是在编译期判断,一种是在运行期判断。
// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
default:
console.log('运行在开发者工具上')
break;
}
uni-app 支持的通用 css 单位包括 px、rpx
vue页面支持普通H5单位,但在nvue里不支持:
nvue还不支持百分比单位。
App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px。注意此时不支持 rpx
nvue中,uni-app 模式(nvue 不同编译模式介绍)可以使用 px 、rpx,表现与 vue 中一致。weex 模式目前遵循weex的单位,它的单位比较特殊:
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
<style>
@import "../../common/uni.css";
.uni-card {
box-shadow: none;
}
</style>
框架组件上支持使用 style、class 属性来控制组件的样式。
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有 class=“intro” 的组件 |
#id | #firstname | 选择拥有 id=“firstname” 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容,仅微信小程序和App生效 |
::before | view::before | 在 view 组件前边插入内容,仅微信小程序和App生效 |
注意:
定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。
注意:
uni-app 支持使用在 css 里设置背景图片,使用方式与普通 web 项目大体相同,但需要注意以下几点:
注意
uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:
nvue中不可直接使用css的方式引入字体文件,需要使用以下方式在js内引入。nvue内不支持本地路径引入字体,请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。
var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "fontFamilyName",
'src': "url('https://...')"
})
示例:
<template>
<view>
<view>
<text class="test"></text>
<text class="test"></text>
<text class="test"></text>
</view>
</view>
</template>
<style>
@font-face {
font-family: 'iconfont';
src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
}
.test {
font-family: iconfont;
margin-left: 20rpx;
}
</style>
<template/>
和<block/>
uni-app 支持在 template 模板中嵌套 和 ,用来进行 列表渲染 和 条件渲染。
和 并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
代码示例
<template>
<view>
<template v-if="test">
<view>test 为 true 时显示</view>
</template>
<template v-else>
<view>test 为 false 时显示</view>
</template>
</view>
</template>
<template>
<view>
<block v-for="(item,index) in list" :key="index">
<view>{
{
item}} - {
{
index}}</view>
</block>
</view>
</template>
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
条件编译写法 | 说明 |
---|---|
#ifdef APP-PLUS 需条件编译的代码 #endif | 仅出现在 App 平台下的代码 |
#ifndef H5 需条件编译的代码 #endif | 除了 H5 平台,其它平台均存在的代码 |
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif | 在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集) |
%PLATFORM% 可取值如下:
值 | 平台 |
---|---|
APP-PLUS | App |
APP-PLUS-NVUE | App nvue |
H5 | H5 |
MP-WEIXIN | 微信小程序 |
MP-ALIPAY | 支付宝小程序 |
MP-BAIDU | 百度小程序 |
MP-TOUTIAO | 字节跳动小程序 |
MP-QQ | QQ小程序 |
MP | 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序 |
支持的文件
注意: 条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 ;
// #ifdef %PLATFORM%
平台特有的API实现
// #endif
示例,如下代码仅在 App 下出现:
示例,如下代码不会在 H5 平台上出现:
除了支持单个平台的条件编译外,还支持多平台同时编译,使用 || 来分隔平台名称。
示例,如下代码会在 App 和 H5 平台上出现:
<!-- #ifdef %PLATFORM% -->
平台特有的组件
<!-- #endif -->
示例,如下广告组件仅会在微信小程序中出现:
/* #ifdef %PLATFORM% */
平台特有样式
/* #endif */
注意: 样式的条件编译,无论是 css 还是 sass/scss/less/stylus 等预编译语言中,必须使用 /注释/ 的写法。
正确写法
错误写法
下面的页面,只有运行至 App 时才会编译进去。
不同平台下的特有功能,以及小程序平台的分包,都可以通过 pages.json 的条件编译来更好地实现。这样,就不会在其它平台产生多余的资源,进而减小包体积。
文章浏览阅读496次。存档日期:2019年5月15日 | 首次发布:2002年9月10日 在本月的Demystifying Extreme Programming中 ,Roy Miller解释了成为XP团队的程序员意味着什么,以及六个程序员的实践如何特别适合这种情况。 虽然所有19种XP实践都很重要,但程序员实践对于团队开发软件至关重要 。 此内容不再被更新或维护。 全文以PDF格式“按原样”提供。 随着技..._解开均线系统的神秘面纱
文章浏览阅读5k次,点赞2次,收藏15次。1,查看是否已安装openssh-server;指令:rpm -qa | grep ssh2,如果未安装,请先安装openssh-serveryum install openssh-server3,编辑ssh参数:vim /etc/ssh/sshd_config修改端口号允许root登录设置需要密码登录修改好后输入“:wqa”保存退出4,开启ss..._centos7.5开启ssh
文章浏览阅读1.2k次,点赞4次,收藏7次。文章目录前言二、地址https://curl.trillworks.com/三、用法3.1这里以有道翻译为例,右键链接>copy>copy as curl(bash)3.2 黏贴到上面的网站,右侧方框会自动填充requests请求总结前言我们在编写爬虫代码的时候,都需要去请求链接,有事还需要一连串的参数,这时候我们是不可能一个一个手打上去的,这次就分享一个快速解析请求的小工具二、地址https://curl.trillworks.com/三、用法3.1这里以有道翻译为例,右键._trillworks
文章浏览阅读1.5w次,点赞16次,收藏88次。 C++——多项式拟合目标:利用C++对txt或者xml中的数据,进行高阶或低阶多项式拟合 为方便以后查找,代码以及详细资料已打包,并上传至云盘(链接:https://pan.baidu.com/s/1bvUBIoxv7Avxeq_Cz6xOZQ 密码:u9qe)打包的内容如下: ..._c++ 多项式拟合
文章浏览阅读204次。互联网时代,一切都有了新玩法。以吃为例,从古至今中国人对“吃”的热爱都没有变过,在现今如何吃的健康、营养为国人新追求,有机蔬菜、无农药水果成为时下新宠。同时,随着国内物流体系的完善,运输技术的提高,农产品正成为新风口。就在今年3月1日,由国家发改委牵头、24部委联合发布的《关于推动物流高质量发展促进形成强大国内市场的意见》中明确指出,要加强农产品物流骨干网络和冷链物流体系建设,发展如“生鲜电..._顺丰冷链物流基础设施落后
文章浏览阅读6.8k次,点赞8次,收藏67次。Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试。在IDEA的基础上,Android Studio 提供: 1.基于Gradle的构建支持。 2.Android 专属的重构和快速修复。 3. 提示工具以捕获性能、可用性、版本兼容性等问题。 4.支持ProGuard和应用签名。 5.基于模板的向导来生成常用的Android_andriodstudio的构建在哪
文章浏览阅读3.2w次,点赞94次,收藏554次。基础电路一般直流稳压电源都使用220伏市电作为电源,经过变压、整流、滤波后输送给稳压电路进行稳压,最终成为稳定的直流电源。这个过程中的变压、整流、滤波等电路可以看作直流稳压电源的基础电路,没有这些电路对市电的前期处理,稳压电路将无法正常工作。1、变压电路通常直流稳压电源使用电源变压器来改变输入到后级电路的电压。电源变压器由初级绕组、次级绕组和铁芯组成。初级绕组用来输入电源交流电压,次级绕组输出所需..._高频正弦波整流纹波尖峰
文章浏览阅读1.4k次,点赞2次,收藏7次。CPU 性能分析器可以在APP运行时,实时检查应用的 CPU 使用率和线程活动,也可以检查记录的方法轨迹、函数轨迹和系统轨迹的详情。(1)Sample JAVA Methods不能采集耗时很短的方法,而Trace JAVA Methods可以采集耗时很短的方法;_android 性能优化工具
文章浏览阅读5.2k次,点赞8次,收藏41次。需要 演示文档+数据库涉及+需求分析文档和完整源码的,可通过该链接下载https://download.csdn.net/download/Punrain/11980745_java为超市设计管理系统
文章浏览阅读151次。在上篇文章iOS运行时Runtime基础后,本篇将会总结Rutime的具体应用实例,结合其动态特性,Runtime在开发中的应用大致分为以下几个方面:Runtime应用.png相关文章:iOS运行时Runtime基础一、动态方法交换:Method Swizzling实现动态方法交换(Method Swizzling )是Runtime中最具盛名的应用场景,其原理是:通过Runtime获取到方法实现的地址,进而动态交换两个方法的功能。使用到关键方法如下://获取类方法的M.._initwithframe runtime拦截
文章浏览阅读65次。SpringMvc解决跨域问题前言:弄的一个Mvc项目涉及到了跨域问题,以下是我整理的一些解决方法介绍: 跨站 HTTP 请求(Cross-site HTTP request)是指发起请求的资源所在域不同于该请求所指向资源所在的域的 HTTP 请求。比如说,域名A(http://xusong.example)的某 Web 应用程序中通过标签引入了域名B(http://xusong.foo)站点的某图片资源(http://xusong.foo/image.jpg),域名A的那 Web 应用会使浏览器发_20200814_112325010.jpg
文章浏览阅读565次。服务器已购买并创建系统盘的情况下只能同步系统盘,数据盘无法同步。系统盘还未创建的可以同步系统盘和数据盘。4、镜像共享给你要迁移的阿里云服务器的账号上,不是登录账号,是账号ID(个人中心->安全设置->账号ID)3、使用最新的快照生成镜像,镜像是分区域的,华南一只能用华南一的镜像。4、在接收镜像的账号里查看镜像,注意选择正确的区域。2、要迁移的实例创建镜像,创建镜像基于快照。5、创建实例,选择镜像,还是要注意区域。1、先停机维护要迁移的服务器。6、选择共享镜像,更换即可。5、新服务器更换系统盘。_阿里云两个账户的服务器能不能做镜像迁移