激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

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

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

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

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

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

個人中心頁效果圖


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

頁頭布局

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

頁頭樣式

在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ù)覽


頁面鏈接

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

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

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

通過給 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: '@你，快來「護(hù)網(wǎng)專題信息安全知識競答」，答題贏積分吧~'
    }
}

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


添加客服人員

在【客服】，添加客服；


綁定客服人員


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


打開客服會話

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

在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)入即時聊天會話界面，與客服發(fā)起即時聊天。


客服回復(fù)

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


打開意見反饋

打開“意見反饋”頁面，用戶可提交反饋內(nèi)容并上傳日志，開發(fā)者可以登錄小程序管理后臺后進(jìn)入左側(cè)菜單“客服反饋”頁面獲取到反饋內(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'>問題反饋</text>
  </button>
</view>

用戶反饋

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


管理員查看反饋

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

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定