- 下载安装hbuilderx开发软件
- 创建项目
- 进入到软件，点击 文件->新建->1.项目
- 选择默认模板
创建内容
将index下的原本默认页面删掉，分别新建以下三个vue后缀的页面
三个页面具体的内容如下
index.vue里的内容:
<template>
<view class="container">
<view class="header" @click="test">
<view class="avatar">
<image :src="avatarUrl" mode="aspectFill"></image>
</view>
<view class="username">{{ username }}</view>
<view class="exit"> 【退出】</view>
</view>
<view class="content">
<view class="post" v-for="(post, index) in posts" :key="index" @click="toContent(post)">
<view class="post-header">
<view class="post-title">{{ post.title }}</view>
<view class="post-date">{{ post.date }}</view>
</view>
<view class="post-content">{{ post.author_name }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
avatarUrl: '/static/logo.png', // 您的头像URL
username: 'Your Name', // 您的用户名
posts: [{
"uniquekey": "c94a165be317afdb7073c95abaf200fd",
"title": "春节在岗 他们守护拉林铁路的这个春运",
"date": "2024-02-18 15:27:00",
"category": "头条",
"author_name": "人民日报客户端西藏频道，供稿：人民资讯",
"url": "https:\/\/mini.eastday.com\/mobile\/240218152709337196953.html",
"thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240218\/20240218152709_5e62c3dd0482cbe5ffd70770378894c2_1_mwpm_03201609.jpeg",
"thumbnail_pic_s02": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240218\/20240218152709_5e62c3dd0482cbe5ffd70770378894c2_2_mwpm_03201609.jpeg",
"thumbnail_pic_s03": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240218\/20240218152709_5e62c3dd0482cbe5ffd70770378894c2_3_mwpm_03201609.jpeg",
"is_content": "1"
},
{
"uniquekey": "bbf53d1c887aaafd33138afc389fd8e7",
"title": "春节国内旅游出游4.74亿人次 入出境683万",
"date": "2024-02-18 14:54:00",
"category": "头条",
"author_name": "中国网",
"url": "https:\/\/mini.eastday.com\/mobile\/240218145402350660146.html",
"thumbnail_pic_s": "",
"is_content": "1"
}, {
"uniquekey": "c43ff25550f52d7434f595a713a7fd79",
"title": "江苏海安一工厂发生爆炸致3人死亡，2人失联 周边企业员工称有“地震那样的感觉”",
"date": "2024-02-18 16:05:00",
"category": "头条",
"author_name": "大皖新闻",
"url": "https:\/\/mini.eastday.com\/mobile\/240218160539177821580.html",
"thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240218\/20240218160539_cd9467a64be26e45f2a3d45bb0853c9f_1_mwpm_03201609.jpeg",
"thumbnail_pic_s02": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240218\/20240218160539_cd9467a64be26e45f2a3d45bb0853c9f_2_mwpm_03201609.jpeg",
"is_content": "1"
},
{
"uniquekey": "70ae0c1f8adc6adc6f322bd6a6f25377",
"title": "亚太科技下属南通公司发生爆炸 事故造成3人死亡2人失联",
"date": "2024-02-18 16:02:00",
"category": "头条",
"author_name": "人民网－江苏频道，供稿：人民资讯",
"url": "https:\/\/mini.eastday.com\/mobile\/240218160203746315213.html",
"thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240218\/20240218160203_1f47986f178d6938163e5f99b6889157_1_mwpm_03201609.jpeg",
"is_content": "1"
},
{
"uniquekey": "dc36ff5be992ebe3339483bb3e6a30d5",
"title": "“济”有正能量丨消防员归队途中送腿脚不便的村民回家",
"date": "2024-02-18 16:01:00",
"category": "头条",
"author_name": "大众网",
"url": "https:\/\/mini.eastday.com\/mobile\/240218160137026854046.html",
"thumbnail_pic_s": "",
"is_content": "1"
},
{
"uniquekey": "c63c5b5f3453b71d9d2b74efb8985d8a",
"title": "江苏海安一公司车间发生爆炸，已致3人死亡2人失联",
"date": "2024-02-18 16:00:00",
"category": "头条",
"author_name": "关注健康",
"url": "https:\/\/mini.eastday.com\/mobile\/240218160010612811910.html",
"thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/minimodify\/20240218\/640x360_65d1b90a3e77d_mwpm_03201609.jpeg",
"is_content": "1"
},
{
"uniquekey": "a2addbec7cb725650cfe8f2a79edf7a1",
"title": "102名青年获表彰！“湖北向上向善好青年”名单公布",
"date": "2024-02-18 15:59:00",
"category": "头条",
"author_name": "关注健康",
"url": "https:\/\/mini.eastday.com\/mobile\/240218155944603210445.html",
"thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/minimodify\/20240218\/640x485_65d1b8eb35c36_mwpm_03201609.jpeg",
"thumbnail_pic_s02": "https:\/\/dfzximg02.dftoutiao.com\/minimodify\/20240218\/640x2940_65d1b8ec0f2cc_mwpm_03201609.jpeg",
"thumbnail_pic_s03": "https:\/\/dfzximg02.dftoutiao.com\/minimodify\/20240218\/640x3761_65d1b8ecc8c93_mwpm_03201609.jpeg",
"is_content": "1"
},
{
"uniquekey": "d726cc44faef31707235e73b9492bc14",
"title": "时光守护·老人安智能手表智慧陪伴让关爱闪耀夕阳红",
"date": "2024-02-18 15:42:00",
"category": "头条",
"author_name": "健康小常识",
"url": "https:\/\/mini.eastday.com\/mobile\/240218154236172848668.html",
"thumbnail_pic_s": "",
"is_content": "1"
},
{
"uniquekey": "e8e40a0b854ae955eaf4547aedb6b923",
"title": "醒狮正少年！这只“小狮子”舞出锋芒、舞出传承",
"date": "2024-02-18 15:42:00",
"category": "头条",
"author_name": "当代先锋网",
"url": "https:\/\/mini.eastday.com\/mobile\/240218154230392857287.html",
"thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240218\/20240218154230_6062efda47eaa7aa3eac5ebda0fd472c_1_mwpm_03201609.jpeg",
"thumbnail_pic_s02": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240218\/20240218154230_6062efda47eaa7aa3eac5ebda0fd472c_2_mwpm_03201609.jpeg",
"thumbnail_pic_s03": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240218\/20240218154230_6062efda47eaa7aa3eac5ebda0fd472c_3_mwpm_03201609.jpeg",
"is_content": "1"
},
]
}
},
onLoad(option) {
if (option.name) {
this.username = option.name;
}
this.getNews();
},
methods: {
test() {
uni.showModal({
title: '确认',
content: '你真的要退出吗？',
success: (res) => {
if (res.confirm) {
// 用户点击了“确定”，执行返回操作
// 这里可以调用 uni.navigateBack() 或其他方法
//在起始页面跳转到test.vue页面并传递参数
uni.redirectTo({
url: 'login'
});
return false; // 注意：这里返回 false 是因为我们在模态框中已经处理了返回逻辑
} else {
// 用户点击了“取消”，不执行返回操作
return true; // 阻止默认返回行为
}
}
});
return true;
},
toContent(item) {
uni.showToast({
title: item.title, // 这里设置你的提示信息内容
icon: 'none', // 可以设置图标的类型，'none'表示没有图标
duration: 2000 // 提示信息的显示时长，单位是毫秒
});
uni.navigateTo({
url: 'content?item=' + encodeURIComponent(JSON.stringify(item))
});
},
onBackPress(e) {
uni.showToast({
title: '当前已是主页！', // 这里设置你的提示信息内容
icon: 'none', // 可以设置图标的类型，'none'表示没有图标
duration: 2000 // 提示信息的显示时长，单位是毫秒
});
return true; // 注意：这里返回 false 是因为我们在模态框中已经处理了返回逻辑
},
getNews() {
uni.request({
url: 'https://v.juhe.cn/toutiao/index?is_filter=1&key=fa911a3f200014fcfa49f0a83f73dd78',
method: 'GET',
data: {},
success: res => {
console.log(res);
uni.showToast({
title: res.result.data[0].title, // 这里设置你的提示信息内容
icon: 'none', // 可以设置图标的类型，'none'表示没有图标
duration: 2000 // 提示信息的显示时长，单位是毫秒
});
if (res.result.data) {
this.posts = res.result.data;
}
},
fail: err => {
console.log(err);
uni.showToast({
title: '调用接口失败:' + err.errMsg, // 这里设置你的提示信息内容
icon: 'none', // 可以设置图标的类型，'none'表示没有图标
duration: 2000 // 提示信息的显示时长，单位是毫秒
});
},
complete: () => {}
});
}
}
}
</script>
<style>
.container {
/* display: flex;
flex-direction: column;
align-items: center;
justify-content: center; */
height: 100vh;
padding: 20px;
background-color: #f5f5f5;
}
.header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
margin-top: 10px;
}
.avatar image {
width: 80pt;
height: 80pt;
border-radius: 50%;
margin-right: 10px;
border: 6px #efc674 solid;
}
.username {
font-size: 20px;
font-weight: bold;
}
.exit {
font-size: 12px;
margin-left: 6px;
margin-top: 3px;
}
.content {
width: 100%;
}
.post {
margin-bottom: 20px;
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
.post-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.post-title {
font-size: 18px;
font-weight: bold;
}
.post-date {
font-size: 14px;
color: #888888;
}
.post-content {
font-size: 16px;
line-height: 1.5;
}
</style>
content.vue里的内容:
<template>
<view class="container">
<view class="header">
<view class="title">{{ post.title }}</view>
</view>
<view class="header">
<view class="meta">{{ post.date }} by {{ post.author_name }}</view>
</view>
<view class="content">
<a :href="post.url">跳转至详情</a>
</view>
<view class="uni-title uni-common-mt" style="width: 100%;display: flex;justify-content:center;flex-wrap:wrap;">
<view class="image-content" v-if="post.thumbnail_pic_s">
<image style="width: 300px; background-color: #eeeeee;"
:src="post.thumbnail_pic_s" mode="aspectFit"></image>
</view>
<view class="image-content" v-if="post.thumbnail_pic_s02">
<image style="width: 300px; background-color: #eeeeee;"
:src="post.thumbnail_pic_s02" @error="imageError"></image>
</view>
<view class="image-content" v-if="post.thumbnail_pic_s03">
<image style="width: 300px; background-color: #eeeeee;"
:src="post.thumbnail_pic_s03" @error="imageError"></image>
</view>
</view>
<view class="footer">
<view class="tags">
<view v-for="(tag, index) in post.tags" :key="index" class="tag">{{ tag }}</view>
</view>
<view class="actions">
<button @click="likePost" :class="{ 'is-liked': isLiked }">
<text v-if="!isLiked">点赞</text>
<text v-else>已点赞</text>
</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
post: {},
isLiked: false, // 是否已点赞
};
},
onLoad: function(option) {
const item = JSON.parse(decodeURIComponent(option.item));
this.post = item;
},
methods: {
likePost() {
this.isLiked = !this.isLiked; // 切换点赞状态
// 在这里可以添加点赞的逻辑，比如发送请求到服务器
}
}
};
</script>
<style>
.container {
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.title {
font-size: 20px;
font-weight: bold;
}
.meta {
font-size: 14px;
color: #888;
}
.content {
margin-bottom: 20px;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.tags {
display: flex;
flex-wrap: wrap;
}
.tag {
display: inline-block;
padding: 5px 10px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 5px;
background-color: #f0f0f0;
font-size: 12px;
}
.actions {
display: flex;
align-items: center;
}
.btn {
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
margin-right: 10px;
}
.is-liked {
background-color: #007aff;
color: #fff;
}
</style>
login.vue里的内容:
<template>
<view class="container">
<view class="logo">
<image src="/static/logo.png" mode="aspectFit"></image>
</view>
<view class="form">
<view class="form-item">
<input class="input" type="text" placeholder="请输入用户名" v-model="username"></input>
</view>
<view class="form-item">
<input class="input" type="password" placeholder="请输入密码" v-model="password"></input>
</view>
<view class="form-item">
<button class="btn" @click="toLogin">登录</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
username: 'Xu01',
password: ''
}
},
onLoad() {
},
methods: {
toLogin() {
//在起始页面跳转到test.vue页面并传递参数
uni.reLaunch({
url: 'index?name=' + this.username
});
},
onBackPress(e) {
uni.showToast({
title: '请先登录！', // 这里设置你的提示信息内容
icon: 'none', // 可以设置图标的类型，'none'表示没有图标
duration: 2000 // 提示信息的显示时长，单位是毫秒
});
return true;
},
login() {
// 在这里编写登录逻辑
// 可以使用this.username和this.password获取输入的用户名和密码
// 发送登录请求到服务器进行验证
// 根据验证结果执行相应的操作，如跳转到其他页面或显示错误提示
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}
.logo {
margin-bottom: 20px;
}
.form {
width: 80%;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
}
.form-item {
margin-bottom: 20px;
}
.input {
width: 100%;
height: 40px;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 5px;
}
.btn {
width: 100%;
height: 40px;
background-color: #007aff;
color: #ffffff;
border: none;
border-radius: 5px;
font-size: 16px;
}
</style>
然后同样的把pages.json的内容替换。（这里是配置路由，如果不配置会找不到对应的页面）
pages.json的内容：
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/index/login",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/index/content",
"style": {
"navigationBarTitleText": "详情"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "my-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
- 电脑端测试
如图
点击 运行-》运行到浏览器-》Chrome
- 打包成安卓app（重点）
点击发行-》原生App-云打包(这时候需要注册登录就注册登一下)
其中，
1.点击修改manifest.json里面可以配置app图标、启动界面等
2.不要选择ios(ipa包)
3.选择使用公共测试证书
4.选择快速安心打包
中间有提示选择继续打包
如果提示安装插件之类的选择安装即可
云打包时间大概是5分钟
可以在菜单发行-》原生app查看云打包状态查看进度
安装apk
打包好的app地址会在控制台里
复制地址，找到电脑文件夹里的app
自己导入并安装到安卓手机里即可
以上是一个简单的示例。到此结束。
以下是一些tips:
uniapp官网
想要进一步学习可以访问官方文档。
更多的官方样例可以在开发工具里新建一个官方项目，进行学习
可以参考以下文章
文章链接
1240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
