学习uniapp主要干活要用，但主要还是继续学JAVA，所以来简单了解一下

了解uniapp

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台

uniapp的常用组件

view

view 视图容器 类似与传统的div标签
添加hover-stop-propagation属性可以防止事件冒泡

属性名 类型 默认值 说明

  • hover-class String none 指定按下去的样式类。当 hover-class=”none” 时，没有点击态效果
  • hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
  • hover-start-time Number 50 按住后多久出现点击态，单位毫秒
  • hover-stay-time Number 400 手指松开后点击态保留时间，单位毫秒

    text

    文本组件。用于包裹文本内容。文本只能写在text中，而不能写在view的text区域

scroll-view

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中，区域滚动的性能不及页面滚动

  • scroll-y Boolean false 允许纵向滚动

  • scroll-x Boolean false 允许横向滚动

  • 子元素默认纵向排，在子元素的css样式中加 display: inline-block;
  • 父元素css中设置不允许自动换行 white-space: nowrap;

滑块视图容器

一般用于左右滑动或上下滑动，比如banner轮播图。

  • indicator-dots Boolean false 是否显示面板指示点
  • indicator-color Color rgba(0, 0, 0, .3) 指示点颜色
  • indicator-active-color Color #000000 当前选中的指示点颜色
  • active-class String swiper-item 可见时的 class 支付宝小程序
  • changing-class String acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的class 支付宝小程序
  • autoplay Boolean false 是否自动切换

计算属性

这个是VUE的一个API，学习uniapp的时候碰到了就记录到这吧
模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护

  • 在图中 两个view 标签展示出来的内容是一样的，第二个view采用了计算属性，第一个view是模板表达式

    计算属性的作用和模板表达式是一样的，但是如果计算较多建议使用计算属性

  • 这是一个方法代替计算属性，最终展示效果也是一样的

计算属性和方法最终结果是一样的，不同之处在于计算属性会进行一个缓存，只要计算属性中响应式变量不变化就不会重新执行，而方法只要被调用几次就会执行几次。 方法需要加括号!

页面传值

今天已经开始进入项目帮忙开发功能了 第一个功能 部门功能
记录一下学到的东西
由于我目前只写了前端所以在添加部门这一块的时候会将数据传给index主页面，这时候用到了页面传参数的功能。所以我去了解了一下

页面传参也分为了三种

上级页面传下级页面

上级页面传参数的时候可以用uni.navigateTo的url拼接参数即可

这种方式是单向的，只能上级传下级！！！


1
2
3
4
5
6
7
8
//在起始页面跳转到test.vue页面并传递参数
let uniapp = {
    uniappItem: 0,
};
//当传递的参数是对象时，必须先转化为JSON格式
uni.navigateTo({
	url: 'test?id=1&name=' + JSON.stringify(uniapp),
});

下级页面接收参数可以在周期函数中
1
2
3
4
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}

下级传上级

用uni.setStorageSync设置缓存
下级页面在触发submit这个函数的时候会将formData存入缓存中，并跳转页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default {
		data() {
			return {
				formData:{
					departName: "",
					departType: "",
					isOpen: "",
					remark: "",				}
			}
		},
		methods:{
			submit(ref){
				//写死数据这里是将添加的数据传到主页面中
				//后期应修改成发送请求到后端
			uni.setStorageSync('formData', this.formData);
			uni.navigateTo({
				url:'/pages/flow/department/departmentindex',
			})
			}
		},
	}

点击保存就会触发submit函数

上级页面通过onShow查找缓存uni.getStorageSync得到数据

1
2
3
4
5
6
7
8
9
10
onShow() {
			       const param = uni.getStorageSync('formData');
			       if (param) {
			           // 处理从下级页面传来的参数
			         this.formData.departmentName = param.departName
			         this.formData.departmentTpye = param.departType
			         this.dataList.push(this.formData)
			         uni.removeStorageSync('formData');
			       }
			},

规则校验

今日份学习小技巧
在uniapp中表单校验步骤

1. 在表头添加rules

2. 编写规则

rules应写在data函数中的return中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
rules: {
					departName: {
						rules: [{
							required: true,
							errorMessage: '必填字段不能为空',
						}]
					},
					departType: {
						rules: [{
							required: true,
							errorMessage: '必填字段不能为空',
						}]
					},
					isOpen: {
						rules: [{
							required: true,
							errorMessage: '必填字段不能为空',
						}]
					},
				},

3，编写方法触发规则校验

1
2
3
4
5
6
7
8
// 触发提交表单
		submit() {
			this.$refs.form.validate().then(res=>{
				console.log('表单数据信息：', res);
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})
		}