使用Hbuilderx，写一个极简酷酷的手机桌面

小记

由于受到相应类别的软件的启发，故此书写一个简单炫酷的手机桌面，实现下自己的小愿望

效果图，楼主个人原因，软件列表做了虚化处理

代码部分

<template>
//页面的渲染列表的代码部分
	<view class="bgColor">
		<view style="display: inline;line-height: 26px;" v-for="(item, index) in appList" :key="index">
			<view class="labelShow" :style="labelStyle[index]" @click="launchApp(item.packageName)" type="default">{{ item.appName }}</view>
		</view>
	</view>
</template>

<script>
/**
 * 实现自动获取应用列表，然后自动分配大小和颜色，用户点击软件名称后可以直接打开软件
 */
export default {
	data() {
		return {
			//应用列表
			appList: [],
			//标签样式数组
			labelStyle: [],
			//屏幕高度
			scrrenHeight: '',
			//屏幕宽度
			screenWeight: ''
		};
	},
	onLoad() {
		//获取屏幕的宽度高度
		const { windowWidth, windowHeight } = uni.getSystemInfoSync();
		this.screenWeight = windowWidth;
		this.scrrenHeight = windowHeight;
		//获取非系统应用的软件信息
		plus.android.importClass('java.util.ArrayList');
		plus.android.importClass('android.content.pm.PackageInfo');
		plus.android.importClass('android.content.pm.PackageManager');
		var ApplicationInfo = plus.android.importClass('android.content.pm.ApplicationInfo');
		var MainActivity = plus.android.runtimeMainActivity();
		var PackageManager = MainActivity.getPackageManager();
		var pinfo = plus.android.invoke(PackageManager, 'getInstalledPackages', 0);
		if (pinfo != null) {
			var apklist = [];
			for (var i = 0; i < pinfo.size(); i++) {
				//PackageInfo{4b45699f9d  com.tencent.mobileqq}
				var pkginfo = pinfo.get(i);
				//等于0非系统应用 FASTEST表示全部应用
				var issysapk = (pkginfo.plusGetAttribute('applicationInfo').plusGetAttribute('flags') & ApplicationInfo.FLAG_SYSTEM) != 0 ? true : false;
				if (issysapk == false) {
					const apkinfo = {
						appName: pkginfo
							.plusGetAttribute('applicationInfo')
							.loadLabel(PackageManager)
							.toString(),
						packageName: pkginfo.plusGetAttribute('packageName'),
						versionName: pkginfo.plusGetAttribute('versionName'),
						versionCode: pkginfo.plusGetAttribute('versionCode'),
						appIco: pkginfo.plusGetAttribute('applicationInfo').loadIcon(PackageManager)
					};
					apklist.push(apkinfo);
				}
			}
			this.appList = apklist;
			//获取有多少个app，然后根据app的个数分配样式
			// "color:red;font-size:18px;","color:blue;font-size:25px;"
			//利用字符串拼接生成随机的样式
			let randStyle = [];
			//生成随机的颜色
			let colorInfo = ['#DC143C', '#4169E1', '#32CD32', '#DB7093', '#9400D3', '#FF8C00', '#A9A9A9', '#F5F5F5'];
			for (var i = 0; i < apklist.length; i++) {
				randStyle[i] = 'color:' + colorInfo[Math.floor(Math.random() * 8)] + ';' + 'font-size:2' + Math.floor(Math.random() * 10 - 3) + "px;'";
			}
			//设置自动样式
			this.labelStyle = randStyle;
			// console.log(apklist.length+" "+randStyle+" "+windowWidth+" "+windowHeight)
		}
	},
	methods: {
//弃用部分，设置的是软件打开前自动加载程序，加载完成之后，才会进入主界面
		getAppInfo() {
			var ApplicationInfo = plus.android.importClass('android.content.pm.ApplicationInfo');
			var MainActivity = plus.android.runtimeMainActivity();
			var PackageManager = MainActivity.getPackageManager();
			var pinfo = plus.android.invoke(PackageManager, 'getInstalledPackages', 0);
			if (pinfo != null) {
				var apklist = [];
				for (var i = 0; i < pinfo.size(); i++) {
					//PackageInfo{4b45699f9d  com.tencent.mobileqq}
					var pkginfo = pinfo.get(i);
					//等于0非系统应用
					var issysapk = (pkginfo.plusGetAttribute('applicationInfo').plusGetAttribute('flags') & ApplicationInfo.FLAG_SYSTEM) != 0 ? true : false;
					if (issysapk == false) {
						const apkinfo = {
							appName: pkginfo
								.plusGetAttribute('applicationInfo')
								.loadLabel(PackageManager)
								.toString(),
							packageName: pkginfo.plusGetAttribute('packageName'),
							versionName: pkginfo.plusGetAttribute('versionName'),
							versionCode: pkginfo.plusGetAttribute('versionCode'),
							appIco: pkginfo.plusGetAttribute('applicationInfo').loadIcon(PackageManager)
						};
						apklist.push(apkinfo);
					}
				}
				this.appList = apklist;
			}
		},
		//启动应用程序
		launchApp(appStartInfo) {
			//不判断平台直接 运行
			let _this = this;
			plus.runtime.launchApplication({ pname: appStartInfo }, function(e) {
				uni.showToast({
					title: 'Open system app failed please again'
				});
				console.log('Open system app failed: ' + e.message);
			});
		}
	}
};
</script>

<style>
//全屏背景色
.bgColor {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: black;
	z-index: -1;
	padding-top: 50rpx;
}
.labelShow {
	display: inline;
	font-weight: bold;
	word-break: break-all;
	word-wrap: break-word;
	white-space: pre-line;
}

.text-area {
	display: flex;
	justify-content: center;
	margin-bottom: 10rpx;
}
.title {
	font-size: 72rpx;
	color: #dd524d;
}
.container {
	padding: 10px;
}
</style>

详细流程，我们在Hbuilderx里面新建一个uni-app的空项目，然后把这部分代码放到 pages->index->index.vue里面，使用云打包，就可以得到一个手机端的简易桌面了，样式和颜色可以根据自己的喜好再代码里自行设置，启动界面和图标也可以再Hbuilderx的设置里面进行设置