2021SC@SDUSC

This analysis still analyzes the related functions according to different page s

catalogue

1, top

index.wxml

index.js

2, container

 1.question Info

index.wxml

index.json

index.js

2.question List

index.wxml

index.js

3.use Protocol

index.js

The page is divided into two parts: user information part, general FAQ display and user agreement display.

1, top

index.wxml

This part realizes the overall layout of the page and displays the user information obtained during login. For example:

<view hidden="{{noGetUserInfo}}">
    <view class="avatar-url backUser"></view>
    <view catch:tap="handClick" class="handBtn">Click login</view>
</view>

index.js

In onload, get the user's name, avatar url and phone number information through getStorageSync, and load it into the view layer through 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)

At the same time, call the functions displayed on the intermediate container. At present, these functions are only called, and the implementation is defined in the code analyzed below.

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

2, container

This part mainly introduces three problems of the middle white container.

 1.question Info

index.wxml

In this part, the format layout of the page is designed. A white container is defined in the middle of the page to place three listening buttons. Font size defines the font size and sets the background image style.

<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

This part defines how to open the mask when clicking the button. By calling the contents of another folder in this part, the functions of opening and closing the mask are defined in index.js in this folder. The setData function is used to send the data from the logical layer to the view layer, and change the corresponding value of this.data.

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

index.js

Define variables in this part of data, and onLoad defines the function when loading into the problem list page. Obtain the problem ID, title and answer through wx.getStorageSync, and send the obtained data to the view layer using 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

This part of the layout is a list of problems. In this component, by binding an array with the wx:for control property, the component can be re rendered with the data of the array item, and wx:key is used. If the position of the list item changes dynamically or a new item is added to the list, and the item in the list is required to retain its function and state, You must use wx:key to the unique identifier of the item in the specified list. Thus, the layout of the problem list is realized.

<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

Firstly, the function of loading the problem list is defined and implemented by calling the request function in the public function class util. In the request function, an arraybuffer of res is defined, and then the data to be loaded is obtained. If the get data is successful, the data will be loaded. If the get fails, the error information will be displayed by 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);
    }

The return function is also defined in index.js to return to 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

This part is relatively simple and realizes the display of the user's protocol. The layout is the same as two white container s without separate analysis. The getUserProtocol function is defined to obtain the user protocol, and the request implementation is also called.

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: "Failed to get user usage protocol." + res.status + ", " + res.error + ", " + res.message,
      })
    })

  },