两个小时完成一个简单项目——新闻App、新闻小程序，循序渐进的掌握uni-app

徐建明 發表於 2023-4-6 17:33:00

两个小时完成一个简单项目——新闻App、新闻小程序，循序渐进的掌握uni-app

<h2>效果图</h2>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409203811531-1168993367.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409203839663-1975975976.png"><img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409203923066-813070585.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409204001396-1109394454.png"><img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409204023504-1690105318.png">
<h2>一、创建项目</h2>
<code>uni-app</code> 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
<code>uni-app</code>在手，做啥都不愁。即使不跨端，<code>uni-app</code>也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习
<h3>1、创建新项目配置初始化</h3>
<h4>1.1、创建一个项目，项目名称为新新闻，自己做案例的时候可以使用随便起名</h4>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406105523064-621247371.png">
运行结果
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406111624725-2081432930.png">
<h4>1.2、项目文件</h4>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406111420534-1591630911.png">
<h4>1.3、在page文件下创建一个user页面</h4>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406111927039-2039764546.png">
<h4>1.4、在pages.json中配置内容</h4>
添加一个tabBar，图标在inconfont可免费下载
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_1dba237b-e174-4276-853d-fde03c66b005" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_1dba237b-e174-4276-853d-fde03c66b005" class="cnblogs_code_hide">
<pre>{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 {
 "path": "pages/index/index",
 "style": {
 "navigationBarTitleText": "新新闻"
 }
 }
 ,{
 "path" : "pages/user/user",
 "style" :
 {
 "navigationBarTitleText": "个人中心",
 "enablePullDownRefresh": false
 }

 }
],
// 全局配置
"globalStyle": {
 // 有比较亮的背景颜色尽量搭配白色文字
 "navigationBarTextStyle": "white",
 "navigationBarTitleText": "新新闻",
 "navigationBarBackgroundColor": "#31C27C",
 "backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
// 底部导航，路由跳转
"tabBar": {
 // 颜色，选中颜色，尽量选择跟图标一样的颜色
 "color": "#666",
 "selectedColor": "#31C27C",
 "list":[
 {
 // 头部标题
 "text": "首页",
 // 路径
 "pagePath": "pages/index/index",
 // 底部图标
 "iconPath": "static/images/home.png",
 // 底部选中图标
 "selectedIconPath": "static/images/home-h.png"
 },
 {
 "text": "个人",
 "pagePath": "pages/user/user",
 "iconPath": "static/images/user.png",
 "selectedIconPath": "static/images/user-h.png"
 }
 ]


}
}</pre>
</div>
View Code</div>
配置后效果如下
 <img alt="" width="172" height="305" loading="lazy" src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406114756149-914804313.png">  <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406114807235-2031133171.png">
<h3>2、实现横向滚动条样式</h3>
<h4>2.1、index/index.vue</h4>
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_4a3df7c1-8c90-4ebc-92bd-95874527abe6" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_4a3df7c1-8c90-4ebc-92bd-95874527abe6" class="cnblogs_code_hide">
<pre><template>

<view class="home">
 
 <scroll-view scroll-x class="navscroll">
 <view class="item" v-for="item in 8">国内</view>

 </scroll-view>
 
 <view class="row">每一行新闻内容</view>
</view>
</template>

<script>
export default {
 data() {
 return {
 title: 'Hello'
 }
 },
 onLoad() {

 },
 methods: {

 }
}
</script>

<style lang="scss" scoped>
.navscroll{
 height: 100rpx;
 background: #d7d7d7;
 // 显示这个导航不换行
 white-space: nowrap;
 // 这个是给导航滑块的给隐藏，虽然小程序没有显示，但是h5会出现
 /deep/ ::-webkit-scrollbar {
 width: 4px !important;
 height: 1px !important;
 overflow: auto !important;
 background: transparent !important;
 -webkit-appearance: auto !important;
 display: block;
 }
 .item{
 font-size:40rpx;
 // 显示一行
 display: inline-block;
 line-height: 100rpx;
 padding: 0 30rpx;
 color: #333;
 }
}
</style></pre>
</div>
View Code</div>
<img alt="" width="200" height="355" loading="lazy" src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406123650337-2045743837.png">
<h3>3、公共模块定义components</h3>
<h4>3.1、创建组件components</h4>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406124536687-625845616.png">
3.2、编写样式
把组件newsbox引入index.vue
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406132107470-342005316.png">
在newsbox.vue编写内容布局及样式（字体改36rpx）
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_0efa69e4-d2d9-42b6-840b-3d62a9398a71" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_0efa69e4-d2d9-42b6-840b-3d62a9398a71" class="cnblogs_code_hide">
<pre><template>
<view class="newsbox">
 
 <view class="pic">
 <image src="../../static/images/0.jpg" mode=""></image>
 </view>
 
 <view class="text">
 <view class="title">
 <view class="t">
 默认新闻标题默认新闻标题默认新闻标题默认新闻标题默认新闻标题默认新闻标题默认新闻标题
 </view>
 </view>
 <view class="info">
 <text>作者名称</text>
 <text>998浏览</text>
 </view>
 </view>
</view>
</template>

<script>
export default {
 name:"newsbox",
 data() {
 return {

 };
 }
}
</script>

<style lang="scss">
.newsbox{
// 显示一行
 display: flex;
// 图片样式
 .pic{
 width: 230rpx;
 height: 160rpx;
 image{
 width:100%;
 height: 100%;
 }
}
// 文字样式有上下结构
 .text{
 border: 1rpx solid red;
 // 自动把剩下的填满
 flex:1;
 padding-left: 20rpx;
 display: flex;
 flex-direction: column;
 // 弹性项目以均匀的间距放置在项目被推到开始和最后一个项目被推到结束的地方
 justify-content: space-between;

 .title{
 font-size: 38rpx;
 color: #333;
 .t{
 // 这边给标题文字两行显示省略号处理
 text-overflow: -o-ellipsis-lastine;
 overflow: hidden; //溢出内容隐藏
 text-overflow: ellipsis; //文本溢出部分用省略号表示
 display: -webkit-box; //特别显示模式
 -webkit-line-clamp: 2; //行数
 line-clamp: 2;
 -webkit-box-orient:vertical; //盒子中内容竖屏排列
 }
 }
 .info{
 font-size: 26rpx;
 color: #999;
 text{
 // jianju间距
 padding-right: 30rpx;
 }
 }
}
}
</style></pre>
</div>
View Code</div>
<img alt="" width="219" height="388" loading="lazy" src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406132843458-712228267.png">
<h3>4、布局个人中心页面定义组件默认值</h3>
4.1、在newsbox组件写插值语法，
newsbox.vue
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_c688a4e9-974d-4d58-b5d2-e6f8aec9e48a" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_c688a4e9-974d-4d58-b5d2-e6f8aec9e48a" class="cnblogs_code_hide">
<pre><template>
<view class="newsbox">
 
 <view class="pic">
 <image :src="item.picture" mode="aspectFill"></image>
 </view>
 
 <view class="text">
 <view class="title">
 <view class="t">
 {{item.title}}
 </view>
 </view>
 <view class="info">
 <text>{{item.author}}</text>
 <text>{{item.hits}}浏览</text>
 </view>
 </view>
</view>
</template>

<script>
export default {
 name:"newsbox",
 // 接受组件，然后是一个对象，
 props:{
 // 定义一个对象
 item:{
 type:Object,
 default(){
 return{
 title:"组件内默认标题",
 author:"张小三",
 hits:688,
 picture:"../../static/images/nopic.jpg"
 }
 }
 }
 },
 data() {
 return {

 };
 }
}
</script>

<style lang="scss">
.newsbox{
// 显示一行
 display: flex;
// 图片样式
 .pic{
 width: 230rpx;
 height: 160rpx;
 image{
 width:100%;
 height: 100%;
 }
}
// 文字样式有上下结构
 .text{
 // border: 1rpx solid red;
 // 自动把剩下的填满
 flex:1;
 padding-left: 20rpx;
 display: flex;
 flex-direction: column;
 // 弹性项目以均匀的间距放置在项目被推到开始和最后一个项目被推到结束的地方
 justify-content: space-between;

 .title{
 font-size: 36rpx;
 color: #333;
 .t{
 // 这边给标题文字两行显示省略号处理
 text-overflow: -o-ellipsis-lastine;
 overflow: hidden; //溢出内容隐藏
 text-overflow: ellipsis; //文本溢出部分用省略号表示
 display: -webkit-box; //特别显示模式
 -webkit-line-clamp: 2; //行数
 line-clamp: 2;
 -webkit-box-orient:vertical; //盒子中内容竖屏排列
 }
 }
 .info{
 font-size: 26rpx;
 color: #999;
 text{
 // jianju间距
 padding-right: 30rpx;
 }
 }
}
}
</style></pre>
</div>
View Code</div>
个人中心页面user.vue
<div class="cnblogs_code"><img id="code_img_closed_1449fb71-dca3-4517-94a9-05e49c58cb79" class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_1449fb71-dca3-4517-94a9-05e49c58cb79" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_1449fb71-dca3-4517-94a9-05e49c58cb79" class="cnblogs_code_hide">
<pre><template>
<view class="user">
 <div class="top">
 <image src="../../static/images/history.png"></image>
 <div class="text">浏览记录</div>
 </div>

<view class="content">
 <div class="row" v-for="item in 10">
 <newsbox></newsbox>
 </div>
</view>
</view>
</template>

<script>
export default {
 data() {
 return {

 };
 }
}
</script>

<style lang="scss">
.user{
.top{

 padding: 20px 0;
 background: #F8F8F8;
 color: #666;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 image{
 width: 150rpx;
 height: 150rpx;
 }
 .text{
 font-size: 38rpx;
 padding: 20rpx;
 }
}
}
.content{
 padding: 30rpx;
 .row{
 border-bottom: 1rpx solid #efefef;
 padding: 20rpx 0;
 }
}
</style></pre>
</div>
View Code</div>
<img alt="" width="244" height="433" loading="lazy" src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406135536534-2084170282.png">
<h3>5、根据不同条件渲染组件差异化</h3>
5.1、首页在文字下方是浏览量，个人中心浏览历史文字下方是发布时间
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406141148311-1693130582.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406151852743-1972970861.png">
<h3>6、点击导航显示高亮</h3>
做判断，什么时候需要显示高亮
<div class="cnblogs_code">
<pre><view class="item active" v-for="item in 8">国内</view> </pre>
</div>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406152538632-1286376039.png">
更改后：
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406153219378-828496163.png">
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406153250357-252534456.png"> 
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406153319110-945513833.png">
<h3>7、详情布局，将原生事件绑定到组件中</h3>
<h4>7.1、新建一个详情页detail.vue</h4>
<div class="cnblogs_code">
<pre>user.vue 和index.vue

<newsbox @click.native="goDetail"></newsbox>

　　　　 // 跳转到详情页
 goDetail(){
 uni.navigateTo({
 url:"../detail/detail"
 })
 }</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406154155596-1392308681.png">
<h4> 7.2、接下来布局详情页</h4>
首先一个框架
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406155550019-1279069721.png">
添加样式后：
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_b23642f6-7461-4c77-881d-592e86e52f25" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_b23642f6-7461-4c77-881d-592e86e52f25" class="cnblogs_code_hide">
<pre><template>
<view class="detail">
 <view class="title">把实体经济做实做强做优把实体经济做实做强做优把实体经济做实做强做优</view>
 <view class="info">
 <view class="author">编辑：张胜男</view>
 <view class="time">2020-12-23 15:20:00</view>
 </view>
 <view class="content">
 实体经济是支撑经济增长、保障国家安全的重要基础，是一国经济的立身之本，是财富创造的根本源泉，是国家强盛的重要支柱。

 </view>
 <view class="desscription">
 声明：本站的内容均采集与腾讯新闻，如果侵权请联系管理（2199904544@qq.com）进行整改删除，若有侵犯请及时联系管理员，谢谢您的支持。
 </view>
</view>
</template>

<script>
export default {
 data() {
 return {

 };
 }
}
</script>

<style lang="scss">
.detail{
padding: 30rpx;
.title{
 font-size:46rpx;
 color: #333;
 }
 // 编辑区域
 .info{
 background: #F6F6F6;
 padding: 20rpx ;
 display: flex;
 justify-content: space-between;
 margin: 40rpx 0;
 }
 .content{
 padding-bottom: 50rpx;
 }
 .desscription{
 background: #fef0f0;
 font-size: 26rpx;
 padding: 20rpx;
 color: #f89898;
 line-height: 1.8em;
 }
}
</style></pre>
</div>
View Code</div>
<img alt="" width="164" height="185" loading="lazy" src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406160542360-1656861877.png">
<h2>二、数据交互</h2>
<h3> 2.1、首页接口</h3>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406170223558-1916004424.png">
 
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406170104558-756791160.png">
 
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406170409365-1559161156.png">
 
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406170435427-2022236405.png">
<h3>2.2、导航内容切换</h3>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406172123328-1308217416.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406172144854-893500240.png">
 根据cid可以切换
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406172054671-779097885.png"><img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406172248266-1406216417.png">
<h3> 2.3、做一个判断</h3>
导航没有数据的时候就显示
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406173145300-1813577294.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406173102692-1351379772.png"> 
<h3>2.4、添加一个底部触底加载更多</h3>
onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406193131109-1136119663.png">
 
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406193214224-1969926519.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406193046281-467367644.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406193013496-2110068669.png">
 但是写完之后会出现一个bug，就是导航切换都是在第一页，
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406193457435-1735588497.png">
页面跳转为1，回到第一页，给一个空数组，清空数据
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406193624697-904532923.png">
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406193714840-1642002021.png">
<h3> 2.5、优化细节增加loading加载样式。</h3>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406195600184-670803721.png"> 
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406195629565-1942476821.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406195540022-876453933.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406195129553-1733138312.png">
 
<h3> 2.6、自动判断是0,1,2</h3>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406200150388-431375293.png">
 这里给个判断，如果等于2，就返回，不会再更新加载了
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230406200115559-2022057685.png">
 首页代码
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_6d350cd8-552d-4654-94e7-9cf75cc9d34f" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_6d350cd8-552d-4654-94e7-9cf75cc9d34f" class="cnblogs_code_hide">
<pre><template>

<view class="home">
 
 <scroll-view scroll-x class="navscroll">
 <view class="item" :class="index==navIndex ? 'active' : ''"
 v-for="(item,index) in navArr"
 @click="clickNav(index,item.id)"
 :key="item.id"
 >{{item.classname}}</view>
 </scroll-view>
 
 <view class="content">
 <view class="row" v-for="item in newsArr" :key="item.id">
 
 <newsbox :item="item" @click.native="goDetail"></newsbox>
 </view>
 </view>
 
 <view class="nodata" v-if="!newsArr.length">
 <image src="../../static/images/nodata.png" mode="widthFix"></image>
 </view>
 
 <view class="loading" v-if="newsArr.length">

 
 <view v-if="loading==1">数据加载中...</view>
 <view v-if="loading==2">没有更多了~~</view>
 </view>
</view>
</template>

<script>
export default {
 data() {
 return {
 // 定义一个变量，默认是一个0
 navIndex:0,
 navArr:[],
 newsArr:[],
 currentPage:1,
 // 定义一个状态 0默认 1加载中 2没有更多了，然后去上面判断
 loading:0
 }
 },
 onLoad() {
 // 调用
 this.getNavData();
 this.getNewsData();
 },
 onReachBottom(){
 console.log("到底部了");
 // 这里给个判断，如果等于2，就返回，不会在更新加载了
 if(this.loading==2){
 return;
 }
 this.currentPage++;
 this.loading=1;
 // 再次传新闻列表数据
 this.getNewsData();

 },
 methods: {
 // 点击导航切换 
 clickNav(index,id){
 this.navIndex=index;
 this.currentPage=1;
 this.newsArr=[];
 this.loading=0;
 // 重新做一个网络请求
 this.getNewsData(id);

 },
 // 跳转到详情页
 goDetail(){
 uni.navigateTo({
 url:"../detail/detail"
 })
 },
 // 获取导航列表数据
 getNavData(){
 uni.request({
 url:"https://ku.qingnian8.com/dataApi/news/navlist.php",

 success:res=>{
 console.log(res),
 this.navArr=res.data
 }
 })
 },
 // 获取新闻列表数据
 getNewsData(id=50){
 uni.request({
 url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
 data:{
 // 数据数量。默认接口有8条
 // num:5,
 // 接口数据的编号
 // cid:50
 cid:id,
 page:this.currentPage
 },
 success:res=>{
 console.log(res)
 if(res.data.length==0){
 this.loading=2
 }
 // 二维数组结构
 this.newsArr=[...this.newsArr,...res.data]
 }
 })
 }

}
}
</script>

<style lang="scss" scoped>
.navscroll{
 height: 100rpx;
 background: #d7d7d7;
 // 显示这个导航不换行
 white-space: nowrap;
 // 固定
 position: fixed;
 // 解决h5的top uniapp提供内置Css变量
 top:var(--windons--top);
 left: 0;
 z-index: 10;
 // top: var(--window-top);
 // 这个是给导航滑块的给隐藏，虽然小程序没有显示，但是h5会出现,直接复制
 /deep/ ::-webkit-scrollbar {
 width: 4px !important;
 height: 1px !important;
 overflow: auto !important;
 background: transparent !important;
 -webkit-appearance: auto !important;
 display: block;
 }
 .item{
 font-size:40rpx;
 // 显示一行
 display: inline-block;
 line-height: 100rpx;
 padding: 0 30rpx;
 color: #333;
 &.active{
 color: #31C27C;
 }
 }
}
.content{
 padding: 30rpx;
 // 标题栏，导航栏的位置 
 padding-top: 130rpx;
 .row{
 border-bottom: 1rpx solid #efefef;
 padding: 20rpx 0;
 }
}
.nodata{
 display: flex;
 justify-content: center;
 image{
 width: 360rpx;
 }
}
.loading{
 text-align: center;
 color: #888;
 font-size: 26rpx;
 line-height: 2em;
 }

</style></pre>
</div>
View Code</div>
<h3>2.7、详情跳转</h3>
<h4>1、将值带进去，一个classid跟一个id</h4>
<img alt="" width="395" height="247" loading="lazy" src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409192644907-1150525420.png">
 
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409192733195-472053367.png">
变量
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409192807780-792036757.png">
<h4>2、在详情页接收值，接收两个参数</h4>
<h5>1、先打印，测试在上一个页面能接到值</h5>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409193124697-1302912963.png">
 
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409193416777-413921511.png">
 
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409193521317-1951090338.png">
 
<h5> 2、使用接口拿到详情值</h5>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409194403937-1994499797.png">
 
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409194556753-271053832.png">
<h5>3、整个对象拿过来，先拿标题title</h5>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409194836781-1077791085.png">
上图的data是整个对象，所以直接写入
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409194925021-1873207149.png">
 
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409195016806-454512884.png">
 
<h5> 4、效果1文本问题</h5>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409195639374-920049017.png">
 
 日期时间戳需要转化，后面修改，然后就是文本，需要用到一个标签<rich-text></rich-text>
<h5>5、效果2，图片问题</h5>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409195901264-275274986.png">
 
 因为在content，所以可以直接使用css样式
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409200222683-112922214.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409200200286-1352950402.png">
<h5>6、使用正则修改小程序图片问题</h5>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409201034915-1291052250.png"><img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409201116802-2104061450.png">
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409201154839-482994710.png">
<h5> 7、js 时间戳转日期格式的方法（可以百度搜），这里提供一个公共库</h5>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409201449818-1674383676.png">
 
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409202455850-1269091033.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409202621676-1455559348.png">
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409202552164-152918794.png">
<h5> 8、设置导航条</h5>
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409203345712-533166701.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409203451704-338414154.png">
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230409203426291-571367770.png">
<h3>2.8、历史浏览器记录</h3>
 2.8.1、StorageSync读写缓存渲染记录页面
 detail.vue
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411115957138-95808710.png">
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411120340648-1019573391.png">
 
 
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411120433070-1358304035.png">
开始会一条信息替换，所以用数据堆加
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411120549953-85951721.png">
 
效果：
  <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411140810442-844117812.png"><img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411120722501-932750766.png">
 这时从这里还没带值进去，还有没有去重
<h3>2.9、处理findIndex索引数据去重优化细节</h3>
根据缓存的id是否相等
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411142125754-1633120497.png">
 去重成功
自动刷新
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411142428721-95621066.png">
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411142504433-921195705.png">
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411142742501-178181424.png">
 做一个判断，没有历史记录就是显示一张图片
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411192042245-923916041.png">
 
 
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411192152452-1323015074.png">
 <img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411192252455-369914364.png">
<h2>三、H5打包</h2>
打开manifest.json文件 
<img src="https://img2023.cnblogs.com/blog/2762799/202304/2762799-20230411193713324-2135850772.png">
<h2>四、源码</h2>
https://gitee.com/isbamboo--555/journalism
  
来源：https://www.cnblogs.com/ischengzi/p/17292997.html

頁: [1]

琼殿技术论坛's Archiver

两个小时完成一个简单项目——新闻App、新闻小程序，循序渐进的掌握uni-app