文章目錄
- 1. pages.json 頁面路由
- 2. 圖標
- 3. 全局 CSS
- 4. 首頁
- 4.1 整體框架
- 4.2 完整代碼
- 4.3 輪播圖 swiper
- 4.3.1 image
- 4.4 公告
- 4.4.1 uni-icons
- 4.5 分類 uni-row、uni-col
- 4.6 商品列表
小程序開發網址:
注冊小程序賬號
微信開發者工具下載
uniapp 官網
HbuilderX 下載
色彩網站
圖標網站
Postimage-免費轉換圖片比例
效果圖:
1. pages.json 頁面路由
pages.json 文件用來對 uni-app
進行全局配置,決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等。
{"pages": [ //pages數組中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁"}},{"path" : "pages/category/category","style" : {"navigationBarTitleText" : "分類"}},{"path" : "pages/user/user","style" : {"navigationBarTitleText" : "我的"}}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "校園小程序","navigationBarBackgroundColor": "#3cb371","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"tabBar": {"selectedColor": "#3cb371","list": [{"pagePath": "pages/index/index","iconPath": "/static/icons/首頁.png","selectedIconPath": "/static/icons/首頁-高亮.png","text": "首頁"},{"pagePath": "pages/category/category","iconPath": "/static/icons/分類.png","selectedIconPath": "/static/icons/分類-高亮.png","text": "分類"},{"pagePath": "pages/user/user","iconPath": "/static/icons/我的.png","selectedIconPath": "/static/icons/我的-高亮.png","text": "我的"}]}
}
- pages:設置頁面路徑及窗口表現
- path:配置頁面路徑
- style:配置頁面窗口表現
- navigationBarTitleText:導航欄標題文字內容
- needLogin:是否需要登錄才可訪問
- globalStyle:設置默認頁面的窗口表現
- navigationBarTextStyle:導航欄標題顏色及狀態欄前景顏色,僅支持 black/white
- navigationBarTitleText:導航欄標題文字內容
- navigationBarBackgroundColor:導航欄背景顏色
- backgroundColor:窗口的背景色
- tabBar:設置底部 tab 的表現
- color:tab 上的文字默認顏色
- selectedColor:tab 上的文字選中時的顏色
- list:tab 的列表,詳見 list 屬性說明,最少2個、最多5個 tab
- pagePath:頁面路徑,必須在 pages 中先定義
- iconPath:圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px
- selectedIconPath:選中時的圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px
- text:tab 上按鈕文字
2. 圖標
1、訪問 圖標網站,搜索選擇喜歡的圖標
2、點擊作者
3、點擊圖標集
4、選擇所有需要的圖標
5、加入購物車
6、添加到個人項目中
7、個人主頁 > 我的項目
8、下載所需圖標
9、選擇顏色,下載灰色圖標,做為未選中時圖標。
10、選擇綠色,下載綠色圖標,做為選中時圖標。
3. 全局 CSS
global.css:
page {background-color: #f2f3f4;min-height: 100vh;
}
* {box-sizing: border-box;
}
設置背景色為灰色。
4. 首頁
4.1 整體框架
4.2 完整代碼
<template><view><!-- 輪播圖 --><view><swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371"><swiper-item v-for="item in imgs" :key="item" ><image :src="item" alt="" mode="widthFix" style="width: 100%;" /></swiper-item></swiper></view><!-- 公告 --><view style="margin: 10px;"><view style="padding: 5px 10px; background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;"><uni-icons type="sound" size="20"></uni-icons><view>{{ notice }}</view></view></view><!-- 分類 --><view style="margin: 10px; padding: 5px 10px; background-color: white; border-radius: 5px;"><uni-row><uni-col :span="6"><view class="grid-item-box" @click="clickItem('時令水果')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/時令水果.png"></image><text style="font-size: 13px; margin-top: 5px;">時令水果</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('品質肉禽')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/品質肉禽.png"></image><text style="font-size: 13px; margin-top: 5px;">品質肉禽</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('新鮮水產')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/新鮮水產.png"></image><text style="font-size: 13px; margin-top: 5px;">新鮮水產</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('蔬菜蛋品')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/蔬菜蛋品.png"></image><text style="font-size: 13px; margin-top: 5px;">蔬菜蛋品</text></view></uni-col></uni-row></view><!-- 商品列表 --><view style="margin: 10px; font-size: 12px;"><uni-row :gutter='10'><uni-col :span='12' v-for="item in goodsList" :key="item.name"><view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;"><image :src="item.img" mode="widthFix" style="width: 100%;"></image><view class="lineEllipsis">{{ item.name }}</view><view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">¥{{ item.price }}</view><view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addShoppingCart(item)"></uni-icons></view></view></uni-col></uni-row></view></view>
</template><script>export default {data() {return {imgs: ['https://m.360buyimg.com/babel/jfs/t20260719/200274/27/38564/103066/64b8a92bF9ff64827/86b0873317ff1670.jpg','https://m.360buyimg.com/babel/jfs/t20260720/127672/11/35840/78112/64ba27ceF7f110966/ec2e2c6c366fa94c.jpg','https://m.360buyimg.com/babel/jfs/t20260713/161699/23/38353/136417/64b0a7dbF5e25fcdd/ba43ddee33949c1c.png',],notices: [{content: "時令水果今日半價"},{content: "百億補貼限時搶購"},{content: "9塊9特賣專場"},],notice: '',goodsList: [{ name: '固倫天原 農家土雞蛋現撿新鮮谷物蟲草柴雞蛋初生蛋簡裝 20枚裝', price: 19.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },{ name: '大口鮮 熟凍帝王蟹禮盒裝 海鮮禮包 整只 3.2-3.6斤現貨 海產禮盒', price: 79.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },{ name: '仙泉湖三去星洲紅 500g*1條 凈膛冷凍羅非魚海鮮食材 刺少', price: 99.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },{ name: '洛川蘋果80mm大果 凈重4.2斤 陜西延安紅富士新鮮時令生鮮水果', price: 19.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },{ name: '妙果櫻廣西青芒新鮮水果大青芒果當季時令生鮮芒果 3斤大果(單果250g+)', price: 29.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },]}},onLoad() {this.loadNotice();},methods: {loadNotice() {let i = 0this.notice = this.notices[i++].contentsetInterval(() => {this.notice = this.notices[i++].contentif (i === this.notices.length) {i = 0}}, 5000)},// 點擊分類,跳轉頁面clickItem(name) {console.log(name)},// 點擊添加到購物車addShoppingCart(item) {console.log(item.name)}}}
</script><style>.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;}.lineEllipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 超出幾行省略 */overflow: hidden;}
</style>
4.3 輪播圖 swiper
詳見官網 滑塊視圖容器
<view><swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371"><swiper-item v-for="item in imgs" :key="item" ><image :src="item" alt="" mode="widthFix" style="width: 100%;" /></swiper-item></swiper>
</view>imgs: ['https://m.360buyimg.com/babel/jfs/t20260719/200274/27/38564/103066/64b8a92bF9ff64827/86b0873317ff1670.jpg','https://m.360buyimg.com/babel/jfs/t20260720/127672/11/35840/78112/64ba27ceF7f110966/ec2e2c6c366fa94c.jpg','https://m.360buyimg.com/babel/jfs/t20260713/161699/23/38353/136417/64b0a7dbF5e25fcdd/ba43ddee33949c1c.png',
]
- circular :是否采用銜接滑動,即播放到末尾后重新回到開頭
- autoplay :是否自動切換
- interval:自動切換時間間隔
- duration:滑動動畫時長
- indicator-dots:是否顯示面板指示點
- indicator-color:指示點顏色
- indicator-active-color:當前選中的指示點顏色
4.3.1 image
- src:圖片資源地址
- mode:圖片裁剪、縮放的模式。widthFix:寬度不變,高度自動變化,保持原圖寬高比不變
4.4 公告
<view style="margin: 10px;"><view style="padding: 5px 10px; background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;"><uni-icons type="sound" size="20"></uni-icons><view>{{ notice }}</view></view>
</view>notices: [{content: "時令水果今日半價"},{content: "百億補貼限時搶購"},{content: "9塊9特賣專場"},
],
notice: '',loadNotice() {let i = 0this.notice = this.notices[i++].contentsetInterval(() => {this.notice = this.notices[i++].contentif (i === this.notices.length) {i = 0}}, 5000)
}onLoad() {this.loadNotice();
}
4.4.1 uni-icons
下載安裝 擴展組件 uni-icons
4.5 分類 uni-row、uni-col
<view style="margin: 10px; padding: 5px 10px; background-color: white; border-radius: 5px;"><uni-row><uni-col :span="6"><view class="grid-item-box" @click="clickItem('時令水果')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/時令水果.png"></image><text style="font-size: 13px; margin-top: 5px;">時令水果</text></view></uni-col>... 省略</uni-row>
</view>clickItem(name) {console.log(name)
}.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;
}
- uni-row:流式柵格系統,隨著屏幕或視口分為 24 份,可以迅速簡便地創建布局
- span:柵格占據的列數
- display: flex; :使圖片和文字垂直居中。
- width: 50%; :圖片排版更好看。
- @click=“clickItem(‘時令水果’)”:點擊事件可以用于跳轉頁面。
4.6 商品列表
<view style="margin: 10px; font-size: 12px;"><uni-row :gutter='10'><uni-col :span='12' v-for="item in goodsList" :key="item.name"><view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;"><image :src="item.img" mode="widthFix" style="width: 100%;"></image><view class="lineEllipsis">{{ item.name }}</view><view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">¥{{ item.price }}</view><view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addShoppingCart(item)"></uni-icons></view></view></uni-col></uni-row>
</view>goodsList: [{ name: '固倫天原 農家土雞蛋現撿新鮮谷物蟲草柴雞蛋初生蛋簡裝 20枚裝', price: 19.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },{ name: '大口鮮 熟凍帝王蟹禮盒裝 海鮮禮包 整只 3.2-3.6斤現貨 海產禮盒', price: 79.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },{ name: '仙泉湖三去星洲紅 500g*1條 凈膛冷凍羅非魚海鮮食材 刺少', price: 99.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },{ name: '洛川蘋果80mm大果 凈重4.2斤 陜西延安紅富士新鮮時令生鮮水果', price: 19.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },{ name: '妙果櫻廣西青芒新鮮水果大青芒果當季時令生鮮芒果 3斤大果(單果250g+)', price: 29.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },
]addShoppingCart(item) {console.log(item.name)
}.lineEllipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 超出幾行省略 */overflow: hidden;
}
- gutter:柵格間隔
- width: 100%;:圖片填充整個柵格
- .lineEllipsis :文字超出 2 行進行省略處理
- addShoppingCart:點擊添加到購物車