Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现

Android 开发者从0到1发布一个微信小程序的采坑过程——首页实现
Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现
Android 开发者从0到1发布一个微信小程序的采坑过程——使用帮助页面
Android 开发者从0到1发布一个微信小程序的采坑过程——发布上线后动态切换页面

需要代码可在文末扫码识别二维码，在我的----关于我—可找到我的联系方式。

实现的效果如下：

分析实现过程:

上面的截图从四个部分分析了该页面的实现：

• 第一部分是导航栏的名字
• 第二部分是开奖结果，也是这里实现的难点
• 第三部分是下方的奖项列表
• 第四部分是底部的分享和历史开奖按钮

第一部分 导航栏 的实现

这块没啥说的就是页面跳转的同时将名称传递过来，然后在这边接受后显示。

官方文档—事件

首页跳转详情页：

• 在首页 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’ 用户通过点击这个按钮就可以直接创建出分享弹窗，用户点击分享即可分享给好友。

上面说到了难点是样式的实现，这里贴一下底部样式的实现：

.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月份会改为查开奖页面）