-
【uni-app从入门到实战】项目创建、基本配置、首页
头部
从今天起我们来完成一个商城的项目，首先创建 uni-app 项目 uni_shop，把 pages/index/index.vue 中多余的代码删去，然后修改 pages.json
{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index" } ], "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "uni商城", "navigationBarBackgroundColor": "#F23030", "backgroundColor": "#F8F8F8" }, "uniIdRouter": {} }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
这样头部就改好了：
底部
新建 cart.vue、member.vue、news.vue，记得勾选在 pages.json 中注册
然后在pages.json中增加tabBar选项，设置底部 tab 的列表，并通过color和selectedColor设置 tab 上的文字默认颜色和选中颜色{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index" } ,{ "path" : "pages/news/news", "style" : {} } ,{ "path" : "pages/cart/cart", "style" : {} } ,{ "path" : "pages/member/member", "style" : {} } ], "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "uni商城", "navigationBarBackgroundColor": "#F23030", "backgroundColor": "#F8F8F8" }, "uniIdRouter": {}, "tabBar": { "color": "#2c2c2c",//未选中时文字颜色 "selectedColor": "#F23030",//选中时文字颜色 "list": [ { "text": "首页", "pagePath": "pages/index/index", "iconPath": "static/index.png", "selectedIconPath": "static/index_active.png" }, { "text": "资讯", "pagePath": "pages/news/news", "iconPath": "static/news.png", "selectedIconPath": "static/news_active.png" }, { "text": "购物车", "pagePath": "pages/cart/cart", "iconPath": "static/cart.png", "selectedIconPath": "static/cart_active.png" }, { "text": "会员", "pagePath": "pages/member/member", "iconPath": "static/member.png", "selectedIconPath": "static/member_active.png" } ] } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
这样底部就做好了：
获取轮播图数据
轮播图我们需要从接口获取，我们用到的接口全部来自：👉点击查看接口地址
首先获取轮播图数据并打印，修改 index.vue
export default { ...... onLoad() { this.getSwipers() }, methods: { getSwipers(){ uni.request({ url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata', success:res=> { console.log(res) } }) } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
打印返回数据：
也可以用另一种写法：methods: { async getSwipers(){ const res = await uni.request({ url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata' }) console.log(res) } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
打印结果如下：
第二种写法了解下即可，我们还是采用第一种方法。我们把获取的轮播图数据保存下，在 data 中定义 swipers 数组，在发送请求返回结果时，statusCode 为 200 时表示成功，并给 swipers 赋值；在不为 200 时弹出提示框提示。export default { data() { return { swipers:[] } }, onLoad() { this.getSwipers() }, methods: { getSwipers(){ uni.request({ url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata', success:res=> { if(res.statusCode !== 200){ return uni.showToast({ title:'获取数据失败', icon:'error' }) } //console.log(res) this.swipers = res.data.message } }) } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
发送请求封装
新建 util 目录，然后在其中新建 api.js
const BASE_URL = 'https://api-hmugo-web.itheima.net' export const myRequest = (options)=>{ return new Promise((resolve,reject)=>{ uni.request({ url:BASE_URL+options.url, data:options.data, success: (res) => { if(res.statusCode !== 200){ return uni.showToast({ title:'获取数据失败', icon:'error' }) } resolve(res) }, fail: (err) => { uni.showToast({ title:'请求接口失败', icon:'error' }) reject(err) } }) }) }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
然后在
main.js中将 myRequest 挂载的全局页面import { myRequest } from 'util/api.js' Vue.prototype.$myRequest = myRequest- 1
- 2
- 3
我们现在可以修改 index.vue 中获取轮播图的方法了：
async getSwipers(){ const res = await this.$myRequest({ url:'/api/public/v1/home/swiperdata' }) this.swipers = res.data.message }- 1
- 2
- 3
- 4
- 5
- 6
重新运行程序，我们在小程序中的 AppData 可以看到 swiper 已经被赋值了
轮播图展示
修改 index.vue，根据上边的文档 放入
swiper组件，同时循环遍历我们已经拿到的轮播图数据：swipers来填充组件swiper-item其中组件 swiper 的属性
indicator-dots为 是否显示面板指示点；属性circular为是否采用衔接滑动，即播放到末尾后重新回到开头<template> <view class="content"> <swiper indicator-dots circular> <swiper-item v-for="(item,index) in swipers" :key="index"> <image :src="item.image_src">image> swiper-item> swiper> view> template> <script> ...... script> <style lang="scss"> .content{ swiper{ width: 750rpx; height: 380rpx; image{ width: 100%; height: 100%; } } } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
运行程序，效果如下：
导航的基本结构
首先准备好字体图标：关于字体图标的使用
在 static 文件夹下创建 font 目录，放入下载的 iconfont.css 和 iconfont.ttf
修改 iconfont.css 中 iconfont.ttf 的路径
App.vue 中引入<style> /*每个页面公共css */ @import url(static/font/iconfont.css); style>- 1
- 2
- 3
- 4
然后修改 index.vue
<template> <view class="content"> ...... <view class='nav'> <view class='nav_item'> <view class="iconfont icon-shangpin">view> <text>uni超市text> view> <view class='nav_item'> <view class="iconfont icon-xinxi">view> <text>联系我们text> view> <view class='nav_item'> <view class="iconfont icon-tuku">view> <text>社区图片text> view> <view class='nav_item'> <view class="iconfont icon-diannao">view> <text>学习视频text> view> view> view> template> <script> ...... script> <style lang="scss"> .content{ ...... .nav{ display: flex; .nav_item{ width: 25%; text-align: center; view{ width: 120rpx; height: 120rpx; border-radius: 60rpx; background: #f23030; margin: 10rpx auto; line-height: 120rpx; color: #fff; font-size: 50rpx; } text{ font-size: 30rpx; } } } } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
最终效果图：
推荐商品
对于常用的样式，可以在根目录下的 uni.scss 定义颜色变量
$shop-color : #f23030;- 1
<template> <view class="content"> ...... <view class="hot_goods"> <view class="title">推荐商品view> <view class="goods_list"> <view class="goods_item"> <image src="../../static/goods.png">image> <view class="price"> <text>￥2199text> <text>￥2499text> view> <view class="name"> <text>商品名称text> view> view> <view class="goods_item"> <image src="../../static/goods.png">image> <view class="price"> <text>￥2199text> <text>￥2499text> view> <view class="name"> <text>商品名称text> view> view> view> view> view> template> <script> ...... script> <style lang="scss"> .content{ ...... .hot_goods{ background: #eee; overflow: hidden; margin-top: 10rpx; .title{ height: 50px; line-height: 50px; color: $shop-color; background: #fff; text-align: center; letter-spacing: 20px; margin: 7rpx 0; } .goods_list{ padding: 0 15rpx; display: flex; flex-wrap: wrap; justify-content: space-between; .goods_item{ background: #fff; width: 355rpx; margin: 10px 0; padding: 15rpx; box-sizing: border-box; image{ width: 80%; height: 150px; display: block; margin: 5px auto; } .price{ color: $shop-color; font-size: 36rpx; text:nth-child(2){ color: #ccc; font-size: 28rpx; margin-left: 17rpx; text-decoration: line-through; } } .name{ font-size: 28rpx; line-height: 50rpx; padding-bottom: 15rpx; padding-top: 10rpx; } } } } } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
然后可以通过接口获取数据，然后展示<template> <view class="content"> ...... ...... <view class="hot_goods"> <view class="title">推荐商品view> <view class="goods_list"> <view class="goods_item" v-for="item in goods"> <image :src="item.goods_big_logo">image> <view class="price"> <text>{{item.goods_price}}text> <text>￥2499text> view> <view class="name"> <text>{{item.goods_name}}text> view> view> view> view> view> template> <script> export default { data() { return { ...... goods:[] } }, onLoad() { ...... this.getHotGoods() }, methods: { ...... //获取推荐商品 async getHotGoods(){ const res = await this.$myRequest({ url:'/api/public/v1/goods/search' }) this.goods = res.data.message.goods } } } script> ......- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
-
相关阅读:
上半年住户存款增加10.33万亿元，平均每天约571亿存款涌向银行
创意中秋与国庆贺卡 - 用代码为节日增添喜悦
【王道数据结构编程题】- 二叉树编程练习
红细胞膜载近红外荧光染料IR780的壳膜/细胞膜荧光染料CM-Dil标记BMSCs的制备
Springboot+mybatis 完整实现CRUD练习项目(带service分层）
idea正常，jar启动报错
TextCNN 实现股票时间序列预测(TensorFlow2版)
数据预处理|数据清洗|使用Pandas进行异常值清洗
Codeforces Round 899 (Div. 2) E1. Two Permutations (Easy Version) (思维题/交换序列)
Python+审计实务与案例分析库 毕业设计-附源码211526
- 原文地址：https://blog.csdn.net/u010356768/article/details/126661887
