2021SC@SDUSC
本次分析依然根据不同的page分析相关的功能
目录
对于该页面分两部分实现，用户信息部分与通用的常见问题展示和用户协议展示部分。
一、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,
})
})
},