火星網校
界面交互篇:個人中心頁布局樣式與邏輯交互開發(fā)
發(fā)布時間：2024-01-18 19:18:37 瀏覽量：227次
微信小程序云開發(fā)實戰(zhàn)系列-答題積分賽小程序
界面交互篇：個人中心頁布局樣式與邏輯交互開發(fā)
個人中心頁效果圖
個人中心布局與樣式實現(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;
}保存預覽
頁面鏈接
這里我使用了導航組件navigator，實現(xià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'>關于程序</text>
</navigator>
</view>頁面內發(fā)起轉發(fā)
通過給 button 組件設置屬性 open-type="share"，可以在用戶點擊按鈕后觸發(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: '@你，快來「護網專題信息安全知識競答」，答題贏積分吧~'
}
}轉發(fā)分享演示圖
添加客服人員
在【客服】，添加客服；
綁定客服人員
綁定后的客服帳號，可以登錄 【網頁端客服】 或 【移動端小程序客服】 進行客服溝通。我一般使用移動端小程序客服，比較方便。
打開客服會話
在頁面使用客服消息，需要將 button 組件 open-type 的值設置為 contact，當用戶點擊后就會進入客服會話。
在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>用戶咨詢
在小程序客戶端，點擊【聯(lián)系客服】按鈕，進入即時聊天會話界面，與客服發(fā)起即時聊天。
客服回復
客服人員可以通過【移動端小程序客服】，進行實時接入與用戶的即時聊天。
打開意見反饋
打開“意見反饋”頁面，用戶可提交反饋內容并上傳日志，開發(fā)者可以登錄小程序管理后臺后進入左側菜單“客服反饋”頁面獲取到反饋內容。
在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>用戶反饋
在小程序客戶端，點擊【問題反饋】按鈕，選擇反饋類型、反饋內容，然后填寫詳細描述，提交即可。
管理員查看反饋
管理員在后臺【用戶反饋】-【功能異?！炕蛘摺井a品建議】即可查看具體反饋內容，然后做出相應的處理或者優(yōu)化。
熱門課程推薦
熱門資訊
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
2. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
4. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
6. 史上最全，平面設計UI設計必備的77個國內外素材、設計資源網站
ui設計社區(qū),大神太多了。3、behance: https://www.behance.net/ ,著名設計... 對于品牌設計師來說,除了圖案素材收集之外,還有一個很重要的,就是設計故...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
8. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
最新文章
