图像识别后将识别结果整理成列表，点击列表可跳转到搜索页面

关于怎样进行图片识别，可查看：小程序调用百度api实现图像识别_moxixi-CSDN博客

1.首先使用page-container 将内容弹出

<!-- 弹出层开始 -->
<page-container 
  show="{
   {show}}"
  round="{
   {round}}"
  overlay="{
   {overlay}}"
  duration="{
   {duration}}"
  position="bottom"
  close-on-slide-down="{
   {false}}"
  bindbeforeenter="onBeforeEnter"
  bindenter="onEnter"
  bindafterenter="onAfterEnter"
  bindbeforeleave="onBeforeLeave"
  bindleave="onLeave"
  bindafterleave="onAfterLeave"
  bindclickoverlay="onClickOverlay"
  custom-style="{
   {customStyle}}"
  overlay-style="{
   {overlayStyle}}"
>
<i-cell-group>
    <i-cell title="{
   {item.keyword}}" is-link value="{
   {item.score}}%相似度" url="/pages/searchResult/searchResult" wx:for="{
   {picResult}}" wx:key="unique">
    </i-cell>
</i-cell-group>
  <view class="detail-page" style="margin-bottom: 2vh;">
    <button type="primary" bindtap="exit">重新上传图片</button>
  </view>
</page-container>
<!-- 弹出层结束 -->

这里我使用的小程序前端框架是ivew，有兴趣的可点击查看：iView Weapp - 一套高质量的微信小程序 UI 组件库

2.json文件中需要引用iview模板

{
    "usingComponents": {
        "i-cell-group": "../../dist/cell-group/index",
        "i-cell": "../../dist/cell/index"
    }
}

3.js文件---成功获取到百度api返回的数据后：

//获取到识别的结果并将score处理一下
                let result=res.data.result;
                result.forEach(element => {
                  element.score=element.score*100;
                  element.score=parseFloat(element.score.toFixed(2));//保留2位小数
                });
                // console.log(result)
                that.setData({
                  picResult:result
                })
                // console.log(that.data.picResult)
                //弹出一个屏
                that.popup();

4.popup函数及其它函数，加在js文件里面即可

popup(e) {
    let customStyle = ''
    let duration = this.data.duration
    customStyle = 'height: auto;'
    this.setData({
      show: true,
      customStyle,
      duration
    })
  },
  exit() {
    this.setData({show: false});
    this.cameraTap();
    // wx.navigateBack()
  },

  onBeforeEnter(res) {
    // console.log(res)
  },
  onEnter(res) {
    // console.log(res)
  },
  onAfterEnter(res) {
    // console.log(res)
  },
  onBeforeLeave(res) {
    // console.log(res)
  },
  onLeave(res) {
    // console.log(res)
  },
  onAfterLeave(res) {
    // console.log(res)
  },

  onClickOverlay(res) {
    // console.log(res)
  },

5.data中需要加几个数据：--我直接使用的是有黑色的遮罩层的page-container，如果有自己的想法，可参考：page-container | 微信开放文档

data: {
    show: false,
    round:false,
    overlay:true,
    cameraColor:'',
    customStyle: '',
    overlayStyle: 'background-color: rgba(0, 0, 0, 0.7)',
    duration: 300,
  },

6.效果图：

唉，语音识别困扰了我两天，现在竟然觉得异常的轻松是怎么回事哦