KnowRbao_uni-app

Posted 2021-01-22 gk126

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>

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

啊哈哈哈哈哈哈哈哈哈，做的不好的地方，各位大神莫笑，还请多多指教，经验不足！