基于uni-app开发微信小程序_手牵手带你开发【懂你找图】项目

锅巴沙丁 發表於 2020-3-14 10:30:00

基于uni-app开发微信小程序__手牵手带你开发【懂你找图】项目

<h3>前戏</h3>
某一天的夜里，敲完了代码之后便直接倒在床上睡着了，醒来时只记得梦里的一句话：“想要成为高手，就必须要大量实践，大量做项目，必须要把自己不会的东西全部吃透，不要得过且过。”，猛然想起是一位大神前辈对我说的，工作之后每天加班，回家之后就不想学习了，总想着一把锤子搞定所有钉子，这样是不行的，于是我就下了几百G的项目实战视频，有Vue、React、Node.js、Angular、Flutter、各个框架源码分析。。。我计划今年把它们全部干完，每做一个项目我都会写一篇博客来记录开发过程和收获，我想着通过大量的项目练习来让自己变成熟练工种，然后再去看源码就会比较轻松；接下来就让我牵着同学们的小手带你们开发一款基于uni-app的微信小程序项目，项目名字叫【懂你找图】。
 
<h3>项目介绍</h3>
做这个项目之前，同学们最好写过2-3个移动端的页面，有一定的JS基础，比如map，forEach函数的使用，Promise的使用，掌握Vue的基本语法，基本的生命周期，什么是Watch？怎么使用一个Component？子传父 / 父传子的实现方式。
没有基础的同学也不要担心，可以跟着把项目写完，然后把不理解的地方单独抽出来，逐个学习，然后再把项目独立做一遍就完事了。
这个是项目做完之后的效果：
<img src="https://img2018.cnblogs.com/i-beta/1783433/202003/1783433-20200301131028293-191300726.png" alt="" width="309" height="535">
 
这个项目我会带领同学们写完首页的模块，其他模块由于API接口还没有写好，暂时不做，等以后写好了，我会马上更新，接下来我们就进入正片环节。
 
<h3>1.项目准备</h3>
<h4>1.1开发方式</h4>
uni-app为我们提供2种开发方式：
1.使用DCloud公司提供HBuilderX工具来快速开发；
2.使用脚手架来快速开发（我们这次项目使用此方式）；
 
<h4>1.2脚手架搭建项目</h4>
1.全局安装，如果你以前安装过就不需要重复安装了。
<div class="cnblogs_code">
<pre>npm install -g @vue/cli</pre>
</div>
2.创建项目。
<div class="cnblogs_code">
<pre>vue create -p dcloudio/uni-preset-vue dnpicture</pre>
</div>
3.启动项目（微信小程序）。
<div class="cnblogs_code">
<pre>npm run dev:mp-weixin</pre>
</div>
4.在微信小程序开发者工具导入项目。
 注意导入项目的路径。
<img src="https://img2018.cnblogs.com/i-beta/1783433/202003/1783433-20200301140154987-734245728.png" alt="" width="708" height="399">
 
 
 
<h4>1.3搭建过程中可能遇到的问题</h4>
容易出现 vue 和 vue-template-complier版本不一致的问题。
<img src="https://img2018.cnblogs.com/i-beta/1783433/202003/1783433-20200301132922420-691588745.png" alt="" width="811" height="190">
 
 根据提示重新安装对应的vue版本即可 npm install vue@2.6.10，然后再重新运行项目 npm run dev:mp-weixin。
 
<h4>1.4安装sass依赖</h4>
<div class="cnblogs_code">
<pre>npm install sass-loader node-sass</pre>
</div>
 
<h3>2.项目搭建</h3>
<h4>2.1新增tabbar页面</h4>
<table style="height: 139px; width: 422px" border="0">
<tbody>
<tr>
<td style="text-align: center">页面名称</td>
<td style="text-align: center">路径</td>
</tr>
<tr>
<td style="text-align: center">首页</td>
<td style="text-align: center">home/index.vue</td>
</tr>
<tr>
<td style="text-align: center">横屏</td>
<td style="text-align: center">horizontal/index.vue</td>
</tr>
<tr>
<td style="text-align: center">精美视频</td>
<td style="text-align: center">video/index.vue</td>
</tr>
<tr>
<td style="text-align: center">搜索</td>
<td style="text-align: center">search/index.vue</td>
</tr>
<tr>
<td style="text-align: center">我的</td>
<td style="text-align: center">mine/index.vue</td>
</tr>
</tbody>
</table>
 
<img src="https://img2018.cnblogs.com/i-beta/1783433/202003/1783433-20200301135005225-1409197246.png" alt="" width="757" height="400">
 
新建完页面之后，我们再去pages.json文件里面添加页面路径和tabbar对应的图片和样式。
<div class="cnblogs_code"><img id="code_img_closed_e4e8b853-b7e4-4b12-9727-ad1cfc9574d4" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_e4e8b853-b7e4-4b12-9727-ad1cfc9574d4" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_e4e8b853-b7e4-4b12-9727-ad1cfc9574d4" class="cnblogs_code_hide">
<pre>{
"pages": [{
 "path": "pages/home/index",
 "style": {
 "navigationBarTitleText": "首页"
 }
 },
 {
 "path": "pages/horizontal/index",
 "style": {
 "navigationBarTitleText": "横屏"
 }
 },
 {
 "path": "pages/video/index",
 "style": {
 "navigationBarTitleText": "精美视频"
 }
 },
 {
 "path": "pages/search/index",
 "style": {
 "navigationBarTitleText": "搜索"
 }
 },
 {
 "path": "pages/mine/index",
 "style": {
 "navigationBarTitleText": "我的"
 }
 }
],
"globalStyle": {
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "uni-app",
 "navigationBarBackgroundColor": "#F8F8F8",
 "backgroundColor": "#F8F8F8"
},
"tabBar": {
 "color": "#8a8a8a",
 "selectedColor": "#d4237a",
 "backgroundColor": "#fff",
 "position": "bottom",
 "borderStyle": "black",
 "list": [{
 "pagePath": "pages/home/index",
 "text": "首页",
 "iconPath": "./static/icon/_home.png",
 "selectedIconPath": "./static/icon/home.png"
 },
 {
 "pagePath": "pages/horizontal/index",
 "text": "横屏",
 "iconPath": "./static/icon/_img.png",
 "selectedIconPath": "./static/icon/img.png"
 },
 {
 "pagePath": "pages/video/index",
 "text": "精美视频",
 "iconPath": "./static/icon/_videocamera.png",
 "selectedIconPath": "./static/icon/videocamera.png"
 },
 {
 "pagePath": "pages/search/index",
 "text": "搜索",
 "iconPath": "./static/icon/_search.png",
 "selectedIconPath": "./static/icon/search.png"
 },
 {
 "pagePath": "pages/mine/index",
 "text": "我的",
 "iconPath": "./static/icon/_my.png",
 "selectedIconPath": "./static/icon/my.png"
 }
 ]
}

}</pre>
</div>
pages.json</div>
接下来我们需要在App.vue中全局引入字体图标文件。
<div class="cnblogs_code"><img id="code_img_closed_12790ec9-9b55-4166-8d27-18f4d0e8f860" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_12790ec9-9b55-4166-8d27-18f4d0e8f860" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_12790ec9-9b55-4166-8d27-18f4d0e8f860" class="cnblogs_code_hide">
<pre><script>
export default {
 onLaunch: function() {
 },
 onShow: function() {
 },
 onHide: function() {
 }
}
</script>

<style>
@import "./styles/iconfont.wxss";
@import "./styles/base.wxss";
</style></pre>
</div>
App.vue</div>
引入成功之后，就可以看到如下效果啦。
<img src="https://img2018.cnblogs.com/i-beta/1783433/202003/1783433-20200301140219908-1839573506.png" alt="" width="352" height="490">
 
 
 注意：要记得把icon和styles文件夹放到项目中去哦。
styles文件加放到和App.vue同层级目录下，icon文件夹放入static文件夹里面。
 
<h4>2.2 uni-ui介绍</h4>
文档： https://uniapp.dcloud.io/component/README?id=uniui 
uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
 uni-ui不包括基础组件，它是基础组件的补充：
 数字角标、日历、卡片、折叠面板、倒计时、抽屉、悬浮按钮、收藏按钮、底部购物导航、宫格、图标、索引列表、列表、加载更多、自定义导航栏、通告栏、数字输入框、分页器、弹出层、评分、搜索栏、分段器、步骤条、滑动操作、轮播图指示点、标签。
 
<h3>3.首页模块开发准备</h3>
<h4>3.1 功能分析</h4>
1.修改导航栏外观
2.使用分段器组件搭建子页面
3.封装自己的异步请求
 
<h4>3.2 搭建子页面</h4>
<ul>
<li>首页模块分为4个部分，分别是 推荐、分类、最新、专辑</li>
新建自定义组件来代替上述的4个页面
<ul>
<li>home-recommend</li>
<li>home-category</li>
<li>home-new</li>
<li>home-album</li>
</ul>
</ul>
<h4> 3.2.1 分段器介绍</h4>
 分段器是指uni-ui中的一个组件，其实就是俗称的标签页，tab栏（https://ext.dcloud.net.cn/plugin?id=54）
<img src="https://img2020.cnblogs.com/i-beta/1783433/202003/1783433-20200306155051956-1808105151.png" alt="" width="450" height="220">
<h4>3.2.2 分段器使用</h4>
<div class="cnblogs_code"><img id="code_img_closed_b754db25-aaad-4199-91c8-896d06bb1c68" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_b754db25-aaad-4199-91c8-896d06bb1c68" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_b754db25-aaad-4199-91c8-896d06bb1c68" class="cnblogs_code_hide">
<pre><template>
<view>
<view>
 <uni-segmented-control
 :current="current"
 :values="items.map(v=>v.title)"
 @clickItem="onClickItem"
 style-type="text"
 active-color="#d21974"
 ></uni-segmented-control>
 <view class="content">
 <view v-if="current === 0">
 </view>
 <view v-if="current === 1">
 </view>
 <view v-if="current === 2">
 </view>
 <view v-if="current === 3">
 </view>
 </view>
</view>
</view>
</template>

<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
components: {
uniSegmentedControl
},
data() {
return {
 items: [
 { title: "推荐" },
 { title: "分类" },
 { title: "最新" },
 { title: "专辑" }
 ],
 current: 0
};
},
methods: {
onClickItem(e) {
 if (this.current !== e.currentIndex) {
 this.current = e.currentIndex;
 }
}
}
};
</script>

<style lang="scss">

</style></pre>
</div>
分段器的使用</div>
 
<h4>3.3 封装自己的异步请求</h4>
为什么要封装？
<ol>
<li>原生的请求不支持promise；</li>
<li>uni-api的请求不能够方便的添加请求中效果；</li>
<li>uni-api的请求返回值是个数组，不方便取值；</li>
</ol>
封装的思路
<ol>
<li>基于原生promise来封装；</li>
<li>挂载到Vue的原型上；</li>
<li>通过this.request的方式来使用；</li>
</ol>
<div class="cnblogs_code"><img id="code_img_closed_f12aae58-5e09-4eb0-95ca-92ded37f9149" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_f12aae58-5e09-4eb0-95ca-92ded37f9149" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_f12aae58-5e09-4eb0-95ca-92ded37f9149" class="cnblogs_code_hide">
<pre>/*
基于原生promise封装request
发请求之前显示'加载中...'
请求完成之后隐藏'加载中...'
*/

export default (params) => {
uni.showLoading({
title: '加载中'
});
return new Promise((resolve, reject)=>{
wx.request({
 ...params,
 success(res) {
 resolve(res.data);
 },
 fail(err) {
 reject(err);
 },
 complete(){
 uni.hideLoading();
 }
})
})
}</pre>
</div>
request</div>
在main.js里面将request函数挂载到Vue的原型上
<img src="https://img2020.cnblogs.com/i-beta/1783433/202003/1783433-20200306174307724-191496377.png" alt="">
 
 
<h3>4.首页-推荐模块开发</h3>
<h4>4.1 功能介绍</h4>
<ol>
<li>数据动态渲染；</li>
<li>moment.js的使用；</li>
<li>基于scroll-view的分页加载；</li>
</ol>
<h4>4.2 实现过程</h4>
首页推荐这个页面非常简单，没有任何技术含量。。。
首先我们把静态页面写出来，然后发送请求获取数据然后使用v-for指令循环渲染数据，渲染图片的时候注意接口有没有带rule这个属性，如果有需要把thumb属性和rule进行拼接，这里约定好<Height>的值为300，然后注意一下图像要使用widthFix还是aspectFill，这些都是非常基础的知识，大家可以自行到微信小程序的官方开发文档里面找到，如果你不懂，还不愿意自己去找资料学习，那我也没办法啦。
日期部分使用的是moment.js库，下面是他的文档地址：
http://momentjs.cn/docs/#/displaying/
<img src="https://img2020.cnblogs.com/i-beta/1783433/202003/1783433-20200309121014277-33214869.png" alt="" width="479" height="391">
 
接下来说一说分页，无非就是把最顶级的view 标签改成scroll-view标签，加上一个scroll-y属性，再加上一个触底事件@scrolltolower=“handleScrollToLower”即可，这些东西uni-app官网都有，由于这个项目是使用uni-app来开发，所以很多API和组件都需要在uni-app文档和微信小程序的文档穿插查找，搞技术嘛，就是要往上面砸时间，耐心点就完事了。
分页部分的逻辑其实很简单：
页面触底之后，发送请求获取数据，skip的值等于自身加上limit的值，然后limit的值加上30条，需要注意的是在触底之后发送请求之前要判断是否还有新的limit数据，可以在data里面设置一个状态，比如hasLimit：true，然后在请求函数里面判断一下是否还有新数据返回，如果没有的话就将hasLimit的值改为false并且提示用户。
<div class="cnblogs_code"><img id="code_img_closed_1e16380c-7e82-4825-8906-d2bcce96a398" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_1e16380c-7e82-4825-8906-d2bcce96a398" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_1e16380c-7e82-4825-8906-d2bcce96a398" class="cnblogs_code_hide">
<pre><template>
<scroll-view
scroll-y
@scrolltolower="handleScrollToLower"
class="container"
v-if="recommentList.length!==0"
>

<view class="recomment-wrap">
 <view class="item" v-for="item in recommentList" :key="item.id">
 <image :src="item.thumb" mode="widthFix" />
 </view>
</view>



<view class="month-wrap">
 <view class="month-title">
 <view class="month-info">
 <view class="month-time">
 <text class="day">{{monthList.day}} /</text>
 <text class="month">{{monthList.month}} 月</text>
 </view>
 <view class="month-text">{{monthList.title}}</view>
 </view>
 <view class="month-more">更多></view>
 </view>
 <view class="month-content">
 <view class="item" v-for="item in monthList.items" :key="item.id">
 <image :src="item.thumb + item.rule.replace('$<Height>',300)" mode="aspectFill" />
 </view>
 </view>
</view>



<view class="hot-wrap">
 <view class="hot-title">
 <text class="title-text">热门</text>
 </view>
 <view class="hot-content">
 <view class="hot-item" v-for="item in hotList" :key="item.id">
 <image :src="item.thumb" mode="widthFix" />
 </view>
 </view>
</view>

</scroll-view>
</template>

<script>
export default {
data() {
return {
 params: {
 limit: 30,
 order: "hot",
 skip: 0
 },
 recommentList: [],
 monthList: [],
 hotList: [],
 hasLimit: true
};
},
mounted() {
this.getList();
},
methods: {
getList() {
 this.request({
 url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
 data: this.params
 }).then(data => {
 if (this.monthList.length === 0) {
 this.recommentList = data.res.homepage.items;
 this.monthList = data.res.homepage;
 this.monthList.day = this.moment(this.monthList.stime).format("DD");
 this.monthList.month = this.moment(this.monthList.stime).format("MM");
 }
 if (data.res.vertical.length === 0) {
 this.hasLimit = false;
 uni.showToast({
 title: "没有更多数据啦",
 icon: "none"
 });
 return;
 }
 this.hotList = [...this.hotList, ...data.res.vertical];
 this.params.skip += this.params.limit;
 this.params.limit += 30;
 });
},
handleScrollToLower() {
 if (this.hasLimit) {
 this.getList();
 } else {
 uni.showToast({
 title: "没有更多数据啦",
 icon: "none"
 });
 }
}
}
};
</script>

<style lang="scss">
.container {
height: calc(100vh - 35px);
}
/* 推荐图片部分*/
.recomment-wrap {
display: flex;
flex-wrap: wrap;
> .item {
width: 50%;
image {
 border: 3rpx solid #fff;
}
}
}

/* 月份图片部分 */
.month-wrap {
.month-title {
display: flex;
justify-content: space-between;
padding: 20rpx 20rpx;
.month-info {
 display: flex;
 font-weight: bold;
 .month-time {
 color: $color;
 .day {
 font-size: 32rpx;
 }

 .month {
 font-size: 26rpx;
 }
 }

 .month-text {
 margin-left: 20rpx;
 color: #666;
 font-size: 32rpx;
 }
}

.month-more {
 font-size: 28rpx;
 color: $color;
}
}

.month-content {
display: flex;
flex-wrap: wrap;
.item {
 width: 33.33%;
 image {
 border: 5rpx solid #fff;
 }
}
}
}

/* 热门部分 */
.hot-wrap {
.hot-title {
padding: 20rpx;
text.title-text {
 padding-left: 14rpx;
 color: $color;
 border-left: 10rpx solid $color;
 font-size: 28rpx;
 font-weight: bold;
}
}

.hot-content {
display: flex;
flex-wrap: wrap;
.hot-item {
 width: 33.33%;
 image {
 border: 5rpx solid #fff;
 }
}
}
}
</style></pre>
</div>
首页推荐组件代码</div>
后续还要加上跳转功能，到时候会将跳转抽离成一个公共组件，到时在下文补充。
 
<h3>5.首页-专辑模块开发</h3>
<h4> 5.1 功能介绍</h4>
<ol>
<li>swiper轮播图部分</li>
<li>专辑列表部分</li>
</ol>
<h4>5.2 实现过程</h4>
轮播图的部分直接使用微信小程序官方提供的swiper组件，注意swiper组件默认宽度100%，高度是150px，而且swiper必须和swiper-item配对出现，否则会出问题，下面是小程序基础教程和官方文档：
基础教程：https://www.cnblogs.com/replaceroot/p/11262929.html
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
搞定了轮播之后就很容易了，写一下静态页面，发下请求然后渲染数据，注意对分页数据的判断就行啦，对你们来说绝对是小菜一碟，代码如下：
<div class="cnblogs_code"><img id="code_img_closed_cb6efc8c-a6a9-418c-a6bc-6b4c4c0bb4b0" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_cb6efc8c-a6a9-418c-a6bc-6b4c4c0bb4b0" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_cb6efc8c-a6a9-418c-a6bc-6b4c4c0bb4b0" class="cnblogs_code_hide">
<pre><template>
<scroll-view scroll-y="true" @scrolltolower="handleScrollToLower" class="album-wrap">

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true">
 <swiper-item v-for="item in banner" :key="item.id">
 <image :src="item.thumb" mode="widthFix" />
 </swiper-item>
</swiper>



<view class="album-list">
 <navigator
 :url="`/pages/album/index?id=${item.id}`"
 class="album-item"
 v-for="item in album"
 :key="item.id"
 >
 <view class="album-image">
 <image :src="item.cover" mode="aspectFill" />
 </view>
 <view class="album-info">
 <view class="alubm-name ellipsis">{{item.name}}</view>
 <view class="alubm-desc ellipsis">{{item.desc}}</view>
 <view class="attention">
 <view class="attention-btn">+关注</view>
 </view>
 </view>
 </navigator>
</view>


</scroll-view>
</template>

<script>
export default {
data() {
return {
 banner: [],
 album: [],
 params: {
 limit: 30,
 skip: 0,
 order: "new"
 },
 hasLimit: true
};
},
methods: {
getList() {
 this.request({
 url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
 data: this.params
 }).then(data => {
 if (this.album.length === 0) {
 this.banner = data.res.banner;
 }
 if (data.res.album.length === 0) {
 this.hasLimit = false;
 uni.showToast({
 title: "没有更多的数据啦!",
 icon: "none"
 });
 return;
 }
 this.album = [...this.album, ...data.res.album];
 this.params.skip += this.params.limit;
 this.params.limit += 30;
 });
},
handleScrollToLower() {
 if (this.hasLimit) {
 this.getList();
 } else {
 uni.showToast({
 title: "没有更多数据啦!",
 icon: "none"
 });
 }
}
},
mounted() {
this.getList();
}
};
</script>

<style lang="scss">
/* 公共样式 */
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

/* 专辑轮播图部分 */
.album-wrap {
height: calc(100vh - 35px);
.swiper {
height: 320rpx;
image {
}
}
}

/* 专辑列表部分 */
.album-list {
padding: 10rpx;
.album-item {
display: flex;
padding: 10rpx;
border-bottom: 3rpx solid #d5d5d5;
.album-image {
 flex: 1;
 image {
 width: 200rpx;
 height: 200rpx;
 }
}

.album-info {
 flex: 3;
 margin-left: 40rpx;
 overflow: hidden;
 .alubm-name {
 color: #000;
 }

 .alubm-desc {
 color: #666;
 }

 .attention {
 display: flex;
 justify-content: flex-end;
 margin-top: 10rpx;
 .attention-btn {
 padding: 0 5rpx;
 border: 3rpx solid $color;
 color: $color;
 }
 }
}
}
}
</style></pre>
</div>
home-album</div>
 
<h3>6.专辑详情模块开发</h3>
<h4>6.1 功能分析</h4>
<ol>
<li>头部背景图部分</li>
<li>专辑详情列表图片部分</li>
</ol>
<h4>6.2 实现过程</h4>
实现的过程也非常简单，首先放一张image图片当作背景图片，图片里面的文字都知道怎么做吧，直接用定位就完事了。
下面也是一样套路，先写静态页面，然后发请求，注意下图片的宽高，和mode模式就行了，具体的代码如下：
<div class="cnblogs_code"><img id="code_img_closed_e488d57d-6aae-48e9-a71b-cffe59c57340" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_e488d57d-6aae-48e9-a71b-cffe59c57340" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_e488d57d-6aae-48e9-a71b-cffe59c57340" class="cnblogs_code_hide">
<pre><template>
<view class="album-detail-wrap">

<view class="album-background">
 <image :src="album.cover" mode="widthFix" />
 <view class="album-info">
 <view class="album-name">{{album.name}}</view>
 <view class="attention">
 <view class="attention-btn">关注专辑</view>
 </view>
 </view>
</view>



<view class="album-list">
 <view class="album-title">
 <view class="author">
 <image :src="album.user.avatar" mode="aspectFill" />
 <text class="author-name">{{album.user.name}}</text>
 </view>
 <text class="album-desc">{{album.desc}}</text>
 </view>
 <view class="album-content">
 <view class="alubm-item" v-for="item in wallpaper" :key="item.id">
 <image :src="item.thumb + item.rule.replace('$<Height>',300)" mode="aspectFill" />
 </view>
 </view>
</view>

</view>
</template>

<script>
export default {
data() {
return {
 params: {
 limit: 30,
 skip: 0,
 order: "new",
 first: "1"
 },
 id: "",
 album: [],
 wallpaper: [],
 hasLimit: true
};
},
methods: {
getList() {
 if(this.album.length==0) {
 this.params.first = '1';
 }
 this.request({
 url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
 data: this.params
 }).then(data => {
 if(this.album.length === 0) {
 this.album = data.res.album;
 }
 if(data.res.wallpaper.length===0) {
 this.hasLimit = false;
 uni.showToast({
 title: '没有数据啦',
 icon: 'none'
 });
 return;
 }
 this.params.first = 0;
 this.wallpaper = [...this.wallpaper,...data.res.wallpaper];
 this.params.skip += this.params.limit;
 this.params.limit += 30;
 });
}
},
onReachBottom() {
if(this.hasLimit) {
 this.getList();
}else {
 uni.showToast({
 title: '没有数据啦!',
 icon: 'none'
 });
}
},
onLoad(options) {
this.id = options.id;
this.getList();
}
};
</script>

<style lang="scss">
.album-detail-wrap {
/* 专辑详情背景图部分 */
.album-background {
position: relative;
image {
}

.album-info {
 position: absolute;
 bottom: 5%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 padding: 0 20rpx;
 .album-name {
 color: #fff;
 font-size: 32rpx;
 }

 .attention {
 display: flex;
 justify-content: center;
 align-items: center;
 .attention-btn {
 padding: 10rpx 15rpx;
 background-color: $color;
 color: #fff;
 border-radius: 10rpx;
 font-size: 26rpx;
 }
 }
}
}

/* 专辑详情列表部分 */
.album-list {
.album-title {
 padding: 10rpx;
 .author {
 display: flex;
 image {
 width: 60rpx;
 height: 60rpx;
 }

 text.author-name {
 line-height: 60rpx;
 margin-left: 5rpx;
 color: #000;
 }
 }

 text.album-desc {
 color: #666;
 font-size: 26rpx;
 }
}

.album-content {
 display: flex;
 flex-wrap: wrap;
 .alubm-item {
 width: 33.33%;
 image {
 height: 200rpx;
 border: 3rpx solid #fff;
 }
 }
}
}
}
</style></pre>
</div>
album/index.vue</div>
最后有个小坑需要注意下，小程序里面的view标签不支持文本中的换行符，如果某些特殊场景中后台返回的文本里面包含换行符就直接使用text标签就完事了。
<img src="https://img2020.cnblogs.com/i-beta/1783433/202003/1783433-20200309170217658-636383476.png" alt="" width="545" height="217">
 
<h3>7.图片详情模块开发</h3>
<h4> 7.1 功能分析</h4>
<ol>
<li>封装超链接组件</li>
<li>发送请求获取数据</li>
<li>使用moment.js处理特殊时间格式</li>
<li>封装手势滑动组件</li>
<li>调用API下载图片</li>
</ol>
<h4>7.2 实现过程</h4>
在components组件文件夹下面新建一个goDetail.vue的自定义组件
<img src="https://img2020.cnblogs.com/i-beta/1783433/202003/1783433-20200314102455965-470228282.png" alt="" width="542" height="499">
<div class="cnblogs_code"><img id="code_img_closed_e826b113-2bb1-4d10-b9e9-0245f5ede03c" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_e826b113-2bb1-4d10-b9e9-0245f5ede03c" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_e826b113-2bb1-4d10-b9e9-0245f5ede03c" class="cnblogs_code_hide">
<pre><template>
<view @click="handleClick">
<slot></slot>
</view>
</template>

<script>
export default {
props: {
list: Array,
index: Number
},
methods: {
handleClick() {
 /*
 1 将数据缓存下来使用getApp()全局缓存方式
 2 实现点击跳转页面
 */
getApp().globalData.imgList = this.list;
getApp().globalData.imgIndex = this.index;
uni.navigateTo({
 url: "/pages/imgDetail/index"
});
}
}
};
</script>

<style>
</style></pre>
</div>
goDetail.vue</div>
这个地方用到了微信小程序的全局缓存数据的方法，我们把数据缓存在App.vue文件中，使用的时候直接通过getApp().globalData.属性的方法获取数据即可。
<img src="https://img2020.cnblogs.com/i-beta/1783433/202003/1783433-20200314102732744-927854001.png" alt="" width="382" height="341">
 
 具体发请求获取数据渲染页面的部分自行看代码学习吧。
项目github地址：https://github.com/C4az6/dnpicture.git
项目API文档：https://www.showdoc.cc/414855720281749?page_id=3678621017219602
这个项目教程就此结束。
  
来源：https://www.cnblogs.com/sauronblog/p/12389126.html

頁: [1]

琼殿技术论坛's Archiver

基于uni-app开发微信小程序__手牵手带你开发【懂你找图】项目