???作者簡介：大家好，我是亦世凡華、渴望知識儲備自己的一名在校大學(xué)生
??個人主頁：亦世凡華、
??系列專欄：uni-app
??座右銘：人生亦可燃燒，亦可腐敗，我愿燃燒，耗盡所有光芒。
??引言
?????????經(jīng)過web前端的學(xué)習(xí)，相信大家對于前端開發(fā)有了一定深入的了解，今天我開設(shè)了uni-app專欄，主要想從移動端開發(fā)方向進(jìn)一步發(fā)展，而對于我來說寫移動端博文的第二站就是uni-app開發(fā)，希望看到我文章的朋友能對你有所幫助。
目錄
項(xiàng)目搭建
配置tabBar路由
設(shè)置基礎(chǔ)內(nèi)容
導(dǎo)航欄點(diǎn)擊樣式設(shè)置
新聞詳情頁布局
新聞列表數(shù)據(jù)的詳細(xì)展示
實(shí)現(xiàn)上拉觸底效果
獲取參數(shù)并跳轉(zhuǎn)到詳情頁
項(xiàng)目的打包上線
項(xiàng)目開源Github
項(xiàng)目搭建
今天實(shí)現(xiàn)一個簡單的新聞列表的小案例，并制作成一個APP在手機(jī)上下載使用，項(xiàng)目很簡單，僅僅就只需要有兩個路由來實(shí)現(xiàn)：index和user。如果第一次接觸uni-app的話，歡迎訂閱一下本專欄，學(xué)習(xí)里面的文章，項(xiàng)目的實(shí)現(xiàn)原理基本可以搞懂，廢話不多說，直接上手操作。
配置tabBar路由
因?yàn)閮H有兩個路由，所有在pages頁面新建頁面時，會自動生成配置路徑，只要自己設(shè)置導(dǎo)航欄的標(biāo)題即可，如下：
接下來需要對導(dǎo)航欄的標(biāo)題顏色進(jìn)行設(shè)置，這里我就設(shè)置在全局樣式里面了，如果你對某一個頁面需要指定特別的樣式，可以在當(dāng)前頁面的路徑的pages里單獨(dú)設(shè)置顏色來覆蓋全局樣式，這里不再贅述，如下：
設(shè)置好導(dǎo)航欄的樣式之后，便可以著手配置tabBar的相關(guān)樣式設(shè)置了，這里的話可以設(shè)置一個點(diǎn)擊的圖表，圖表可以自己在阿里云的字體圖標(biāo)庫進(jìn)行尋找，地址：iconfont-阿里巴巴矢量圖標(biāo)庫 ：
選擇自己喜歡的圖表樣式，將圖片下載下來即可，然后導(dǎo)入到本地中進(jìn)行引入即可：
設(shè)置基礎(chǔ)內(nèi)容
接下來實(shí)現(xiàn)新聞列表的基礎(chǔ)內(nèi)容，如下：
<template>
<view>
<scroll-view scroll-x class="navscroll">
<view class="item">國內(nèi)</view>
<view class="item">國內(nèi)</view>
<view class="item">國內(nèi)</view>
<view class="item">國內(nèi)</view>
<view class="item">國內(nèi)</view>
<view class="item">國內(nèi)</view>
<view class="item">國內(nèi)</view>
<view class="item">國內(nèi)</view>
</scroll-view>
<view class="connent">
<view class="row" v-for="item in 10">
數(shù)據(jù)
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.navscroll{
height: 100rpx;
background: #F7F8FA;
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;
}
}
.connent {
padding: 30rpx;
.row{
border: 1px dotted #efefef;
padding: 15rpx 0;
}
}
</style>
接下來實(shí)現(xiàn)瀏覽歷史的基礎(chǔ)內(nèi)容，如下：
<template>
<view class="user">
<view class="top">
<image src="../../static/logo.png" mode=""></image>
<text>瀏覽歷史</text>
</view>
<view class="connent">
數(shù)據(jù)
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.user{
.top{
padding: 50rpx 0;
background: #F8F8F8;
color: #555;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image{
width: 150rpx;
height: 150rpx;
}
.text{
font-size: 38rpx;
padding-top: 20rpx;
}
}
.connent {
padding: 30rpx;
.row{
border: 1px dotted #efefef;
padding: 15rpx 0;
}
}
}
</style>
因?yàn)樾侣劻斜斫缑婧蜑g覽歷史界面都需要一些相同的數(shù)據(jù)，這里的話就可以將要展現(xiàn)的數(shù)據(jù)單獨(dú)放在一個components組件里面進(jìn)行一些數(shù)據(jù)的共享，通過設(shè)置一個props對象，將相關(guān)要展示的界面內(nèi)容通過父組件傳遞過來的props數(shù)據(jù)進(jìn)行相關(guān)展示，如下：
<template>
<view class="newsbox">
<view class="pic">
<image :src="item.picurl" mode="aspectFill"></image>
</view>
<view class="text">
<view class="title">{{item.title}}</view>
<view class="info" v-if="!item.looktime">
<text>作者：{{item.author}}</text>
<text>{{item.hits}}瀏覽</text>
</view>
<view class="info" v-else>
<text>瀏覽時間：{{item.looktime}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
name:"newsbox",
props:{
item:{
type:Object,
default(){
return {
title:"組件內(nèi)默認(rèn)的標(biāo)題",
author:"張三",
hits:668,
picurl:"../../static/nopic.png",
looktime:"2023-04-04 18:14:46"
}
}
}
},
data() {
return {
};
}
}
</script>
<style lang="scss">
.newsbox{
display: flex;
.pic{
width: 229.5rpx;
height: 160rpx;
image{
width: 100%;
height: 100%;
}
}
.text{
flex: 1;
padding: 20rpx;
display: flex;
flex-direction: column; // 上下排列
justify-content: space-between; // 兩側(cè)排列
.title{
font-size: 32rpx;
color: #333;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出內(nèi)容隱藏
text-overflow: ellipsis; //文本溢出部分用省略號表示
display: -webkit-box; //特別顯示模式
-webkit-line-clamp: 1; //行數(shù)
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中內(nèi)容豎直排列
}
.info{
font-size: 26rpx;
color: #999;
text{
padding-right: 30rpx;
}
}
}
}
</style>新聞列表和瀏覽歷史調(diào)用components組件，并通過props進(jìn)行數(shù)據(jù)傳參：
導(dǎo)航欄點(diǎn)擊樣式設(shè)置
接下來設(shè)置導(dǎo)航欄的點(diǎn)擊樣式，當(dāng)用戶進(jìn)行相關(guān)導(dǎo)航按鈕的點(diǎn)擊時，該文章會產(chǎn)生高亮效果，我們只需要動態(tài)綁定一個class屬性，當(dāng)我們選擇的按鈕等于當(dāng)前的元素下標(biāo)時，產(chǎn)生高亮效果，具體操作如下：
新聞詳情頁布局
設(shè)置點(diǎn)擊新聞列表頁面的新聞內(nèi)容進(jìn)行頁面的跳轉(zhuǎn)，這里可以使用自定義事件，如果要將原生事件綁定到組件當(dāng)中去，可以通過 .native 進(jìn)行解決，詳情可參考官方文檔，如下：????????
這里我設(shè)置好新聞列表的路由界面后，設(shè)計點(diǎn)擊事件可以通過navigateTo實(shí)現(xiàn)頁面跳轉(zhuǎn)，如下：
設(shè)置好跳轉(zhuǎn)路徑后，接下來可以通過設(shè)置新聞詳情頁的內(nèi)容布局，大致情況設(shè)置如下：
<template>
<view class="detail">
<view class="title">新聞標(biāo)題</view>
<view class="info">
<view class="author">編輯：張三</view>
<view class="time">2023-12-13 15:34:59</view>
</view>
<view class="content">
內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容as
</view>
<view class="description">
聲明：本站的內(nèi)容均采集與騰訊新聞，如果侵權(quán)請聯(lián)系管理（12345676890@qq.com）進(jìn)行整改刪除，本站進(jìn)行了內(nèi)容采集不代表本站及作者觀點(diǎn)，若有侵權(quán)請及時聯(lián)系管理員，謝謝您的支持。
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.detail{
padding: 30rpx;
.title{
font-size: 46tpx;
color: #333;
}
.info{
background: #f6f6f6;
padding: 20rpx;
font-size: 25rpx;
color: #666;
display: flex;
justify-content: space-between;
margin: 40rpx 0;
}
.content{
padding-bottom: 50rpx;
}
.description{
background: #FEF0F0;
font-size: 26rpx;
padding: 20rpx;
color: #F89898;
line-height: 1.8em;
}
}
</style>
新聞列表數(shù)據(jù)的詳細(xì)展示
接下來實(shí)現(xiàn)調(diào)用接口來展示詳細(xì)的數(shù)據(jù)，如下：
通過傳遞item的id來獲取不同id下導(dǎo)航欄給我們展示的新聞數(shù)據(jù)
然后給一個圖片用來展示，沒有數(shù)據(jù)時頁面的樣式
具體實(shí)現(xiàn)的結(jié)果如下：
實(shí)現(xiàn)上拉觸底效果
接下來需要實(shí)現(xiàn)上拉觸底的效果，實(shí)現(xiàn)上拉觸底效果的函數(shù)為：onReachBottom，如下：
為了呈現(xiàn)具體的效果，我將瀏覽器的網(wǎng)速設(shè)置為低速3G，如下：
獲取參數(shù)并跳轉(zhuǎn)到詳情頁
通過設(shè)置點(diǎn)擊函數(shù)傳參，將item參數(shù)傳遞到函數(shù)當(dāng)中，并通過模板字符串實(shí)現(xiàn)傳參，如下：
傳遞完參數(shù)之后，設(shè)置新聞詳情界面的布局，將訪問的數(shù)據(jù)進(jìn)行緩存，相同的數(shù)據(jù)進(jìn)行去重，詳細(xì)代碼如下：
<template>
<view class="detail">
<view class="title">{{detail.title}}</view>
<view class="info">
<view class="author">編輯：{{detail.author}}</view>
<view class="time">發(fā)布日期：{{detail.posttime}}</view>
</view>
<view class="content">
<rich-text :nodes="detail.content"></rich-text>
</view>
<view class="description">
聲明：本站的內(nèi)容均采集與騰訊新聞，如果侵權(quán)請聯(lián)系管理（12345676890@qq.com）進(jìn)行整改刪除，本站進(jìn)行了內(nèi)容采集不代表本站及作者觀點(diǎn)，若有侵權(quán)請及時聯(lián)系管理員，謝謝您的支持。
</view>
</view>
</template>
<script>
import { parseTime } from '../utils/tool.js'
export default {
data() {
return {
options:null,
detail:{},
};
},
onLoad(e) {
this.options = e
this.getDetail()
},
methods:{
getDetail(){
uni.request({
url:'https://ku.qingnian8.com/dataApi/news/detail.php',
data:this.options,
success:res=>{
// res.data.posttime = parseTime(res.data.posttime) // 時間有點(diǎn)老，我就注釋掉了換固定時間
res.data.posttime = '2023-04-04 18:37:49'
res.data.content = res.data.content.replace(/<img/gi,'<img style="max-width:100%"')
this.detail = res.data
this.saveHistory()
uni.setNavigationBarTitle({
title:this.detail.title
})
}
})
},
// 保存瀏覽歷史
saveHistory(){
let historyArr = uni.getStorageSync("historyArr") || []
let item = {
id:this.detail.id,
classid:this.detail.classid,
picurl:this.detail.picurl,
title:this.detail.title,
looktime:parseTime(Date.now())
}
let index = historyArr.findIndex(i=>{
return i.id == this.detail.id
})
if(index>=0){
historyArr.splice(index,1)
}
historyArr.unshift(item)
historyArr=historyArr.slice(0,10)
uni.setStorageSync("historyArr",historyArr)
}
}
}
</script>
<style lang="scss">
.detail{
padding: 30rpx;
.title{
font-size: 46tpx;
color: #333;
}
.info{
background: #f6f6f6;
padding: 20rpx;
font-size: 25rpx;
color: #666;
display: flex;
justify-content: space-between;
margin: 40rpx 0;
}
.content{
padding-bottom: 50rpx;
// H5端
// /deep/ img{
// max-width: 100%;
// }
}
.description{
background: #FEF0F0;
font-size: 26rpx;
padding: 20rpx;
color: #F89898;
line-height: 1.8em;
}
}
</style>設(shè)置完新聞列表的具體內(nèi)容之后，當(dāng)我們再點(diǎn)擊瀏覽歷史的路由之后，將獲取傳遞過來的參數(shù)以及存放在瀏覽器緩存中的數(shù)據(jù)，并在頁面中進(jìn)行展現(xiàn)，詳細(xì)代碼如下：
<template>
<view class="user">
<view class="top">
<image src="../../static/logo.png" mode=""></image>
<text>瀏覽歷史</text>
</view>
<view class="connent">
<view class="row" v-for="item in listArr">
<newsbox :item="item" @click.native='goDetail(item)'></newsbox>
</view>
</view>
<view class="nohistory" v-if="!listArr.length">
<image src="../../static/images/no-data.jpg" mode="widthFix"></image>
<text>暫無瀏覽記錄</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
listArr:[]
};
},
onShow() {
this.getData()
},
methods:{
// 跳轉(zhuǎn)到詳情頁
goDetail(item){
uni.navigateTo({
url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
})
},
// 獲取緩存瀏覽記錄
getData(){
let hisArr = uni.getStorageSync("historyArr") || []
this.listArr = hisArr
}
}
}
</script>
<style lang="scss">
.user{
.top{
padding: 50rpx 0;
background: #F8F8F8;
color: #555;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image{
width: 150rpx;
height: 150rpx;
}
.text{
font-size: 38rpx;
padding-top: 20rpx;
}
}
.connent {
padding: 30rpx;
.row{
border: 1px dotted #efefef;
padding: 15rpx 0;
}
}
.nohistory{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image{
width: 450rpx;
}
.text{
font-size: 26rpx;
color:#888;
}
}
}
</style>具體效果如下：
項(xiàng)目的打包上線
項(xiàng)目沒問題之后，可以在微信小程序下進(jìn)行模擬運(yùn)行，如下：
沒有問題之后，項(xiàng)目文件就會出現(xiàn)一個打包的文件夾，unpackage，如下：
接下來進(jìn)行各個平臺進(jìn)行上線，如果你是第一次使用這個工具的話，需要進(jìn)行一些基礎(chǔ)的配置：
H5平臺上線
設(shè)置如下Web配置的基礎(chǔ)設(shè)施
接下來點(diǎn)擊編輯器工具欄上的發(fā)行選項(xiàng)，選擇 網(wǎng)站-PC Web或手機(jī)H5
微信小程序平臺上線
點(diǎn)擊發(fā)行中的小程序-微信平臺發(fā)行
這里也可以設(shè)置為體驗(yàn)版，掃碼進(jìn)入之后應(yīng)該是沒數(shù)據(jù)的，可以通過手機(jī)打開調(diào)試模式來或取數(shù)據(jù)
APP平臺上線
這里先進(jìn)行App圖表進(jìn)行設(shè)置，選擇相應(yīng)的圖表
點(diǎn)擊編輯器發(fā)行的第一個，原生App云打包，選擇云端證書直接打包即可。
經(jīng)過一段時間的等待，控制臺提示我們打包成功，如下：
弄到這個apk文件之后，可以發(fā)到QQ或微信上進(jìn)行安裝下載即可
ok，傳遞到手機(jī)QQ上，點(diǎn)擊下載即可，如下
項(xiàng)目開源Github
接下來進(jìn)行項(xiàng)目的開源，給出如下詳細(xì)步驟：
創(chuàng)建遠(yuǎn)程倉庫：進(jìn)入github網(wǎng)址，登錄自己的賬號后點(diǎn)擊右上角頭像新建倉庫，如下
創(chuàng)建完成后，會跳轉(zhuǎn)到如下界面，上面代碼詳細(xì)的告訴你如何將代碼提交到遠(yuǎn)程庫：?
提交代碼需要借用一個 git 工具，如何下載這里不再贅述，自行百度。如果想詳細(xì)的了解git的使用，可以參考一下我之前的專欄：git專欄 ，詳細(xì)操作如下：
生成本地倉庫：具體步驟如下：
git init 生成工作區(qū)
git add . 提交到暫存區(qū)
git commit -m "news" 提交到版本區(qū)
推送到遠(yuǎn)程倉庫：具體步驟如下：
git remote add origin git@github.com:ztK63LrD/Today-s- News.git?? 關(guān)聯(lián)別名
git push -u origin main 推送分支
推送完成之后，刷新github頁面就會將我們推送的代碼呈現(xiàn)在頁面上，如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-408001.html
因?yàn)槲以趯懲觏?xiàng)目之后再推送到遠(yuǎn)程倉庫的，因?yàn)閮H僅是個小案例，就不再創(chuàng)建其它子分支了，給出項(xiàng)目的源地址文件：GitHub - ztK63LrD/Today-s-News: 簡單的新聞列表案例 ，可自行g(shù)it clone 進(jìn)行到本地進(jìn)行測試，如果可以的話還請一鍵三聯(lián)或者給項(xiàng)目點(diǎn)個小星星，您的支持就是我創(chuàng)作的最大動力。文章來源地址http://www.zghlxwxcb.cn/news/detail-408001.html
到了這里，關(guān)于uni-app--》如何制作一個APP并使用？的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
