这个是我在学习过程中,写的一个demo案例,贴出来供大家参考。
项目结构截图
uniapp代码
pages list list.vue
<template>
<view class="outer">
<view class="row" v-for="item in listArr" :key="item.id" @tap="clickItem(item)">
<view class="title">{{item.id}}.{{item.title.toUpperCase()}}</view>
<view class="content">{{item.body}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//新闻
listArr:[]
};
},
methods:{
//点击每项
clickItem(obj){
uni.navigateTo({
url:'/pages/detail/detail?id=' + obj.id
});
},
getData(){
uni.showLoading({
title:'正在获取数据...',
mask:true
});
uni.request({
url:'https://jsonplaceholder.typicode.com/posts',
success:(res)=>{
//console.log(res)
this.listArr = res.data;
},
complete:()=>{
//关闭加载
uni.hideLoading();
}
})
}
},
onLoad() {
this.getData();
}
}
</script>
<style lang="scss">
.outer{
padding: 50rpx 30rpx;
.row{
padding: 20rpx 0;
border-bottom: 1px dotted #e4e4e4;
.title{
font-size: 36rpx;
padding-bottom: 15rpx;
color: #333333;
}
.content{
font-size: 28rpx;
color: #888888;
}
}
}
</style>
pages detail detail.vue
<template>
<view>
<view class="detail">
<view class="title">
<text :selectable="true" :user-select="true">
{{newsData.title && newsData.title.toUpperCase()}}
</text>
</view>
<view class="content">
<text :selectable="true" :user-select="true">
{{newsData.body}}
</text>
</view>
</view>
<view class="comments">
<view class="text">评论</view>
<view class="row" v-for="(item,index) in commentsData" :key="index">
<view class="top">
<view class="name">昵称:{{item.name.toUpperCase()}}</view>
<view class="mail">Email:{{item.email}}</view>
</view>
<view class="body">
<text :selectable="true" :user-select="true">
{{item.body}}
</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
id: null,
newsData:{},
commentsData:[]
};
},
methods:{
//获取新闻
getData(){
uni.showLoading({
title:'正在获取数据...',
mask:true
})
uni.request({
url:'https://jsonplaceholder.typicode.com/posts/' + this.id,
method:'GET',
success:(res)=> {
//console.log(res)
this.newsData = res.data;
},
complete:()=>{
//关闭加载状态
uni.hideLoading();
}
})
},
//获取评论
getComments(){
uni.request({
url:`https://jsonplaceholder.typicode.com/posts/${this.id}/comments`,
method:'GET',
success:(res)=> {
console.log(res)
this.commentsData = res.data;
}
})
}
},
onLoad(options) {
//
this.id = options.id;
//
this.getData();
//
this.getComments();
}
}
</script>
<style lang="scss">
.detail{
padding: 30rpx;
.title{
font-size: 46rpx;
color: #000;
padding-bottom: 40rpx;
border-bottom: 1px solid #999;
}
.content{
margin-top: 40rpx;
font-size: 35rpx;
color: #666;
padding-bottom: 60rpx;
line-height: 55rpx;
}
}
.comments{
padding: 30rpx;
background-color: #f8f8f8;
.text{
font-size: 46rpx;
margin-bottom: 30rpx;
}
.row{
border-top: 1px dashed #999;
padding-top: 40rpx;
margin-bottom: 40rpx;
.top{
font-size: 22rpx;
color: #999;
.name{
}
.mail{
}
}
.body{
font-size: 28rpx;
color: #555;
margin-top: 15rpx;
}
}
}
</style>
pages index index.vue
<template>
<view class="index-area">
</view>
</template>
<script>
export default {
data() {
return {
disabled: true
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
.index-area{
}
</style>
pages user user.vue
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
</style>
pages.json
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/list/list",
"style" :
{
"navigationBarTitleText" : "新闻列表",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/user/user",
"style" :
{
"navigationBarTitleText" : "我的",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/detail/detail",
"style" :
{
"navigationBarTitleText" : "详情页",
"enablePullDownRefresh" : false
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "新闻客户端",
"navigationBarBackgroundColor": "#336699",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"tabBar": {
"list": [
{
"pagePath": "pages/list/list",
"iconPath": "static/tab/news.png",
"selectedIconPath": "static/tab/news-s.png",
"text": "新闻"
},
{
"pagePath": "pages/user/user",
"iconPath": "static/tab/mine.png",
"selectedIconPath": "static/tab/mine-s.png",
"text": "我的"
}
]
}
}
app.vue
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/*每个页面公共css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
main.js
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
//接口地址
//http://119.45.221.185:4000/
测试
首页
详情页
这个简单的案例,希望能够帮助对uniapp的开发,有帮助。