独立开发者从0到1发布一个微信小程序的采坑过程——详情页实现
需要代码可在文末扫码识别二维码，在我的----关于我---可找到我的联系方式。
实现的效果如下：
开奖详情页.png
分析实现过程:
上面的截图从四个部分分析了该页面的实现：
- 第一部分是导航栏的名字
- 第二部分是开奖结果，也是这里实现的难点
- 第三部分是下方的奖项列表
- 第四部分是底部的分享和历史开奖按钮
第一部分 导航栏 的实现
这块没啥说的就是页面跳转的同时将名称传递过来，然后在这边接受后显示。
首页跳转详情页：
- 在首页 wxml 中定义点击捕捉事件
catchtap="onLotteryTap" ：定义点击事件
data-name="{{lottery_name}}" ：定义传递过去的数据名称和值
<template name="lotteryItemTemplate">
<view class="item" catchtap="onLotteryTap" data-id="{{lottery_id}}" data-name="{{lottery_name}}">
<view class="lottery-item">
<view wx:if="{{ show_bubble }}" class='reddot'>开奖啦</view>
<view class='lottery-item-name'>
<text class="lottery-name">{{ lottery_name }}</text>
<text class="lottery-time">{{ remarks }}</text>
</view>
</view>
</view>
</template>
- 在首页 js 中处理捕捉事件并跳转
event.currentTarget.dataset.name：获取到 wxml 中绑定的值
target 和 currentTarget 的区别
target：触发事件的源组件。也就是指向的是触发事件的元素，点击的目标 view，如果该 view 没有添加捕获事件则通过 target 不会获取到值。
currentTarget：事件绑定的当前组件。也就是指向的是捕获事件的元素，哪个 view 设置了事件捕获，通过 currentTarget 获取的值就是在该 view 中传递的值。
/**
* 点击进入开奖详情
*/
onLotteryTap: function(event) {
var lottery_id = event.currentTarget.dataset.id;
var lottery_name = event.currentTarget.dataset.name;
var lottery_no = '';
wx.navigateTo({
url: "../lottery-detail/lottery-detail?id=" + lottery_id + "&name=" + lottery_name + "&no=" + lottery_no
})
},
- 在详情页面接收结果，并设置标题 options.name
var id = options.id;
var name = options.name;
this.lottery_no = options.no;
// 设置标题
wx.setNavigationBarTitle({
title: name,
})
第二部分 开奖号码 的实现
这块的实现难点有三个
- 将服务器返回的字符串进行分割转为本地的一个数组
// 本地集合
var tempLotterys = [];
// 分割字符串
var lottery_number = this.lotterys.lottery_res.split(',');
// 再通过 for 循环添加到本地集合中 tempLotterys
- 页面的显示
<!-- 水平的开奖号码 -->
<view class='view-lottery-number'>
<view class='view-lottery'>
<!-- for 实现 水平的开奖号码 -->
<block wx:for="{{lotteryNumbers}}" wx:for-item="item" wx:index="idx">
// 显示红色球号码
<view wx:if="{{item.normal}}" class='view-normal'>
<text>{{ item.lottery_number }}</text>
</view>
<view wx:else class='view-special'>
// 显示蓝色球的号码
<text>{{ item.lottery_number }}</text>
</view>
</block>
</view>
<block wx:if="{{is_fc_3d}}">
</block>
</view>
- 蓝色球显示的个数判断
我这里的判断就比较简陋了，主要的思路是：通过观察开奖的结果进行判断，有的奖类是要显示两个蓝色球的，所以就标志为显示两个蓝球，有的是只显示为一个蓝色球的，所以就标志为一个蓝色球，还有就是没有蓝色球的。
最后一点就是页面布局的样式处理，这里的 福彩3D 是显示三个号码的，居中显示也是一个难点。我是将福彩的给它一个标记，是福彩则样式居中。
第三部分 奖等级列表 的实现
这块就比较简单了，根据得到的列表数据，填充到页面上即可，主要的代码如下：
<!-- 竖直方向排列的6个奖项 -->
<view class='view-lottery-awards'>
<!-- 水平的排列的奖项介绍 -->
<block wx:for="{{lotterys.lottery_prize}}" wx:for-item="item" wx:index="idx">
<view>
<text class='text-left'>{{ item.prize_name }}</text>
<text class='text-center'>{{ item.prize_num }} 注</text>
<text class='text-right'>{{ item.prize_amount }} 元</text>
</view>
</block>
</view>
第四部分 底部分享按钮 的实现
这块的难点主要是底部按钮的样式，其他没啥的，主要的代码如下：
<!-- 水平的历史开奖和分享给好友 -->
<view class='view-bottom'>
<view catchtap='onHistoryListClick' data-id='{{lotterys.lottery_id}}' data-name='{{lotterys.lottery_name}}'>
<!-- 历史开奖 -->
<button class="btn-history-lottery" type='warn'>历史开奖</button>
</view>
<view catchtap='onShareClick'>
<!-- 告诉好友 -->
<button class="btn-share-friend" type='warn' open-type='share'>告诉好友</button>
</view>
</view>
button 组件中 使用了 open-type='share' 用户通过点击这个按钮就可以直接创建出分享弹窗，用户点击分享即可分享给好友。
分享弹窗.png
上面说到了难点是样式的实现，这里贴一下底部样式的实现：
.view-bottom {
display: flex;
flex-direction: row;
width: 100%;
height: 100rpx;
position: fixed;
bottom: 20rpx;
align-items: center;
}
.view-bottom view {
width: 100%;
margin: 0 20rpx;
height: 100rpx;
line-height: 100rpx;
color: #fff;
text-align: center;
}
.btn-history-lottery::after {
border: 0;
border-radius: 6rpx;
}
.btn-share-friend::after {
border: 0;
border-radius: 6rpx;
}
详情页面实现的介绍就到这里了，有问题的欢迎一起交流。
欢迎老铁扫码体验一波（目前扫码出现可能是查快递页面，这是个人开发者绕过上线提交的页面，12月份会改为查开奖页面）
图片
