KnowRbao_uni-app _UNI-APP

人生必须的知识就是引人向光明方面的明灯。这篇文章主要讲述KnowRbao_uni-app相关的知识，希望能为你提供帮助。
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="https://www.songbingjia.com/android/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>

这是新闻详情数据的页面：