KnowRbao_uni-app
摘要：
uni-app開發專案模板
主要的程式碼如下：
pages.json
這裡是新增頁面的路徑程式碼還可以設定標題：
{
"pages" : [
//pages陣列中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io...
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>
這是新聞詳情資料的頁面：
啊哈哈哈哈哈哈哈哈哈，做的不好的地方，各位大神莫笑，還請多多指教，經驗不足！