uni-app学习笔记(一):新闻列表实战

    科技2022-07-13  138

    uni-app新闻项目实战笔记

    最近在上安卓开发课程,使用的是HbuilderX进行uni-app的开发,刚刚看了腾讯课堂上的一个相关入门课程,跟着视频进行了一下项目实战,就随带记了一些笔记,方便自己以后复习。 关于接口的说明在另一篇博客中: https://blog.csdn.net/qq_45753838/article/details/108917277

    新建项目news和hello。

    将hello项目里的common文件夹复制到news项目中,照着hello项目里的App.vue,在news项目中App.vue中相应的位置加上**@import ‘./common/uni.css’;**,保存一下。 (注意,同时要将hello项目中static文件夹下的uni.ttf复制到news项目中的static文件夹下,否则会运行失败。)

    打开news项目中pages下的index文件夹下中的index.vue,插入uni-list代码块,构建新闻列表。 (注意:新闻列表uni-list代码块的自定义方法详见https://blog.csdn.net/zhengzizhi/article/details/105020140 )

    在中插入onload函数实现参数的接收和与详情页实现交互,拿到详情数据,并对info页面进行相应的布局。 (注意:在引入详情页的内容的时候,发现内容是html格式,所以要用rich-text组件)

    对index.vue进行修改,使其在数据加载的时候 ,使其出现加载中的图标。

    记下对应详情页面的id,在pages.json中加入condition代码块,修改相应的值,实现打开项目即跳转到对应id的详情页面。在运行到页面中选择页面名称,即可直接运行到对应页面。

    Processed: 0.010, SQL: 8