hbuilderx简单⽹页代码_使⽤Hbuilderx写⼀个极简酷酷的⼿机
桌⾯
如题，由于受到相应类别的软件的启发，故此书写⼀个简单实⽤的⼿机桌⾯，熟悉下代码
效果图，楼主个⼈原因，软件列表做了虚化处理
代码部分
<template>
//页⾯的渲染列表的代码部分<view class="bgColor"><view v-for="(item, index) in appList" :key="index"><view class="labelS  * 实现⾃动获取应⽤列表，然后⾃动分配⼤⼩和颜⾊，⽤户点击软件名称后可以直接打开软件
*/export default {
data() {return {//应⽤列表
appList: [],//标签样式数组
labelStyle: [],//屏幕⾼度
scrrenHeight: '',//屏幕宽度
screenWeight: ''
};
网页app},
onLoad() {//获取屏幕的宽度⾼度const { windowWidth, windowHeight } = SystemInfoSync();this.screenWeight = windowWidth;this.scrrenHeight = windowHe  plus.android.importClass('java.util.ArrayList');
plus.android.importClass('java.util.ArrayList');
plus.android.importClass('t.pm.PackageInfo');
plus.android.importClass('t.pm.PackageManager');var ApplicationInfo = plus.android.importClass('t.pm.ApplicationInfo');var MainA        .plusGetAttribute('applicationInfo')
.loadLabel(PackageManager)
.toString(),packageName: pkginfo.plusGetAttribute('packageName'),versionName: pkginfo.plusGetAttribute('versionName'),versionCode: pkginfo.plusGetAttri      };
apklist.push(apkinfo);
}
}this.appList = apklist;//获取有多少个app，然后根据app的个数分配样式// "color:red;font-size:18px;","color:blue;font-size:25px;"//利⽤字符串拼接⽣成随机的样式le    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('t.pm.ApplicationInfo');var MainActivity = plus.android.runtimeMainActivity();var Packa        .plusGetAttribute('applicationInfo')
.loadLabel(PackageManager)
.toString(),packageName: pkginfo.plusGetAttribute('packageName'),versionName: pkginfo.plusGetAttribute('versionName'),versionCode: pkginfo.plusGetAttr      };
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的设置⾥⾯进⾏设置，若有更棒的想法可以联系楼主⼀起学习探讨

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。