国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 考研刷題小程序云開發(fā)實(shí)戰(zhàn)-頁面設(shè)計與制作（題庫首頁、排名頁、我的）

考研刷題小程序云開發(fā)實(shí)戰(zhàn)-頁面設(shè)計與制作（題庫首頁、排名頁、我的）

時間：2023-09-08 12:18:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-08 12:18:01 來源：網(wǎng)站運(yùn)營

考研刷題小程序云開發(fā)實(shí)戰(zhàn)-頁面設(shè)計與制作（題庫首頁、排名頁、我的）：

前言

為啥你的UI界面感覺亂？對于小程序開發(fā)者來說，特別是對于初階開發(fā)者或者初學(xué)者，排版的好壞是這個階段核心要考慮的問題，也就是細(xì)節(jié)。但是不少同學(xué)總是在這個上面很不注重，總想著能用就行。做出來的界面異常難看，談何用戶體驗(yàn)！

產(chǎn)品好不好看，真的重要嗎？你自己仔細(xì)思考思考一下。

唯有美觀無法構(gòu)建一款產(chǎn)品，但是打造一個毫無美感可言的產(chǎn)品往往會讓情況變得更加糟糕。所以，我設(shè)計并制作了這款精美優(yōu)質(zhì)的考研題庫小程序。

1、創(chuàng)建并配置頁面

1.1、在pages文件夾中，分別創(chuàng)建三個文件夾home、rank、my，分別對應(yīng)三個頁面題庫首頁、排行榜頁、我的頁；

1.2、每個文件夾分別包含這四個文件.js、.json、.wxml、.wxss




1.3在app.json中配置pages和tabBar，代碼如下：

{ "pages": [ "pages/home/home", "pages/rank/rank", "pages/my/my" ], "tabBar": { "color": "#aaa", "selectedColor": "#ffa517", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/home/home", "iconPath": "/image/sy2.png", "selectedIconPath": "/image/sy2-a.png", "text": "題庫" }, { "pagePath": "pages/rank/rank", "iconPath": "/image/zxly2.png", "selectedIconPath": "/image/zxly2-a.png", "text": "排名" }, { "pagePath": "pages/my/my", "iconPath": "/image/wd2.png", "selectedIconPath": "/image/wd2-a.png", "text": "我的" } ] }, "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "考研刷題小博士", "navigationBarTextStyle": "black" }}





2、題庫首頁

2.1、場景是往往會有考研相關(guān)資訊或者答題優(yōu)惠兌換活動，需要有豐富的輪播廣告作為展示。使用了swiper組件實(shí)現(xiàn)輪播圖效果，里面使用了image標(biāo)簽展示圖片，并設(shè)置mode='aspectFill'達(dá)到寬度100%滿屏效果，代碼如下：

<swiper class="screen-swiper" autoplay="true" interval="5000" duration="500"> <swiper-item> <image src="/image/b2-y.jpg" mode='aspectFill'></image> </swiper-item> </swiper>


2.2、專項(xiàng)考試或者專項(xiàng)練習(xí)，按四個科目分類，我這里使用了樣式grid實(shí)現(xiàn)基本布局，col-2實(shí)現(xiàn)兩個一行的排版效果，靚麗搶眼的顏色搭配，外加一些樣式進(jìn)行修飾，整體頁面效果呈現(xiàn)為簡潔美觀，符合個人極簡主義的風(fēng)格。

<view class='grid col-2 padding-left-sm padding-right-sm'> <view class='padding-sm' bindtap="goToAnswer" data-category="馬克思原理"> <view class='bg-yellow padding radius shadow-warp'> <view class="text-lg">馬克思原理</view> <view class='margin-top-sm text-Abc'>共390題</view> </view> </view> <view class='padding-sm' bindtap="goToAnswer" data-category="毛中特"> <view class='bg-orange padding radius shadow-warp'> <view class="text-lg">毛中特</view> <view class='margin-top-sm text-Abc'>共210題</view> </view> </view> <view class='padding-sm' bindtap="goToAnswer" data-category="思修"> <view class='bg-olive padding radius shadow-warp'> <view class="text-lg">思修</view> <view class='margin-top-sm text-Abc'>共260題</view> </view> </view> <view class='padding-sm' bindtap="goToAnswer" data-category="近代史"> <view class='bg-orange padding radius shadow-warp'> <view class="text-lg">近代史</view> <view class='margin-top-sm text-Abc'>共230題</view> </view> </view> </view>


3、排名頁和我的

3.1、排名頁排版布局演示（源碼見倉庫）

3.2、我的頁排版布局演示（源碼見倉庫）


總結(jié)

這期的考研刷題小程序云開發(fā)實(shí)戰(zhàn)，主要演示了整個頁面的開發(fā)流程與配置，并對關(guān)鍵的地方進(jìn)行了講解，細(xì)枝末節(jié)可以詳細(xì)看看代碼即可，其實(shí)并不難。難就難在創(chuàng)意、設(shè)計與實(shí)現(xiàn)等一系列。價值區(qū)別在于，能看與好看、能用與好用。

關(guān)鍵詞：設(shè)計,程序,實(shí)戰(zhàn)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉