The first stage is the interface design part, which describes how to build the answer mini-program interface.

We are now in phase two, functional interaction. The last article described how to use cloud development to query the question bank function. In essence, this is equivalent to asynchronous requests in the backend separation architecture.

This post follows on from the previous post, talking about what to do after implementing the query question bank feature with cloud development. In layman’s terms, what to do after you get the data.

Software architecture: wechat native small program + cloud development

Poke source code address, get source code, version continuous iteration…

Talk about user experience

Here’s a digression.

Does it really matter if the user experience is good? How to do a good job of answering small program user experience?

I ask you a question, you dare to say yes, the first question for you to think about. Let me talk about the second problem, which I personally think starts with getting the details of interface interaction right.

For example, let’s talk briefly about one of the interface interaction details in my quiz program.

1) Look, first take a quick look at the technical documentation on the official website:

Wx. showLoading(Object Object) Displays the loading prompt box.

Wx. hideLoading(Object Object) Hiding the loading prompt;

2) Yes, I use the API native to the applet above, specifically using functions that focus on sending asynchronous requests:

Wx.showloading ({title: 'loading'}); ActivityQuestion. Where ({true: _.exists(true)}).get().then(res => {// hide the loading dialog wx.hideloading (); })}Copy the code

When fetching data, the loading prompt tells the user that the subject data is loading, please wait patiently, it will be ready soon.

// Display loading prompt wx.showloading ({title: 'loading'});Copy the code

And when you get the data, you hide it, and you tell the user, okay, you’re ready to do the problem.

// hideLoading prompt wx.hideloading ();Copy the code

Get to the point

What do we do when we get the data? How to do?

Implementing dynamic data binding can be summarized in three steps:

1) First obtain the question data in the question bank through collection. get;

2) Use the setData function to send the topic data from the logical layer to the view layer;

3) Mustache syntax (double braces) wraps variables for dynamic data binding.

Interface demo

1) Data acquisition

2) Synchronous update

3) Fill in the answer screen

The source code interpretation

Data binding

test.js

Data: {questionList: [], // questionList index: 0 // current questionList index}})Copy the code

test.wxml

<view class="page"> <view class="padding-top text-center"> <text class="text-bold text-xl">{{index+1}}</text Class ="text-bold text-xl">{{questionlist. length}}</text> </view> <view class='page__hd padding'> <view Class ="page__title"> <text class="text-bold"> </text> {{questionList[index]. Question}} </view> </view> <view class="page__bd"> <radio-group class="radio-group"> <label class="radio my-choosebox" wx:for="{{questionList[index].option}}" wx:for-index="key" wx:for-item="value" wx:key="index"> <radio value="{{key}}" checked="{{questionList[index].checked}}" /> <text class="margin-left-xs">{{value}}</text> </label> </radio-group> </view> <view class='page_ft flex padding flex-direction'> <button class="cu-btn bg-red round lg" wx:if="{{index == Questionlist.length -1}}"> submit </button> <button class="cu-btn bg-red round lg" wx:else> next topic </button> </view> <view class="mw-weixin text-center text-gray padding-top"> <text class="icon-weixin"></text> meng674782630 </view> </view>Copy the code

The dynamic data in WXML comes from the data corresponding to the Page.

Wx :for implements list rendering:

<label class="radio my-choosebox" wx:for="{{questionList[index].option}}" wx:for-index="key"  wx:for-item="value" wx:key="index">
   <radio value="{{key}}" checked="{{questionList[index].checked}}" />
   <text class="margin-left-xs">{{value}}</text>
</label>
Copy the code

Wx :if and wx:else implement conditional rendering:

<button class="cu-btn bg-red round lg" wx:if="{{index == questionlist.length -1}}"> submit </button> <button class="cu-btn Wx :else> </button>Copy the code

Update the view

The setData function is used to send data from the logical layer to the view layer (asynchronously) while changing the corresponding value of this.data (synchronously).

activityQuestion.where({ true: _.exists(true) }) .get() .then(res => { let data = res.data || []; This.setdata ({questionList:data, index: 0}); // Send data from the logical layer to the view layer. })Copy the code

Note:

  • Modifying this.data directly without calling this.setData will not change the state of the page and will cause data inconsistencies.

  • Only jSON-capable data is supported.

  • A maximum of 1024kB of data can be configured at a time. Do not set too much data at a time.

  • Do not set the value of any item in data to undefined, otherwise it will not be set and may leave some potential problems.