技术标签: 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 的条件编译来更好地实现。这样,就不会在其它平台产生多余的资源,进而减小包体积。
文章浏览阅读956次,点赞3次,收藏5次。编程过程中,一般c#调用非托管的代码有两种方式:1.直接调用从DLL中导出的函数。2.调用COM对象上的接口方法。首先说明第1种方式,基本步骤如下:1.使用关键字static,extern声明需要导出的函数。2.把DllImport 属性附加到函数上。3.掌握常用的数据类型传递的对应关系。4.如果需要,为函数的参数和返回值指定自定义数据封送处理信息,这将重写.net framework默认的封送处理。简单举例如下:托管函数原型:DWORD GetShortPathName(LPCTST_c# 声明kernel32 函数
文章浏览阅读406次。转 高频交易及量化投资的策略与误区一、高频交易公司和量化投资公司的区别一般来说,高频交易公司和量化投资公司既有联系,又有区别。在美国,人们常说的高频交易公司一般都是自营交易公司,这些公司主要有Getco、Tower Research、Hudson River Trading、SIG、Virtu Financial、Jump Trading、RGM Advisor、Chopper Tradi..._hudson river trading
文章浏览阅读865次。文件的打开和关闭文件在读写之前应该先打开文件,在使用结束之后应该关闭文件。在编写程序的时候,在打开文件的同时,都会返回一个FILE*的指针变量指向该文件,也相当于建立了指针和文件 的关系。ANSIC 规定使用fopen函数来打开文件,fclose来关闭文件。FILE * fopen ( const char * filename, const char * mode ); int fcl..._c语言与文件处理有关的函数
文章浏览阅读1.1k次。从来没见过进行文件读取写入时,在写入中需要随机数的,你读取文件就是从一个地方获取输入流,然后将这个输入流写到别的地方,根本不要随机数。给你一个示例://copyafiletoanotherfilebyusingFileReader/FileWriterimportjava.io.*;publicclassTFileRead{publicstaticvoidmain(S..._java复制文件文件没有内容显示
文章浏览阅读556次,点赞2次,收藏3次。由于工作上的需要,今天捣鼓了半天高德地图。如果定制化开发需求不太高的话,可以用vue-amap,这个我就不多说了,详细就看官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install然而我们公司需要英文版的高德,我看vue-amap中好像没有这方面的配置,而且还有一些其他的定制化开发需求,然后就只用原生的高德。其实原生的引入也不复杂,但是有几个坑要填一下。1. index.html注意,引入的高德js一定要放在头部而_前端引入原生地图
文章浏览阅读104次。本文介绍ViewGroup重写,我们所熟知的LinearLayout,RelativeLayout,FrameLayout等等,所有的容器类都是ViewGroup的子类,ViewGroup又继承View。我们在熟练应用这些现成的系统布局的时候可能有时候就不能满足我们自己的需求了,这是我们就要自己重写一个容器来实现效果。ViewGroup重写可以达到各种效果,下面写一个简单的重写一个Vi..._viewgroup 重写
文章浏览阅读197次。面向对象的习题课类的定义员工类Employee求和类Sum类与对象书籍类BookBook类的测试类BookTest异常能扩容的MyList类剪刀石头布转载请注明出处在这一讲中我会给出一些关于面向对象部分的习题,同样希望在不看答案的情况下自己编写,即使看过了答案,也要能够在不看答案的情况下写出来。类的定义员工类Employee定义在同一个公司工作的Employee类,要求其中含有属性:员工的名字,员工的年龄,员工的爱好,员工的公司名(注意当公司更名时,所有员工的公司名都需要更名),工作地点默认为中国(_编写一个测试类booktest,创建几个book对象,并打印它们的字符串表示,同时判断
文章浏览阅读6.7k次,点赞7次,收藏14次。一、伪分布安装Spark安装环境:Ubuntu 14.04 LTS 64位+Hadoop2.7.2+Spark2.0.0+jdk1.7.0_761、安装jdk1.7(1)下载jdk-7u76-linux-x64.tar.gz;(2)解压jdk-7u76-linux-x64.tar.gz,并将其移动到/opt/java/jdk路径下(自建);命令:tar -zxvf jdk-_下载spark的hadoop依赖
文章浏览阅读6.7k次。计算机通信协议计算机通信协议是对那些计算机必须遵守以便彼此通信的规则的描述。什么是 TCP/IP?TCP/IP 是供已连接因特网的计算机进行通信的通信协议。TCP/IP 指传输控制协议/网际协议 (Transmission Control Protocol / Internet Protocol)。TCP/IP 定义了电子设备(比如计算机)如何连入因特网,以及数据如何在它们之间传输的标准..._广泛应用在internet中的tcp/ip的网络管理主要使用的是 ____协议。 (填空题)
文章浏览阅读360次。转自:落尘曦的博客:http://blog.csdn.net/qq_23994787 原文链接:https://blog.csdn.net/qq_23994787/article/details/77951244#_Toc9101经典算法的Java实现(1)河内塔问题: 42(2)费式数列 43(3)巴斯卡(Pascal)三角形 44(4)蒙地卡罗法求 PI 45(..._java中temsize+=1运算
文章浏览阅读3.1k次,点赞6次,收藏27次。第一章Q1 简述Linux系统的应用领域 Linux服务器;嵌入式Linux系统;软件开发平台;桌面应用Q2 简述Linux系统的特点 开放性、多用户、多任务、良好的用户界面、设备独立性、丰富的网络功能、可靠的系统安全、良好的可移植性Q3 简述Linux系统的组成 内核、shell、文件系统、应用程序Q4 简述主流的Linux发行版本 Redhat SUSE Oracle CentOS Ubuntu Debian Mandriva Gentoo Slackware Fe_linux中,第一个普通用户的uid为____。
文章浏览阅读183次。粒子群算法新型概率密度无人机作战路径规划完整的代码,方可运行;可提供运行操作视频!适合小白!_已知目标出现概率热图matlab无人机路径规划