uni-app前端开发(零)

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：

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 不能在 App.vue 里面进行页面跳转。
• H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

交互反馈

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导入到项目

1. 引入uView主JS库

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

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

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

3. 引入uView基础样式

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

4. 配置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