uniapp黑马商城项目开发记录

首先用Hbuilder创建一个uniapp项目

最好装一个scss，可以嵌套样式，开发起来比较方便(个人而言)

首先黑马商城开发的是微信小程序，所以你要去微信小程序中拿到你的AppID配置到manifest.json中(在微信开发者工具中也可以获取)

然后你就开始写pages了写一个pages就需要在pages.json中的pages配置项去配置你的path和样式（样式选配）//pages数组中第一项表示应用启动页

然后你可以去开启下拉刷新：1.可以在全局开启globalStyle中用"enablePullDownRefresh":true

也可以在pages数组中去开启，需要谁开启谁

轮播图用内置组件swiper来配置然后还有些属性我用到了

indicator-dots：图片下面有小圆点默认是false 就是没有

autoplay：是否自动切换默认是false

interval：自动切换的时间间隔毫秒自己设置

duration：滑动时常毫秒自己设置

也可以动态绑定在data里面自己配置属性通过：冒号来动态绑定属性

<template><view><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular><swiper-item><view class="swiper-item"><image class="lunbo-img" src="http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg"></image></view></swiper-item><swiper-item><view class="swiper-item"><image class="lunbo-img" src="http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg"></image></view></swiper-item></swiper><!-- 导航区 --><view class="nav"><view class="nav_item" v-for="(item,index) in navs" :key='index' @click="navItemClick(item.path)"><view class=""><img class='nav-img' :src="item.src" alt=""></view><text class='nav_text'>{{item.title}}</text></view></view><!-- 推荐商品区 --><goods></goods>   </view>
</template><script>import goods from '../../components/goods-list/goods-list.vue'export default {data() {return {// swipers:[]//goods:[]navs:[{title:'黑马超市',path:'/pages/goods/goods',src:'../../static/logo.png'},{title:'联系我们',path:'/pages/contact/contact',src:'../../static/logo.png'},{title:'社区图片',path:'/pages/pics/pics',src:'../../static/logo.png'}]}},components:{goods},onLoad() {// this.getSwipers()//this.getHotGoods()},methods:{navItemClick(url){// console.log(url)uni.navigateTo({url})}}}
</script><style>swiper{width: 750rpx;height: 380rpx;}.nav{display: flex;    }.nav_item{width: 25%;text-align: center;}.nav_item img{width: 120rpx;height: 120rpx;background-color: #b50e03;border-radius: 60rpx;margin: 15rpx;line-height: 120rpx;}.nav-img{width: 50rpx;height: 50rpx;margin-top: 10rpx;}.nav_text{font-size: 30rps;}
</style>

轮播图获取方式

我这里没有接口就写了写死数据，正常来说是需要通过请求后台接口来获取数据的，自己封装一个接口，然后通过$来调用。

当然你也可以直接写死数据就一个一个的写也没啥问题就是到时候改的时候会很麻烦需要自己一个一个修改图片地址

//定义一个方法 把他扔到onLoad里面去 当页面初识化的时候就调用方法
async getSwiper(){const res = await this.$myRequest({url:'xxx写上你需要请求的接口地址，如果你封装的时候写了baseURL就直接写后面的地址就行了'//这里返回的是一个promise对象 需要用await处理成同步操作 用了await就要用async})this.swiper = res.data.message //将请求到的数据保存到数组中 然后用v-for循环就可以遍历了
}通过请求接口来设置轮播图// 获取轮播图的数据 通过封装接口来获取轮播图async getSwipers(){const res = await this.$myRequest({url:'/api/getlunbo'})this.swipers = res.data.message}}然后在swiper里面通过for循环来循环轮播图 通过动态数据绑定来循环图片<swiper-item v-for='(item,index) in swiper' :key='item.id'><image :src='item.img'></image></swiper-item>

导航栏区域也是一样通过请求后台来获取数据然后他跳转的时候你需要点击导航栏的区域，所以就给他设置一个点击事件然后把他的地址传回去，通过uni.navigateTo()来跳转

这是我封装的请求方法

const BASE_URL = 'HTTP://localhost:8080'export const myRequest = (options) =>{return new Promise((resolve,reject)=>{// 通过uni.request({})来发送请求uni.request({url:BASE_URL + options.url,method:options.method || 'GET',data:options.data || {},success:res=>{if(res.data.status !== 0){return uni.showToast({title:'获取数据失败'})}resolve(res)},fail:(err)=>{uni.showToast({title:'请求接口失败'})reject(err)}})})
}

引入地图的话就用map 这个api 然后它里面可以设置经纬度，具体属性建议看文档

想要点击拨打电话的话就给他定义一个方法例如以下代码定义一个@click='phone' 然后通过uni.makePholeCall()来实现

<template><view class="contact"><image class="img" src="../../static/src=http___img.wmpic.com_wp-content_uploads_2020_05_2020052910592019.gif&refer=http___img.wmpic.gif"></image><view class="info"><view @click="phone">联系电话：400-628-9090（点击拨打）</view><view>校区地址：山东省南山市南山区</view></view><map class="map" :longitude="loggitude" :latitude="latitude"></map></view>
</template><script>export default{data(){return{loggitude:120.363172,latitude:30.312212,// markes:[//   {//         loggitude:120.363172,//         latitude:30.312212,//   }// ]}},methods:{phone(){console.log(111)uni.makePhoneCall({phoneNumber:'400-810-8888'})}}}

监听下拉事件刷新下拉触发刷新完成，然后把页面变成1 下拉完成之后重新请求数据，然后清除刷新

// 监听下拉刷新事件onPullDownRefresh() {console.log('刷新完成')this.pageindex = 1;this.flag = false;// 下拉完成之后 重新请求数据setTimeout(()=>{this.getGoodsList();// 重新加载完成之后 取消下拉刷新事件uni.stopPullDownRefresh()},1000) }

还有个点击高亮的效果我是通过样式来修改的：hover 也可以通过获取当前数组的下标然后修改其类名来实现点击高亮效果

其他的我感觉没什么难的地方了，本人萌新一个，有写的不对或者有问题的小伙伴可以在下面留言或者加我q743180155讨论一下前端的知识

uniapp黑马商城项目开发记录相关推荐

尚硅谷——谷粒商城项目开发记录——2021.11.19
尚硅谷--谷粒商城项目开发记录--2021.11.19 出现错误 1.SpringBoot测试类出现Could not autowire. No beans of 'BrandService' typ ...
尚硅谷——谷粒商城项目开发记录——2021.11.22
尚硅谷--谷粒商城项目开发记录--2021.11.22 概念: 1.对象优化: 新增的API: ES6 给 Object 拓展了许多新的方法,如: keys(obj): 获取对象的所有 key 形成的 ...
尚硅谷——谷粒商城项目开发记录——2021.11.21
尚硅谷--谷粒商城项目开发记录--2021.11.21 概念: 1.var和let的区别: 作用域: var 声明的变量往往会越域 let 声明的变量有严格局部作用域声明次数: var 可以声明多次 ...
尚硅谷——谷粒商城项目开发记录——2021.11.20
尚硅谷--谷粒商城项目开发记录--2021.11.20 概念: 1.SpringCloud Alibaba: 简介: Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此 ...
Anytime项目开发记录0
Anytime,中文名:我很忙. 开发者:孤独的猫咪神. 这个项目会持续更新,直到我决定不再维护这个APP. 2014年3月10日:近日有事,暂时断更.希望可以会尽快完事. 2014年3月27日:很抱 ...
TMS320F28335项目开发记录9_28335之中断系统
TMS320F28335项目开发记录9_28335之中断系统 2014年11月08日 12:00:12 阅读数:3104 28335中断系统 1.中断系统在这里我们要十分清楚DSP的中断系统.C28 ...
java商城项目_javaweb实战之商城项目开发（一）
这篇文章主要针对javaweb商城项目开发进行实战演习,对javaweb商城项目开发进行详细分析,感兴趣的小伙伴们可以参考一下一.项目功能结构 1.功能 2.实体 3.对应sql语句 CREATE ...
JavaEE学习日志(七十三): 黑马商城项目（六）
JavaEE学习日志持续更新----> 必看!JavaEE学习路线(文章总汇) JavaEE学习日志(七十三) 黑马商城项目(六) 今天任务在线支付准备工作前端 OrdersDao Ord ...
Vue PC商城项目开发笔记与问题汇总
Vue PC商城项目开发笔记与问题汇总负责PC端商城项目,这也是人生第一个真正的项目.刚做了一天,就遇到不少问题,在这里列出自己的问题与解决办法,与大家交流,提升自己,希望以后不会掉进同一个坑里. ...

uniapp黑马商城项目开发记录

uniapp黑马商城项目开发记录相关推荐

最新文章

热门文章