人工智能研究中心快递柜——代码分析三

2021SC@SDUSC

本次分析依然根据不同的page分析相关的功能

目录

一、top

index.wxml

index.js

二、container

 1.question Info

index.wxml

index.json

index.js

2.question List

index.wxml

index.js

3.use Protocol

index.js

---

对于该页面分两部分实现，用户信息部分与通用的常见问题展示和用户协议展示部分。

一、top

index.wxml

该部分实现了页面的整体布局，将登陆时获得的用户信息进行展示，布局的实现例如：

<view hidden="{{noGetUserInfo}}">
    <view class="avatar-url backUser"></view>
    <view catch:tap="handClick" class="handBtn">点击登录</view>
</view>

index.js

onload中通过getStorageSync获取用户的名称、头像url、电话号码信息，通过setData加载到视图层。

 let userInfo = wx.getStorageSync('userInfo');
    let phone = wx.getStorageSync('phone');
    if (userInfo !== undefined) {
      this.setData({
        nickName: userInfo.nickName,
        headImage: userInfo.avatarUrl,
        phone: phone,
        noGetUserInfo: !0,
      })
    }
    console.log("userInfo", userInfo)

同时调用对中间container的展示的函数，这部分函数目前只是调用，实现在下述分析的代码中定义。

goQAndA: function() {
    wx.navigateTo({
      url: '/pages/attached/questionList/index',
    })
  },
  goUseProtocol: function() {
    
    wx.navigateTo({
      url: '/pages/attached/useProtocol/index',
    })
  },

二、container

本部分主要对中间白色容器部分三个问题进行介绍。

 1.question Info

index.wxml

在本部分设计了该页面的格式布局，在页面中间定义一个白色的container容器用于放置三个监听按钮，font-size定义字体大小，同时设置了背景图样式。

<view>
    <white-container id="white-container">
        <view style="font-size: 42rpx;">{{title}}</view>
    </white-container>
    <white-container id="white-container">
        {{answer}}
    </white-container>
</view>

<view class='back_ground'></view>

index.json

在该部分定义了如何在点击按钮时打开蒙层，通过在该部分调用另一个文件夹的内容，在该文件夹内index.js中定义打开、关闭蒙层的函数，利用setData函数，将数据从逻辑层发送到视图层，同时改变对应的this.data的值。

openMantle: function() {
      this.setData({
        show: true
      })
    },
closeMantle: function() {
      this.setData({
        show: false
      })
    },

index.js

在该部分data内定义变量，onLoad定义进入问题列表页面加载时的函数，通过wx.getStorageSync获取问题ID、title、answer，将获取到的数据利用setData发送到视图层。

onLoad: function () {
    let questionId = wx.getStorageSync('questionId');
    let questionTitle = wx.getStorageSync('questionTitle');
    let questionAnswer = wx.getStorageSync('questionAnswer');
    console.log("question info", questionId, questionTitle, questionAnswer)
    if (undefined == questionId || null == questionId || '' == questionId) {
      util.navigateToHome();
    }
    this.setData({
      ...questionId, 
      title: questionTitle, 
      answer: questionAnswer,
    })
  },

2.question List

index.wxml

该部分布局是一个问题的列表，在该组件中，通过使用wx:for控件属性绑定一个数组，可以使用数组项的数据重新渲染这个组件，并且使用wx：key，如果列表项的位置动态变化或新的项目添加到列表中，并要在列表中的项目，以保留其功能和状态，必须使用wx:key到指定列表中项目的唯一标识符。从而实现了问题列表的布局。

<view class="mine-card">
    <view wx:for="{{list}}" wx:key="id" id="{{item.id}}" bindtap="goQuestionInfo" class="mine-view flex-rowaCenter" hoverClass="hover-style">
        <text>{{item.title}}</text>
        <image class="right-more" src="/img/mine/rightmore.png"></image>
    </view>
</view> 

index.js

首先定义了加载问题列表的函数，通过调用公共函数类util中的request函数进行实现，request函数中定义一个res的arraybuffer，然后获取需要加载的数据，如果get数据成功将数据加载其中，如果get失败利用showToast展示错误信息。

 if ((method == 'GET' || method == 'get' || method == 'put' || method == 'PUT' || method == 'DELETE') && Object.keys(params).length > 0) {
        let temp = ""
        Object.keys(params).forEach(item => {
            temp += "&" + item + "=" + params[item];
        });
        url += "?" + temp.substring(1, temp.length);
    }

在index.js同时定义了返回函数，返回到questionInfo。

goQuestionInfo: function(e) {
    let item = this.data.list.find((item) => {return item.id == e.currentTarget.id})
    wx.setStorageSync('questionId', e.currentTarget.id)
    wx.setStorageSync('questionTitle', item.title)
    wx.setStorageSync('questionAnswer', item.answer)
    wx.navigateTo({
      url: '../questionInfo/index',
    })
  }

3.use Protocol

index.js

该部分比较简单，实现了对用户使用协议的展示，布局同样是两个白色container不进行单独分析，定义了getUserProtocol函数获取用户协议，同样调用request实现。

getUseProtocol: function() {
 
    request.request("/wechat/getUseProtocol", "GET", {}, (data) => {
      console.log("on success ", data);
      this.setData({
        protocol: data,
      })

    }, (res) => {
      console.log("on fail ", res);
      this.setData({
        protocol: "获取用户使用协议失败。" + res.status + ", " + res.error + ", " + res.message,
      })
    })

  },