uniapp uview2 使用笔记

2023-11-06

创建项目安装组件

npm install uview-ui

配置

引入uView主JS库

在项目src目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

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

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

在项目src目录的uni.scss中引入此文件。

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

引入uView基础样式

<style lang="scss">
	/*每个页面公共css */
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
	@import "common/demo.scss";
		page {
			width: 100vw;
			// height: calc(100% - var(--status-bar-height));
			height: 100vh;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			color: #333333;
			font-size: 28rpx;
			line-height: 40rpx;
			image {
				display: block;
			}
		}
		::v-deep .uni-toast .uni-toast__content{
			text-align: center!important;
		}
	
		view {
			box-sizing: border-box;
		}
	
		uni-page-body {
			width: 100vw;
			height: 100vh;
		}
	
	}

配置easycom组件模式

此配置需要在项目src目录的pages.json中进行。

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

Cli模式额外配置

如果您是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置

// vue.config.js，如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['uview-ui']
}

项目目录配置

.
├── common					#演示需要的一些文件
│   ├── api.js
│   ├── config.js
│   ├── demo.scss
│   ├── mixin.js
│   └── props.js
├── components					#演示项目封装的组件
│   └── page-nav
│       └── page-nav.vue
├── pages					#页面
│   ├── componentsA				#分包A
│   │   ├── ...
│   │   ├── ...
│   ├── componentsB				#分包B
│   │   ├── ...
│   │   ├── ...
│   ├── componentsC				#分包C
│   │   ├── ...
│   │   ├── ...
│   └── example					#演示项目首页
│       ├── components.config.js		#演示页面数据
│       └── components.nvue			#主演示页面
├── static					#演示项目需要的一些文件
│   ├── app-plus
│   │   └── mp-html
│   ├── common
│   │   └── js
│   └── uview
│       ├── common
│       └── example
├── store
│   └── index.js
├── uni_modules
│   └── uview-ui				#uView2.0主包
│       ├── LICENSE
│       ├── README.md
│       ├── changelog.md
│       ├── components				#所有的组件
│       ├── index.js
│       ├── index.scss
│       ├── libs
│       ├── package.json
│       └── theme.scss
├── unpackage
│   └── res
│       └── icons
├── util
│   └── request
│       ├── index.js
│       ├── requestInterceptors.js
│       └── responseInterceptors.js
├── App.vue
├── LICENSE
├── main.js
├── manifest.json
├── package-lock.json
├── pages.json					#页面配置
├── package.json
├── README.md
├── template.h5.html				#h5模板
├── tree.md
├── uni.scss
└── vue.config.js


created by beiqiao.

在这里插入图片描述

Api集中管理在/config/api.js中编写请求接口：

const { http } = uni.$u

// post请求，获取菜单
export const postMenu = (params, config = {}) => http.post('/ebapi/public_api/index', params, config)

// get请求，获取菜单，注意：get请求的配置等，都在第二个参数中，详见前面解释
export const getMenu = (data) => http.get('/ebapi/public_api/index', data)

发送请求

import { postMenu, getMenu } from '/config/api.js';

// 发出post，假设需要带上token
postMenu({ custom: { auth: true }}).then(() => {
	
}).catch(() =>{
	
})

// await等待，注意与async结合使用
await postMenu({ custom: { auth: true }})

// 假设不需要在响应拦截器中自动弹出的toast，以及不想写catch(如果promise中进行reject，但是却没有catch的话会报错)
postMenu({ custom: { auth: true, toast: false, catch: false }}).then(() => {
	
})

// get请求
getMenu({ custom: { auth: true }}).then(() => {
	
}).catch(() =>{
	
})

// 也可以直接通过uni.$u.post发出请求，注意此处需要写上接口地址
uni.$u.http.post('/common/menu', { custom: { auth: true }}).then(() => {
	
}).catch(() =>{
	
})

注意

uni.$u.http.post('/common/menu', { custom: { auth: true }},{header:{'content-type': 'application/x-www-form-urlencoded'}
			}).then(() => {}).catch(() =>{})

基本使用

uni.$u.http.middleware(config)
uni.$u.http.request(config)
uni.$u.http.get(url[, config])
uni.$u.http.upload(url[, config])
uni.$u.http.delete(url[, data[, config]])
uni.$u.http.head(url[, data[, config]])
uni.$u.http.post(url[, data[, config]])
uni.$u.http.put(url[, data[, config]])
uni.$u.http.connect(url[, data[, config]])
uni.$u.http.options(url[, data[, config]])
uni.$u.http.trace(url[, data[, config]])

config.js

//根域名
module.exports = {
	// #ifdef H5
	baseUrl: '/host', // 解决跨域 代理 本地服务器 
	// #endif
	baseUrl: 'http://*/fmis-api';
}

request.js

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
    // 初始化请求配置
    uni.$u.http.setConfig((config) => {
        /* config 为默认全局配置*/
        config.baseURL = 'https://www.example.com'; /* 根域名 */
        return config
    })
	
	// 请求拦截
	uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
	    // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
	    config.data = config.data || {}
		// 根据custom参数中配置的是否需要token，添加对应的请求头
		if(config?.custom?.auth) {
			// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
			config.header.token = vm.$store.state.userInfo.token
		}
	    return config 
	}, config => { // 可使用async await 做异步操作
	    return Promise.reject(config)
	})
	
	// 响应拦截
	uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
		const data = response.data

		// 自定义参数
		const custom = response.config?.custom
		if (data.code !== 200) { 
			// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
			if (custom.toast !== false) {
				uni.$u.toast(data.message)
			}

			// 如果需要catch返回，则进行reject
			if (custom?.catch) {
				return Promise.reject(data)
			} else {
				// 否则返回一个pending中的promise，请求不会进入catch中
				return new Promise(() => { })
			}
		}
		return data.data === undefined ? {} : data.data
	}, (response) => { 
		// 对响应错误做点什么 （statusCode !== 200）
		return Promise.reject(response)
	})
}

main.js

import Vue from 'vue'
import App from './App'

// vuex
import store from '@/store'

// 引入全局uView
import uView from '@/uni_modules/uview-ui'

import mixin from './common/mixin'

Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'
Vue.use(uView)

// #ifdef MP
// 引入uView对小程序分享的mixin封装
const mpShare = require('@/uni_modules/uview-ui/libs/mixin/mpShare.js')
Vue.mixin(mpShare)
// #endif

Vue.mixin(mixin)

// 引入uView提供的对vuex的简写法文件
let vuexStore = require('@/store/$u.mixin.js')
Vue.mixin(vuexStore)

//获取上一页
const prePage = () => {
	let pages = getCurrentPages();
	let prePage = pages[pages.length - 2];
	// #ifdef H5
	return prePage;
	// #endif
	return prePage.$vm;
}

Vue.prototype.$api = {
	prePage
};

// H5端 微信 分享
import weixin from './common/weixin.js' //微信操作js
if (weixin.isWechat()) {
  Vue.prototype.$weixin = weixin;
}


const app = new Vue({
    store,
    ...App
})

// 引入请求封装
require('./util/request/index')(app)

app.$mount()

配置代理 vue.config.js

module.exports = {
	// 配置路径别名
	configureWebpack: {
		devServer: {
			// 调试时允许内网穿透，让外网的人访问到本地调试的H5页面
			disableHostCheck: true,
			// port: '9011', //端口号
			proxy: {
				'/host': { // 接口请求中 从 /host 这里 进行代理
					target: 'http://XXX.XXX.XXX.XX:9011', //这里后台的地址模拟的;应该填写你们真实的后台接口
					changeOrigin: true, // 允许跨域
					pathRewrite: {
						'^/host': '' // 重定向 为空
					} 
				}
			}
		}
	}
	// productionSourceMap: false,
}

全局状态管理使用

this.$u.vuex('$userinfo', res.result)

import store from '@/store/index.js';
import { mapState } from 'vuex';
computed: {...mapState(['$userinfo', '$hasLogin','$partnership_loading'])},

常用API

格式化时间

timeFormat | date(timestamp, format = "yyyy-mm-dd")

注意：

1.7.9之前的版本只能传入秒或毫秒时间戳，date和timeFormat为同功能不同名函数，无论用哪个方法名，都是一样的。

该函数必须传入第一个参数，第二个参数是可选的，函数返回一个格式化好的时间。

time 任何合法的时间格式、秒或毫秒的时间戳
format 时间格式，可选。默认为yyyy-mm-dd，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，格式可以自由搭配，如： yyyy:mm:dd，yyyy-mm-dd，yyyy年mm月dd日，yyyy年mm月dd日 hh时MM分ss秒，yyyy/mm/dd/，MM:ss等组合

<template>
	<view>
		<view>
			时间为：{{$u.timeFormat(timestamp, 'yyyy年mm月dd日')}}
		</view>
		<view>
			时间为：{{time}}
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				time: null,
				timestamp: '1581170184'
			}
		},
		onLoad() {
			this.time = uni.$u.timeFormat(this.timestamp, 'yyyy-mm-dd');
		}
	}
</script>

route 路由跳转

此为一个路由跳转方法，内部是对uni多个路由跳转api的封装，更方便使用

在这里插入图片描述

注：为了方便简写和调用，可以直接传递一个url地址替代Object，它只能执行uni.navigateTo类型的地址，不支持跳转到Tabbar页面，如果有参数需要携带，以对象形式写到方法的第二个参数中。

// 无参数
uni.$u.route('/pages/components/empty/index');


// 带参数
uni.$u.route('/pages/components/empty/index', {
	name: 'lisa',
	age: 20
});

export default{
	onLoad() {
		setTimeout(() => {
			uni.$u.route({
				url: 'pages/components/empty/index',
				params: {
					name: 'lisa'
				}
			})
		}, 2000)
	}
}

test 规则校验

uView内置了一些校验规则，如是否手机号，邮箱号，URL等
这些规则方法，挂载在$u.test下面，如验证是否手机号： $u.test.mobile('13888889999')，如果验证通过，返回true，否则返回false

是否验证码

console.log(uni.$u.test.code('4567', 4));

是否数组

console.log(uni.$u.test.array([1, 2, 3]));

是否Json字符串

console.log(uni.$u.test.jsonString('{"a": 1}'));

是否对象

console.log(uni.$u.test.object({a: 1}));

是否邮箱号

console.log(uni.$u.test.email('123465798@gmail.com'));

是否手机号

console.log(uni.$u.test.mobile('13845678900'));

是否URL

console.log(uni.$u.test.url('http://www.uviewui.com'));

isEmpty(value)

校验值是否为空，返回true或者false。

console.log(uni.$u.test.isEmpty(false));

是否普通日期

console.log(uni.$u.test.date('2020-02-10 08:32:10'));

是否十进制数值

console.log(uni.$u.test.number('2020'));

是否整数

console.log(uni.$u.test.digits('2020'));

是否身份证号

console.log(uni.$u.test.idCard('110101199003070134'));

是否车牌号

console.log(uni.$u.test.carNo('京A88888'));

是否金额

console.log(uni.$u.test.amount('3,233.08'));

是否汉字

console.log(uni.$u.test.chinese('更上一层楼'));

是否字母

console.log(uni.$u.test.letter('uView'));

是否字母或者数字

console.log(uni.$u.test.enOrNum('uView'));

是否包含某个值

console.log(uni.$u.test.contains('uView', 'View'));

数值是否在某个范围内

console.log(uni.$u.test.range(35, [30, 34]));

字符串长度是否在某个范围内

console.log(uni.$u.test.rangeLength('abc', [3, 10]));

项目源码

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

前端

Uniapp

uviewui 2

uniapp uview2 使用笔记的相关文章

如何将类型添加到 Vite 库构建中？

我按照vite文档使用图书馆模式 https vitejs dev guide build html library mode我能够生成一个工作组件库我创建了该项目vue ts预设在我的组件中我定义了道具及其类型并使用了一些接口但
如何将类型设置为 vue slot props Typescript

我正在尝试在插槽道具上设置类型以在表格组件中进行处理如图所示我也一直在尝试 body item UserItem 但这只是重命名参数 body
使用带有少量项目的 v-slide-group 时出现问题

我在使用 v slide group 时遇到问题有时我有 2 3 个项目有时我有 10 个或更多项目但项目较少时它不会显示箭头幻灯片项目也不居中这是我的 HTML div div
如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件？

如何将 Vue js 作用域样式应用于通过以下方式加载的组件
vue-test-utils：如何测试 Mounted() 生命周期挂钩中的逻辑（使用 vuex）？

我正在尝试为 Vue 中的逻辑编写一个单元测试mounted 生命周期钩子但运气不太好问题似乎是这样的mounted 使用 vue test utils 安装组件时永远不会被调用mount 这是我要测试的 Vue 组件
如何切换各个
元素的类？

当我切换变量时active在下面的代码中 activeCSS 类应用于列表中的所有元素从列表中的所有元素中删除如何单独定位列表元素 Todo List 示例具有类似的功能待办事项待办事项已完成但它有点超出了我的技能范围 ul li
Nuxt 3动态组件中根据路由参数进行API调用

我正在尝试创建一个简单的 Nuxt 3 应用程序用于学习目的它使用动态路线 https v3 nuxtjs org docs directory structure pages dynamic routes加载页面时从 API 加载数据
如何在 Vue.js 2 中使用事件总线通过自定义事件传递数据

我在用着Vue js 2 5 x 在我的玩具项目中我实现了一个事件总线类似于所示的here https alligator io vuejs global event bus 事件总线在 Vue 原型中全局注册为 eventBus 然后
如何将Vue包装的对象转换为普通对象

我需要将对象类型的数据变量分配给普通变量 const myVue new Vue el myVue data vars show Form methods assign vars const new vars this vars html
vue-chartjs 反应数据错误

我正在尝试使用反应式数据混合vue chartjs http vue chartjs org home id reactive data 用于设置初始数据的已安装函数正在运行我可以使用 API 响应正确查看图表 fetchSessionT
如何从vuejs和firestore获取文档的id？

我有这个代码可以从 firestore 获取所有文档 const getThemesList async commit gt const snapshot await firebase firestore collection themes
Vue 开发样板中的随机错误“以太坊未定义”

我正在尝试使用 vue cli 创建的 Vue 基本样板在一个非常基本的 Vue3 组件中实现 web3 但我有一些奇怪的错误首先这是我的组件的代码
在 Vue SFC 组件中导入 SCSS 文件，无需使用 Webpack 进行重复

当我尝试访问所有 Vue SFC 中的 scss 文件时样式会重复导致大型 css 包和开发工具在样式调试时崩溃我正在使用 Webpack 4 和 webpack dev server 来构建和运行具有热重载的开发服务我没有使用 V
使用 vue-cli 服务时如何禁用 linting？

我正在使用以下命令使用 vue cli 运行我的项目 vue cli service 服务 open 如何禁用所有 linting 目前每次保存时都会重新进行 linting 并且更改代码需要很长时间我已经把 lintOnSave fal
Vue SPA - 如何在浏览器中呈现时隐藏 .vue 文件

我正在开发一个用 Vue js 开发的单页应用程序托管在 Node js 服务器上目前它仍在开发中但最终将暴露给外部客户并且由于我们将处理敏感数据我们希望避免在用户检查元素时看到 vue 文件和相对文件树结构在开发工具中 See
如何在没有 API 请求的情况下使用 Nuxt.js 生成 100% 静态网站？

我正在测试周围Nuxt js https nuxtjs org 生成静态网站使用API 获取数据时是否可以生成100 静态站点从而摆脱API和请求根据我到目前为止的测试所有文件都已正确生成并托管在Github 页面 https pa
如何在 NuxtJs 路由中使用 *（星号）？

在 vue cli 生成的普通 Vue 不是 Nuxt 项目中使用在 vue router 中这样工作 export default new Router routes path about name about component A
过滤输入文本以仅输入数字，甚至不输入小数

我的目标是用户只输入 0 9 之间的数字甚至不允许输入小数怎么做 The code
以下文档我无法创建 Vue.js 3 的实例

The code https stackblitz com edit vue ttt file src main js https stackblitz com edit vue ttt file src main js 问题我正在尝试在
vuejs中如何获取组件编译后的html内容

我有一个这样的组件

随机推荐

华为OD机试 C++ 报数问题

题目你和你的朋友们围成一个圈玩游戏从第一个人开始依次报数 1 2 3 当数到3的时候那个人就得退出游戏然后从他的下一个朋友继续开始 1 2 3 同样的数到3的人又得退出这样一直进行下去直到圈里只剩下一个人人会是谁任务给
Android Studio更新升级方法

android studio一直在更新完善为了与时俱进我们当然要将工具更新到最新版本啦其实更新本来是很简单只要从Android Studio Help菜单中选择Check for Update即可但因为伟大的墙实际更新失败下
JS浏览器调试:Browser对象

好久不搞前端最近在搞钉钉的第三方应用的时候前端给我露了一手涉及到知识主要是JavaScript的Browser对象首先现在很多PC客户端现在技术选型选择会选择nodejs这类像nw js或者Electron 都会涉及到chromi
给input框赋值成功后input框不能进行编辑

选中一项后 input框不能进行编辑
【工具】（z-library平替）Clibrary中文图书馆，电子书大全

目录新版目录更新于2023 7 11 一更新时间和简介二步骤老版目录接口无法使用 1 z library和Clibrary简介 2 Clibrary网址 3 具体操作界面新版目录更新于2023 7 11 一更新时间和简介
three.js 制作地球标注的两种方法

一 Sprite精灵标签效果图精灵标签标签永远面向相机 function createTxt position name var texture new THREE CanvasTexture getCanvasFont var fo
自学——一个月入门前端④

本文的内容有关css盒模型盒模型在css中所有的元素都被一个个的盒子包围着广泛的使用两种盒子块级盒子和内联盒子这两种盒子会在页面流和元素之间的关系 block 绝大部分情况下盒子会和父容器一样宽每个盒子都会换行 width
C/C++判断指针是否为空

if p NULL if NULL p if p nullptr if nullptr p if p 0 if 0 p if p false if false p if p 个人理解如有不对敬请指正最佳判断是if p 因为 p是一个指
02-分布式协调服务ZooKeeper

目录一 ZooKeeper简介 1 什么是Zookeeper 2 基本特性二 ZooKeeper原理 1 系统架构 1 1 角色分工 1 2 设计思想 1 3 为什么要引入Observer ZK 3 3 0 2 数据模型 2 1 Zno
花书+吴恩达深度学习（二六）近似推断（EM, 变分推断）

文章目录 0 前言 1 将推断视为优化问题 1 1 期望最大化 EM 1 2 最大后验推断 MAP 1 3 稀疏编码 2 变分推断 2 1 离散型潜变量 2 2 连续性潜变量如果这篇文章对你有一点小小的帮助请给个关注点个赞喔我会非常
【Redis】持久化之AOF

Redis持久化之AOF 以日志的形式来记录每个写操作增量保存将Redis执行过的所有写指令记录下来读操作不记录只许追加文件但不可以改写文件 redis启动之初会读取该文件重新构建数据换言之 redis 重启的话就根据日志文件的内
【element】之el-popconfirm：弹出组件确认按钮绑定

element之el popconfirm 弹出组件确认按钮绑定一 element官网说明 element中el popconfirm实例 element提供的接口二实际代码说明无用代码正确代码一 element官网说明 ele
通过bilibili_api获取bilibili弹幕+绘制词云的方法！

由于自己学艺不精后续词云的简略代码没怎么看懂梳理了一遍把整个的学习内容记录下来主要参考的为bilibili api的教程和词云的生成教程 https blog csdn net itanders article details 888
华为b6手环能升级鸿蒙吗,华为手环B6全新发布：跨界形态再升级强劲性能革新穿戴体验...

2020年7月30日北京今日华为正式推出了融合耳机和手环形态的跨界穿戴智能手环华为手环B6 它采用1 53英寸高清3D弧面柔性屏外观时尚操控自如独创的分离式设计让这款产品兼具蓝牙耳机的舒适佩戴和华为智能手环的专业运动健康功能
[Ubuntu] [Qt] Ubuntu18.04.6安装Qt后打不开

1 安装完Qt5 15 2后点击图标没反应 2 通过指令打开Qt 可以看到失败的原因是因为glibc 2 28没找到 Qt Tools QtCreator bin qtcreator software Qt Tools QtCreator
labelimg 修正模型错误标注遇到的问题

场景介绍使用了模型如YOLOv5 v7 detec py 保存的 YOLO 格式的结果包括测试的图像和对应的 txt 文件模型跑出来的结果可能不够准确需要手工修正下因此我需要使用 labelimg 来可视化图像并且修改其标注
Tomcat安装版和解压版

在eclipse中开发web项目经常需要在eclipse中添加tomcat服务器之前下载了目前最新版本tomcat9的zip版由于目前的eclipse只支持到tomcat8 原本准备就这样安装了在浏览器输入了n次http localh
redis持久化操作RDB和AOF详解与操作（docker）

redis持久化 Redis 提供了两种不同的持久化方法来将数据存储到硬盘里面一种方法叫快照 snapshotting RDB 它可以将存在于某一时刻的所有数据都写入硬盘里面另一种方法叫只追加文件 append only file AO
SVR4/4.3BSD与Linux对待伪终端的不同方式

打开伪终端意味着打开了一个终端对这个终端对的其中一个是主终端另一个是从终端简单说主终端和类似sshd telnetd等用户空间的远程协议处理进程连接而从终端则和shell之类的实际进程连接在处理远程登录的时候一般都是由远程协议
uniapp uview2 使用笔记

创建项目安装组件 npm install uview ui 配置引入uView主JS库在项目src目录中的main js中引入并使用uView的JS库注意这两行要放在import Vue之后 main js import uView

uniapp uview2 使用笔记

创建项目安装组件

配置

引入uView主JS库

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

引入uView基础样式

配置easycom组件模式

Cli模式额外配置

项目目录配置

Api集中管理在/config/api.js中编写请求接口：

发送请求

基本使用

config目录（公共配置目录）

配置代理 vue.config.js

全局状态管理使用

常用API

格式化时间

route 路由跳转

test 规则校验

是否验证码

是否数组

是否Json字符串

是否对象

是否邮箱号

是否手机号

是否URL

isEmpty(value)

是否普通日期

是否十进制数值

是否整数

是否身份证号

是否车牌号

是否金额

是否汉字

是否字母

是否字母或者数字

是否包含某个值

数值是否在某个范围内

字符串长度是否在某个范围内

uniapp uview2 使用笔记 的相关文章

随机推荐

热门标签

uniapp uview2 使用笔记的相关文章