具有图片识别功能的微信小程序（4）-结果展示页面

效果展示

页面设计

结果展示页面分为5个部分，分别是图片展示、植物名称、相似度、百度百科内容和返回，在垂直方向上顺次排列，效果如图

result.wxml

通过wxml文件定义整个页面框架，可以从效果展示图中看到，仅需要图片和查看容器，然后分别对图片、三个字段和返回按钮进行类定义，并对按钮绑定点击事件，详细内容可查看代码。

<view class="result-container" wx:if="{{!isRecognizing}}">
  <image class="result-pic" src="{{imagePath}}" wx:if="{{imagePath}}"></image>
  <!-- 植物名称 -->
  <view  class="result-item">
    <text class="result-title">植物名称：</text>
    <text>{{name}}</text>
  </view>
  <view class="result-item">
    <text class="result-title">相似度：</text>
    <text>{{(score*100)}}%</text>
  </view>
  <view wx:if="{{baikeDesc}}" class="baike-container">
    <text class="baike-title">百科描述:</text>
    <text class="baike-desc">{{baikeDesc}}</text>
  </view>
 <!-- 返回按钮 --> 
  <view class="back-button" bindtap="onBack">
    <text>返回</text>
  </view>
</view>

result.wxss

通过在wxml代码中明确的9个类定义样式，分别是result-container、result-pic、result-item、result-title、result-item text、baike-container、baike-title、baike-desc和back-button进行样式定义，详细代码和对应注释如下

.result-container{
  padding:10px; /*会将 .result-container 元素的四个方向（上、右、下、左）的内边距都设置为 10px*/
}

.result-pic {
    width: 100%;            /* 设置图片宽度为容器的100% */
    object-fit: contain;      /* 保持图片比例填充容器 */
}

.result-item{
  display:flex; /*使用flex布局 */
  justify-content:space-between; /*使各子元素等间距分布，第一个元素与第一个容器的边缘对齐，最后一个元素与最后一个容器的边缘对齐，其它元素间距相等。 */
  align-items:center; /*使各子元素在垂直方向上居中排列 */
  padding:10px 0; /*距上下边距分别是10px 左右边距分别是0px*/
  border-bottom:1px solid #ddd; /*定义了外边框，为实现，粗细为1px*/
}

.result-title{
  font-weight: bold; /* 标题字体加粗 */
  color: #333; /* 左侧标题占据固定空间 */
  flex: 1; /* 左侧标题占据固定空间 */
}

.result-item text {
    color: #666;
}

.baike-container {
    margin-top: 20px; /* 容器与上方元素的距离为 20px */
    padding: 10px; /* 该容器的内边距为 10px */
    background-color: #f9f9f9; /* 设置背景色为 #f9f9f9 */
    border: 1px solid #ddd; /* 实线边框粗细为1px*/
    border-radius: 5px; /* 边框圆角半径为 5px*/
}

.baike-title {
    font-size: 16px; /* 标题字体大小为16px*/
    font-weight: bold; /* 字体加粗*/
    color: #333; /* 字体颜色为深灰色 (#333)*/
    margin-bottom: 10px; /* 容器底部的外边距为 10px */
}

.back-button {  
  margin-top: 20px;  /* 容器距上方元素的距离为20px */
  text-align: center;  /* 文本内容水平居中显示 */
  padding: 10px;  /* 容器内边距为10px */
  background-color: #007aff;  
  color: white;  /* 字体颜色为白色 */
  border-radius: 5px;  /* 圆角半径为5px */
}  

上述代码中的result-item、result-title中的样式定义同时对植物名称和相似度生效，因为两者的布局和显示效果完全一样。

result.js

在此文件中，定义页面数据，通过函数来控制页面交互，在页面中要处理的事情：

• 将编辑页面从植物识别AI接口获取的植物名、相似度百科信息，以及确认后的图片编码后传递过来的数据进行解码，然后赋值给页面变量以显示，具体代码和对应的注释如下

• 通过函数定义点击返回按钮事件

具体代码及其对应的注释如下

Page({
    data: {
      aiResult: null,
      name: '',
      score: '',
      imagePath: '',  // 用于存储图片路径
      baikeDesc:'',
    },
   onLoad: function (options) {
       // 获取传递过来的参数并解码
        const name = decodeURIComponent(options.name);         // 植物名称
        const score = decodeURIComponent(options.score);       // 相似度分数
        const imagePath = decodeURIComponent(options.imagePath); // 图片路径
        const baikeDesc = decodeURIComponent(options.baikeDesc || ''); // 百科描述
        console.log(name, score, imagePath, baikeDesc);
    // 使用 setData 更新页面数据
      this.setData({
        name,
        score,
        imagePath,
        baikeDesc,
      });
      console.log("接收到的参数：", options);
    },
 onBack: function () {
      wx.navigateBack();  // 返回到上一页面
    },
})

结果展示页面的代码相交获取图片页面和图片编辑页面的JS文件比较简单，因为其是整个页面交互的最后一环，是所有数据传递的最终目的地，仅仅需要进行数据展示，和简单的返回逻辑。

上述代码中consol.log是为了方便我自己查看日志、排查问题，实际使用的时候可以去掉。