亚洲 欧洲 日韩 综合色天使,久久国产Av无码一区二区老太,人妻醉酒被下药迷昏带到诊所 ,亚州老熟女A片AV色欲小说

百度答題小程序入口在哪（百度答題小程序入口官網(wǎng)）

投稿用戶 ? ? 創(chuàng)業(yè)雜談 ? 閱讀 1300

手把手教你搭建答題活動小程序系列文章，第一階段為界面設(shè)計篇，分別描寫了如何搭建答題小程序界面。

現(xiàn)在已經(jīng)進(jìn)入第二階段，功能交互篇。而上一篇文章描寫了，如何用云開發(fā)實現(xiàn)查詢題庫功能。其實說白了就是相當(dāng)于，前后端分離架構(gòu)中的異步請求。

這一篇緊接著上一篇，聊聊用云開發(fā)實現(xiàn)查詢題庫功能后要做的事情。通俗來說，就是拿到題目數(shù)據(jù)后，接著要干什么。

軟件架構(gòu)：微信原生小程序+云開發(fā)

戳 源碼地址，獲取源碼，版本持續(xù)迭代中…

聊聊用戶體驗

這里先插個題外話。

用戶體驗好不好，真的重要嗎？如何做好答題小程序的用戶體驗?zāi)兀?/span>

我問你一句，你敢答應(yīng)嗎，第一個問題留給你來思考一下。我來聊聊第二個問題，我個人認(rèn)為，從做好一個個的界面交互細(xì)節(jié)開始。

舉個栗子，就拿我這個答題小程序，項目里的其中一個界面交互細(xì)節(jié)，來簡要聊聊吧。

1）看，首先還是快速看一下官網(wǎng)技術(shù)文檔：

wx.showLoading(Object object)顯示 loading 提示框；

wx.hideLoading(Object object)隱藏 loading 提示框；

2）用，我使用了上述的小程序原生的API，具體使用聚焦到發(fā)送異步請求的函數(shù)：

  // 獲取題庫
  getQuestionList() {

    // 顯示 loading 提示框
    wx.showLoading({
      title: '拼命加載中'
    });

    // 發(fā)起請求
    activityQuestion.where({
      true: _.exists(true)
    })
    .get()
    .then(res => {

      // 隱藏 loading 提示框
      wx.hideLoading();

    })
  }

當(dāng)獲取數(shù)據(jù)的時候，這個加載提示是在告訴用戶，題目數(shù)據(jù)正在加載中，請耐心等待一下，很快就好了。

// 顯示 loading 提示框
wx.showLoading({
   title: '拼命加載中'
});

當(dāng)數(shù)據(jù)獲取成功后，就隱藏這各提示，相當(dāng)于告訴用戶，好了，你可以開始做題了。

// 隱藏 loading 提示框
wx.hideLoading();

言歸正傳

拿到數(shù)據(jù)后要干什么？如何做？

實現(xiàn)動態(tài)數(shù)據(jù)綁定，其實，概括起來就三步走：

1）先通過 Collection.get 來獲取題庫集合里的題目數(shù)據(jù);

2）再使用setData函數(shù)將題目數(shù)據(jù)從邏輯層發(fā)送到視圖層；

3）再Mustache 語法（雙大括號）將變量包起來，實現(xiàn)動態(tài)數(shù)據(jù)綁定。

界面演示

1）獲取數(shù)據(jù)

百度答題小程序入口在哪（百度答題小程序入口官網(wǎng)）

2）同步更新

百度答題小程序入口在哪（百度答題小程序入口官網(wǎng)）

3）填充到答題界面

百度答題小程序入口在哪（百度答題小程序入口官網(wǎng)）

源碼解讀

數(shù)據(jù)綁定

test.js

Page({
 /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    questionList: [], // 題目列表
    index: 0 // 當(dāng)前題目索引
  }
})

test.wxml

 <view class="page">
  <view class="padding-top text-center">
    第<text class="text-bold text-xl">{{index+1}}</text>題
    共<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}}">提交</button>
    <button class="cu-btn bg-red round lg" wx:else>下一題</button>
  </view>
  <view class="mw-weixin text-center text-gray padding-top">
    <text class="icon-weixin"></text> meng674782630
  </view>
</view>

WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data。

其中，wx:for實現(xiàn)列表渲染：

<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>

其中，wx:if和wx:else實現(xiàn)條件渲染：

<button class="cu-btn bg-red round lg" wx:if="{{index == questionList.length-1}}">提交</button>
<button class="cu-btn bg-red round lg" wx:else>下一題</button>

更新視圖

setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時改變對應(yīng)的 this.data 的值（同步）。

activityQuestion.where({
   true: _.exists(true)
})
.get()
.then(res => {
   let data = res.data || [];
 
   // 將數(shù)據(jù)從邏輯層發(fā)送到視圖層，通俗的說，也就是更新數(shù)據(jù)到頁面展示
    this.setData({
        questionList:data,
        index: 0
    });
})

注意：

  • 直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的，還會造成數(shù)據(jù)不一致。
  • 僅支持設(shè)置可 JSON 化的數(shù)據(jù)。
  • 單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。
  • 請不要把 data 中任何一項的 value 設(shè)為 undefined ，否則這一項將不被設(shè)置并可能遺留一些潛在問題。
本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 sumchina520@foxmail.com 舉報，一經(jīng)查實，本站將立刻刪除。
如若轉(zhuǎn)載，請注明出處：http://www.qjsdgw.cn/74397.html
贊 (0)
上一篇 2022年8月9日 am11:48
下一篇 2022年8月9日 pm12:08

相關(guān)推薦