uni-app开发项目模板
主要的代码如下：
pages.json
这里是添加页面的路径代码还可以设置标题：
{ "pages" : [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/index/index", "style" : { "navigationBarTitleText" : "知乎日报" } }, { "path" : "pages/index/details", "style" : { "navigationBarTitleText" : "详情" } } ], "globalStyle" : { "navigationBarTextStyle" : "black", "navigationBarTitleText" : "uni-app", "navigationBarBackgroundColor" : "#F8F8F8", "backgroundColor" : "#F8F8F8" } }
index.vue ;
获取知乎新闻数据的代码：
<template>
<view class="content">
<view class="uni-list">
<!-- <navigator url="">页面跳转</navigator> -->
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="opendet" :data-newsid="item.id">
<view class="uni-media-list">
<image class="uni-media-list-logo" :src="item.images[0]"></image>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{item.title}}</view>
<view class="uni-media-list-text-bottom uni-ellipsis">{{item.ga_prefix }}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
news: []
};
},
onLoad: function() {
uni.request({
url: ‘https://news-at.zhihu.com/api/4/news/latest‘,
method: ‘GET‘,
data: {},
success: res => {
//console.log(res);
this.news = res.data.stories;
}
});
},
methods: {
opendet(e){
var newid = e.currentTarget.dataset.newsid;
console.log(newid);
uni.navigateTo({
url: ‘../index/details?newsid=‘+newid
});
}
}
}
</script>
<style>
.uni-media-list-body {
height: auto;
}
.uni-media-list-text-top {
line-height: 1.6em;
}
</style>
这个是知乎日报数据的获取以及简单的渲染首页，
当我们想查看这条知乎新闻的详情信息的时候，我们需要创建一个新的页面，并渲染到详情页面。
其中我们需要考虑的是如何获取不同的新闻详情内容，我们可以根据不同的新闻ID，获取不同的详情内容
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="opendet" :data-newsid="item.id">
这里我直接在<view>标签绑定一个单击事件并获取新闻详情的id
details.vue ;
<template>
<view class="content">
<view class="title">{{title}}</view>
<view class="api-centent">
<rich-text class="richText" :nodes="bodys" style="width: 100%; height: 100%;"></rich-text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: ‘‘,
bodys: ‘‘,
share_url:‘‘
}
},
onLoad: function(e) {
console.log(e.newsid);
uni.request({
url: ‘https://news-at.zhihu.com/api/4/news/‘ + e.newsid,
method: ‘GET‘,
data: {},
success: res => {
/* console.log(res.data); */
/* this.title = res.data.title; */
this.bodys = res.data.body;
/* this.bodys = this.bodys.indexOf("“");
console.log(this.bodys); */
//replace()方法在字符串中用一些字符替换另一些字符
//stringObject.replace(regexp/substr,replacement)
this.bodys = this.bodys.replace(/“/g, ‘"‘);
this.bodys = this.bodys.replace(/”/g, ‘"‘);
},
fail: () => {
console.log("eeeeee");
},
complete: () => {}
});
}
}
</script>
<style>
.content {
/* flex-wrap:wrap允许下面元素自动换行 */
padding: 10upx 2%;
width: 96%;
flex-wrap: wrap;
}
.title {
line-height: 2em;
font-weight: 700;
font-size: 38upx;
}
.api-centent {
line-height: 2em;
}
</style>
这是新闻详情数据的页面：
啊哈哈哈哈哈哈哈哈哈，做的不好的地方，各位大神莫笑，还请多多指教，经验不足！