uni-app学习

uni-app学习手册

小科普

手机宽度 750rpx 另一种表示方法100VW/VH，相当于100%
动态代码前要加 ’ : ’
/* scoped使样式只在当前页面中使用 */
const _this = this; // 获取固定的this值

生命周期

onLoad

监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）

用法（以下相同）

onLoad() {       // 生命周期，当页面载入时调用...
}

onShow(打开页面)

监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

onReady(监听页面渲染完成)

监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

onHide(页面隐藏/后台)

监听页面隐藏

onUnload

监听页面卸载

onResize

监听窗口尺寸变化

onPullDownRefresh(下拉刷新)

监听用户下拉动作，一般用于下拉刷新

onReachBottom

页面滚动到底部的事件（不是scroll-view滚到底），常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动，则触底事件不会被触发

onTabItemTap

点击 tab 时触发，参数为Object，具体见下方注意事项

onShareAppMessage

用户点击右上角分享

onPageScroll

监听页面滚动，参数为Object

onNavigationBarButtonTap

监听原生标题栏按钮点击事件，参数为Object

onBackPress

监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；

onNavigationBarSearchInputChanged

监听原生标题栏搜索输入框输入内容变化事件

onNavigationBarSearchInputConfirmed

监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发

onNavigationBarSearchInputClicked

监听原生标题栏搜索输入框点击事件

路由与页面跳转

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

参数	类型	必填	默认值	说明
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationType	String	否	pop-in	窗口显示的动画效果，详见：窗口动画
animationDuration	Number	否	300	窗口动画持续时间，单位为 ms
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

exp：

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({    url: 'test?id=1&name=uniapp'
});// 在test.vue页面接受参数
export default {onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数console.log(option.id); //打印出上个页面传递的参数。console.log(option.name); //打印出上个页面传递的参数。}
}

url长度超出限制

url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或encodeURIComponent等多种方式解决，如下为encodeURIComponent示例。

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// 在test.vue页面接受参数
onLoad: function (option) {const item = JSON.parse(decodeURIComponent(option.item));
}

uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

参数	类型	必填	说明
url	String	是	需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

exp：

uni.redirectTo({    url: 'test?id=1'
});

uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

参数	类型	必填	说明
url	String	是	需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，如果跳转的页面路径是 tabBar 页面则不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

参数	类型	必填	说明
url	String	是	需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

pages.json
{"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/other/other","text": "其他"}]}
}other.vue
uni.switchTab({url: '/pages/index/index'
});

uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明

参数	类型	必填	默认值	说明	平台差异说明
delta	Number	否	1	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
animationType	String	否	pop-out	窗口关闭的动画效果，详见：窗口动画	App
animationDuration	Number	否	300	窗口关闭动画的持续时间，单位为 ms	App

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码// 此处是A页面
uni.navigateTo({url: 'B?id=1'
});// 此处是B页面
uni.navigateTo({url: 'C?id=1'
});// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({delta: 2
});

Tips：

交互反馈

uni.showToast(OBJECT)

显示消息提示框。


参数	类型	必填	说明
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标，有效值详见下方说明。
image	String	否	自定义图标的本地路径
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
position	String	否	纯文本轻提示显示位置，填写有效值后只有 `title` 属性生效，有效值详见下方说明。
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数

icon 值说明

值	说明
success	显示成功图标，此时 title 文本最多显示 7 个汉字长度。默认值
loading	显示加载图标，此时 title 文本最多显示 7 个汉字长度。
none	不显示图标，此时 title 文本在`小程序`最多可显示两行，`App`仅支持单行显示。

uni.showToast({title: '标题',duration: 2000
});

position 值说明（仅App生效）

值	说明
top	居上显示
center	居中显示
bottom	居底显示

uni.hideToast()

隐藏消息提示框

uni.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

参数	类型	必填	说明
title	String	是	提示的内容
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.showLoading({title: '加载中'
});

uni.hideLoading()

隐藏 loading 提示框。

uni.showLoading({title: '加载中'
});setTimeout(function () {uni.hideLoading();
}, 2000);

uni.showModal(OBJECT)

显示模态弹窗，类似于标准 html 的消息框：alert、confirm。

参数	类型	必填	说明
title	String	否	提示的标题
content	String	否	提示的内容
showCancel	Boolean	否	是否显示取消按钮，默认为 true
cancelText	String	否	取消按钮的文字，默认为"取消"，最多 4 个字符
cancelColor	HexColor	否	取消按钮的文字颜色，默认为"#000000"
confirmText	String	否	确定按钮的文字，默认为"确定"，最多 4 个字符
confirmColor	HexColor	否	确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#3CC51F"，百度小程序平台默认为"#3c76ff"
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数

success返回参数说明

参数	类型	说明
confirm	Boolean	为 true 时，表示用户点击了确定按钮
cancel	Boolean	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）

在 App 下可以使用原生增强提示框插件来解决 App 无法设置 cancelColor、confirmColor的问题。

示例

uni.showModal({title: '提示',content: '这是一个模态弹窗',success: function (res) {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}
});

uni.showActionSheet(OBJECT) 显示操作菜单

参数	类型	必填	说明
itemList	Array	是	按钮的文字数组
itemColor	HexColor	否	按钮的文字颜色，字符串格式，默认为"#000000"
popover	Object	否	iPad 上弹出原生选择按钮框的指示区域，默认指向屏幕底部水平居中位置
success	Function	否	接口调用成功的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

popover 值说明（仅App生效）

值	类型	说明
top	Number	指示区域坐标
left	Number	指示区域坐标
width	Number	指示区域宽度
height	Number	指示区域高度

success返回参数说明

参数	类型	说明
tapIndex	Number	用户点击的按钮，从上到下的顺序，从0开始

示例

uni.showActionSheet({itemList: ['A', 'B', 'C'],success: function (res) {console.log('选中了第' + (res.tapIndex + 1) + '个按钮');},fail: function (res) {console.log(res.errMsg);}
});

数据缓存

uni.setStorage(OBJECT)异步

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

uni.setStorage({key: 'storage_key',data: 'hello',success: function () {console.log('success');}
});

uni.setStorageSync(KEY,DATA)同步

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

try {uni.setStorageSync('storage_key', 'hello');
} catch (e) {// error
}

uni.getStorage(OBJECT)异步获取

从本地缓存中异步获取指定 key 对应的内容。

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数，res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
data	Any	key 对应的内容

示例

uni.getStorage({key: 'storage_key',success: function (res) {console.log(res.data);}
});

uni.getStorageSync(KEY)同步获取

从本地缓存中同步获取指定 key 对应的内容。

参数说明

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key

示例

try {const value = uni.getStorageSync('storage_key');if (value) {console.log(value);}
} catch (e) {// error
}

uni.getStorageInfo(OBJECT)

异步获取当前 storage 的相关信息。

参数名	类型	必填	说明
success	Function	是	接口调用的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
keys	Array＜String＞	当前 storage 中所有的 key
currentSize	Number	当前占用的空间大小, 单位：kb
limitSize	Number	限制的空间大小, 单位：kb

示例

uni.getStorageInfo({success: function (res) {console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);}
});

uni.getStorageInfoSync()

同步获取当前 storage 的相关信息。

示例

try {const res = uni.getStorageInfoSync();console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);
} catch (e) {// error
}

uni.removeStorage(OBJECT)异步移除

从本地缓存中异步移除指定 key。

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

uni.removeStorage({key: 'storage_key',success: function (res) {console.log('success');}
});

uni.removeStorageSync(KEY)同步移除

从本地缓存中同步移除指定 key。

参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key

示例

try {uni.removeStorageSync('storage_key');
} catch (e) {// error
}

uni.clearStorage()异步清除本地缓存

清理本地数据缓存。

示例

uni.clearStorage();

uni.clearStorageSync()同步清理本地缓存

同步清理本地数据缓存。

示例

try {uni.clearStorageSync();
} catch (e) {// error
}

集成UView

uView学习手册

首先，下载UView导入到项目

引入uView主JS库

// main.js
import uView from "uview-ui";
Vue.use(uView);

在引入uView的全局SCSS主题文件

/* uni.scss */
@import 'uview-ui/theme.scss';

引入uView基础样式

在App.vue中首行的位置引入，注意给style标签

<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-ui/index.scss";
</style>

配置easycom组件模式

// pages.json
{"easycom": {"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// .....]
}

uni-app项目框架解析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fHn6GwqM-1597193997477)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200811195637643.png)]

common放一些公共的css/js
pages存放写的页面
static静态资源目录，存放图片、图标等
unpackage自动生成的，不用动
uview-ui我引入的uni-app的前端框架
App.vue是vue页面资源的首加载项，是主组件
main.js vue的，不用动
manifest.json是app的启动配置文件设置，在不同平台上的配置

page.json

{"easycom": {        // 导入uview-ui插件"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"},"pages": [  // 注册所有page//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/my/index","style": {}},// ......],"globalStyle": {   // 全局样式配置"navigationBarTextStyle": "black", // 导航栏标题颜色"navigationBarTitleText": "uni-app",  // 导航栏标题文字"navigationBarBackgroundColor": "#F8F8F8",    // 导航栏背景颜色"backgroundColor": "#F8F8F8"          // 导航栏背景颜色},"tabBar": {           // 设置页面下方的tabBar"color": "#555555",         // 未选中颜色"selectedColor": "#007AFF", // 选中颜色"backgroundColor": "#FFFFFF",    // 背景颜色"list": [{     // tabBar列表{"pagePath": "pages/my/index","text": "我的","iconPath":"static/mine.png","selectedIconPath":"static/mine1.png"}]}
}

uni.scss全局scss

uni-app前端开发(零)相关推荐

零基础不建议学前端_web前端开发零基础怎样入门-哈尔滨前端学习
web前端开发零基础怎样入门-哈尔滨前端学习,俗话说,知己知彼,百战百胜.要想学好web前端,首先要了解什么是web前端,下面由小编来给大家介绍一下: 1什么是web? Web就是在Http协议基础之 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(二）---登陆界面功能实现
打开 main.js,这个文件里定义的是整体小程序中会用到的一些功能 (即变量之类),也就是说,只要在这里出现的功能,其它页面可以直接拿来使用.可以把它理解为: 共享单车main ,大家都可以用. ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(七）---登陆注销功能与微信小程序测试号的申请
到此为止,我们只差一个退出登陆功能了. 回到index.vue页面,之前我们已经预留了退出按钮,现在给它加上功能 <button class="mybutton" type= ...
web前端开发零基础入门教程
端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端 ...
关于uni.app蓝牙开发问题汇总
1.onBLECharacteristicValueChange 数据返回两次相同数据 2.7以前的版本有此BUG ,更新至2.9.8即可
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
众筹开班你说了算！UI设计+前端开发一站式打包学
UI设计入门有几步?前端开发是开发些啥?实际工作中UI设计和前端开发是如何衔接在一起工作的?Word天,这期课程厉害了,听完干货都能直接上手参加工作了,快告诉我怎么听课! 这一回小码哥不走寻常路,干货 ...
web前端开发可以从事哪些工作
随着互联网进几年来的高速发展,web前端这一门技术和对应的行业岗位就应运而生.Web前端主要就是网站的页面展现以及动态交互部分,比如大家逛淘宝所看到的页面就是web前端所做的. Web前端是当下互联网 ...

uni-app前端开发(零)

uni-app学习

小科普

生命周期

onLoad

用法（以下相同）

onShow(打开页面)

onReady(监听页面渲染完成)

onHide(页面隐藏/后台)

onUnload

onResize

onPullDownRefresh(下拉刷新)

onReachBottom

onTabItemTap

onShareAppMessage

onPageScroll

onNavigationBarButtonTap

onBackPress

onNavigationBarSearchInputChanged

onNavigationBarSearchInputConfirmed

onNavigationBarSearchInputClicked

路由与页面跳转

交互反馈

数据缓存

集成UView

uni-app项目框架解析

uni-app前端开发(零)相关推荐

最新文章

热门文章