【uni-app】初体验

概述

今天学习了一点uni-app开发的技术，首先是观看了官方的教程，实现了一个简单的demo，学习链接如下：链接，不得不提的一点是，使用HBuilder X开发uni-app的程序，真的舒服，开发过程中，任何缺少的组件、编译程序、插件等都会自动下载，而且HBuilder X很流畅，用着着实美滋滋；另一方面，uni-app的跨平台能力很强，性能暂时看不出来，但是发布应用非常方便，但从安卓开发的便捷程度而言，远超java。

细节

主要就是基于hello这个模板，改了改index.vue文件，做了个简单的"假绿码"程序，相当于是静态页面，只是中间的时间会变化而已。

<template>
	<view class="content">
		<image class="top" src="/static/top.jpg">image>
		<text class="time">{{clock}}text>
		<image class="bottom" src="/static/bottom.jpg">image>
	view>
template>

<script>
	export default {
		data() {
			return {
				clock:""
			}
		},
		mounted() {
			const clock = setInterval(() => {
				let date = new Date();
				let year = date.getFullYear(),
								month = ("" + (date.getMonth() + 1)).slice(-2),
								sdate = ("" + date.getDate()).slice(-2),
								hour = ("0" + date.getHours()).slice(-2),
								minute = ("0" + date.getMinutes()).slice(-2),
								second = ("0" + date.getSeconds()).slice(-2);
				let result = month +"月"+ sdate +"日 "+ hour +":"+ minute +":" + second;
				this.clock=result;
			    }, 1000);
		}
	}
script>

<style>
	.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	
		.top {
			height: 40%;
			width: 100%;
			position: absolute;
			left: 0%;
			top: 0%;
			margin-top: 10%;
		}
		.bottom {
			height: 47%;
			width: 100%;
			position: absolute;
			left: 0%;
			bottom: 0%;
		}
		.time {
			height: 47%;
			width: 100%;
			position: absolute;
			left: 17.5%;
			top: 45%;
			font-size: 70rpx;
		}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

其他收获

1、手机开启 开发者模式：多次点击版本号（位置：关于本机-版本信息-版本号）即可，但是一加手机的话，还需要额外开启usb调试
2、修改图片中的文字，主要流程就是先把原文字去掉，然后新文字添加，接着调整字体、颜色等。PS中使用锚框勾选文字，使用修补工具将锚框拖到背景处即可消除文字，然后使用文字工具写文字，慢慢调整颜色大小等。手机上可以使用美图秀秀。