亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

界面交互篇:個(gè)人中心頁(yè)布局樣式與邏輯交互開發(fā)

發(fā)布時(shí)間：2024-01-18 19:18:37 瀏覽量：227次

微信小程序云開發(fā)實(shí)戰(zhàn)系列-答題積分賽小程序

界面交互篇：個(gè)人中心頁(yè)布局樣式與邏輯交互開發(fā)

個(gè)人中心頁(yè)效果圖


個(gè)人中心布局與樣式實(shí)現(xiàn)

頁(yè)頭布局

在my.wxml中，編寫布局代碼：

<view class='UCenter-bg'>
    <view class="margin-bottom">
      <view class="cu-avatar xl round">
        <image class="avatar" src="/images/0.png" mode="widthFix"></image>
      </view>
    </view>
    <view class='text-xl'>
      姑蘇洛言
    </view>
    <view class='margin-top-sm'>
      <text class="cu-tag bg-yellow">積分：100</text>
    </view>
  </view>

頁(yè)頭樣式

在my.wxss中，編寫樣式代碼：

.UCenter-bg {
      background: url(https://tc.meng.cn/index1.jpg?sign=8f9ea11ad30c0607c60d16d4fab4368d&t=1677080243) center center no-repeat;
      background-size: cover;
      height: 350rpx;
      display: flex;
      justify-content: center;
      padding-top: 10rpx;
      overflow: hidden;
      position: relative;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-weight: 300;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
 
.UCenter-bg text {
  		border-radius: 6rpx;
}
 
.UCenter-bg image {
      width: 200rpx;
      height: 200rpx;
}
 
.UCenter-bg .gif-wave{
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      z-index: 99;
      mix-blend-mode: screen;  
      height: 100rpx;   
}

保存預(yù)覽


頁(yè)面鏈接

這里我使用了導(dǎo)航組件navigator，實(shí)現(xiàn)跳轉(zhuǎn)到修改資料頁(yè)面和關(guān)于程序頁(yè)面。

在my.wxml中，編寫代碼：

<view class="cu-item arrow">
  <navigator class='content' url='../login/login?type=edit' hover-class='none'>
    <text class='icon-formfill text-sky'></text>
    <text class='text-grey'>修改資料</text>
  </navigator>
</view>
 
<view class="cu-item arrow">
  <navigator class='content' url='../about/about' hover-class='none'>
    <text class='icon-creativefill text-sky'></text>
    <text class='text-grey'>關(guān)于程序</text>
  </navigator>
</view>

頁(yè)面內(nèi)發(fā)起轉(zhuǎn)發(fā)

通過(guò)給 button 組件設(shè)置屬性 open-type="share"，可以在用戶點(diǎn)擊按鈕后觸發(fā) Page.onShareAppMessage 事件。

在my.wxml中，編寫代碼：

<view class="cu-item arrow">
  <button class='cu-btn content' open-type='share'>
    <text class='icon-appreciatefill text-sky'></text>
    <text class='text-grey'>好用分享</text>
  </button>
</view>

在my.js中，編寫代碼：

onShareAppMessage() {
    return {
      title: '@你，快來(lái)「護(hù)網(wǎng)專題信息安全知識(shí)競(jìng)答」，答題贏積分吧~'
    }
}

轉(zhuǎn)發(fā)分享演示圖


添加客服人員

在【客服】，添加客服；


綁定客服人員


綁定后的客服帳號(hào)，可以登錄 【網(wǎng)頁(yè)端客服】 或 【移動(dòng)端小程序客服】 進(jìn)行客服溝通。我一般使用移動(dòng)端小程序客服，比較方便。


打開客服會(huì)話

在頁(yè)面使用客服消息，需要將 button 組件 open-type 的值設(shè)置為 contact，當(dāng)用戶點(diǎn)擊后就會(huì)進(jìn)入客服會(huì)話。

在my.wxml中，編寫代碼：

<view class="cu-item arrow">
  <button class='cu-btn content' open-type='contact'>
    <text class='icon-servicefill text-sky'></text>
    <text class='text-grey'>聯(lián)系客服</text>
  </button>
</view>

用戶咨詢

在小程序客戶端，點(diǎn)擊【聯(lián)系客服】按鈕，進(jìn)入即時(shí)聊天會(huì)話界面，與客服發(fā)起即時(shí)聊天。


客服回復(fù)

客服人員可以通過(guò)【移動(dòng)端小程序客服】，進(jìn)行實(shí)時(shí)接入與用戶的即時(shí)聊天。


打開意見反饋

打開“意見反饋”頁(yè)面，用戶可提交反饋內(nèi)容并上傳日志，開發(fā)者可以登錄小程序管理后臺(tái)后進(jìn)入左側(cè)菜單“客服反饋”頁(yè)面獲取到反饋內(nèi)容。

在my.wxml中，編寫代碼：

<view class="cu-item arrow">
  <button class='cu-btn content' open-type='feedback'>
    <text class='icon-writefill text-sky'></text>
    <text class='text-grey'>問(wèn)題反饋</text>
  </button>
</view>

用戶反饋

在小程序客戶端，點(diǎn)擊【問(wèn)題反饋】按鈕，選擇反饋類型、反饋內(nèi)容，然后填寫詳細(xì)描述，提交即可。


管理員查看反饋

管理員在后臺(tái)【用戶反饋】-【功能異?！炕蛘摺井a(chǎn)品建議】即可查看具體反饋內(nèi)容，然后做出相應(yīng)的處理或者優(yōu)化。

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定