一.心得体会
1.uniapp具有跨平台的特性，可以使用同样的代码在多个平台（如H5、小程序、App）上进行开发，极大地提高了开发效率和代码复用率。这也意味着在开发时，可以快速地经过调试和测试，在不同平台上发布应用程序，加快开发和部署的速度。
2.uniapp提供了丰富的组件库和插件，可以轻松地创建各种界面和交互元素，如图标、弹出框、下拉刷新等等，可以满足开发需求，加快开发进度，提高开发效率。而且，uniapp具有灵活的扩展性，可以自定义组件和插件，满足开发中的特殊需求。
3.uniapp提供了完善的文档和社区支持，可以很容易地获取使用说明、示例代码、常见问题解答等帮助信息，并且可以在开发过程中获取社区的支持和帮助。这些文档和社区资源，可以让开发者更好地理解和掌握uniapp的使用方法和技巧。
uniapp的跨平台特性、丰富的组件库和插件、完善的文档和社区支持，都为开发提供了非常良好的开发环境和体验，是一个非常优秀的前端开发框架。
Uniapp 是一种基于 Vue.js 框架的跨平台开发框架，可以使用 Vue.js 的语法和组件编写跨 iOS、Android、H5 等多端应用程序。Uniapp 提供了许多原生应用程序框架和浏览器提供的 API、插件、组件等功能，方便开发者进行多端应用程序的开发。Uniapp 的特点有：
1. 组件、API 和功能丰富: Uniapp 提供了许多适用于多端开发的组件、API 和功能，开发者可以编写一套代码并同时适用于多个平台。
2. 兼容性好: Uniapp 提供了兼容多个平台的高效解决方案，无需考虑不同平台的兼容问题，大大提高了开发效率。
3. 开发效率高: Uniapp 提供了许多快速开发工具和插件，可以极大地提高开发速度和效率。
4. 支持原生应用程序: Uniapp 可以编译成原生应用程序，并且支持原生应用程序的调用和功能扩展。
总之，Uniapp 是一个非常适合跨平台开发的框架，开发者可以轻松地编写出同时适用于多个平台的应用程序，大大降低了开发成本和时间。
二.编程思路
以黑马优购商城为例
黑马优购是一个电商平台，主要经营范围包括各种商品的销售和物流配送服务。它提供了一个在线购物平台，让用户可以在网上购买自己需要的商品。同时，黑马优购也提供安全、快速、可靠的配送服务，用户购买的商品可以通过黑马优购配送到家。
用到的编程开发工具：HBuilder X、微信开发者工具等。
1.项目接口文档：https://www.showdoc.com.cn/128719739414963/2516997897914014
2.帮助文档
uni-app官网：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架
阿里巴巴字体图标官网：iconfont-阿里巴巴矢量图标库
菜鸟教程:菜鸟教程 - 学的不仅是技术，更是梦想！
阮一峰的flex教程：Flex 布局教程：语法篇 - 阮一峰的网络日志
Vue官网：https://cn.vuejs.org/v2/guide/
微信小程序官网：微信开放文档
3.项目搭建
在HBuilder X 里面新建一个ui-app项目
#3.2目录结构
#3.3页面
#3.4字符图标
项目使用到以下字符图标
4.首页创建
在pages文件夹下创建index.vue文件（首页面）
#4.2业务逻辑
1.使用tabbar实现底部导航功能
2.使用自定义组件的方式实现 头部搜索框
3.加载 轮播图 数据
4.加载 导航 数据
5.加载 楼层 数据
#4.3关键技术
1.全局样式设置
2.自定义组件 实现 搜索框
3.uni内置 request API
4.swiper 组件
swiper组件标签存在默认的宽度与高度
100%*150px
图片存在默认宽度与高度
320px*240px
5.uni.request的封装
css样式代码：
<style lang="scss">
page {
padding-top: 90rpx;
}
.index-swiper {
swiper {
width: 750rpx;
height: 340rpx;
image {
width: 100%;
}
}
}
.index-cate {
width: 750rpx;
display: flex;
.iamge-box{
flex: 1;
padding: 20rpx;
}
image {
width: 100%;
}
}
.index-floor{
width: 750rpx;
.floor-title{
image{
width: 100%;
}
}
.floor-list{
padding: 15rpx;
.image-box{
width: 240rpx;
height: calc(240rpx*386/232);
float: left;
//计算最后四个图片的高度
&:nth-last-child(-n+4){
height: calc(240rpx*386/232/2);
border-left: 10rpx solid #ffffff;
}
//第2、3张图片的下边框
&:nth-child(2),&:nth-child(3){
border-bottom: 10rpx solid #ffffff;
}
image{
width: 100%;
height: 100%;
}
}
}
}
</style>
效果图：
首页（index.vue)完整代码：
<template>
<view class="index">
<tcl-header></tcl-header>
<!-- 轮播图 -->
<view class="index-swiper">
<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000">
<swiper-item v-for="(item,index) in swiperList" :key="index">
<image :src="item.image_src" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
<!-- 导航 -->
<view class="index-cate">
<view class="iamge-box" v-for="(item,index) in navList" :key="index" @click="gotfoor()">
<image :src="item.image_src" mode="widthFix"></image>
</view>
</view>
<!-- 楼层 -->
<view class="index-floor">
<view v-for="(item,index) in floorList" :key="index"class="floor-group" @tap='onclick(index)' >
<view class="floor-title">
<image :src="item.floor_title.image_src" mode="widthFix" class="image-tor"></image>
</view>
<view class="floor-list">
<view v-for="(item2,index2) in item.product_list" :key="index2" class="image-box">
<image :src="item2.image_src" mode="widthFix" ></image>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swiperList: [],
navList: [],
floorList:[],
}
},
onLoad() {
this.getSwiperList();//获取轮播图数据
this.getNavList();//获取导航数据
this.getFloorList();//获取楼层数据
},
methods: {
onclick(index){
let name=''
if(index==0){
name="女装"
}else if(index==1){
name="运动户外"
}else{
name="皮具箱包"
}
uni.reLaunch({
url:'/pages/category/category?name='+name
})
},
//异步请求
//async 异步 await 等待
async getSwiperList(){
//await 只能在async标识的函数内使用 await 会阻止塞后继续代码运行
const res=await this.$Https({
url:'/home/swiperdata'
});
console.log(res);
this.swiperList=res.message;
},
//异步请求
//async 异步 await 等待
async getNavList(){
const res=await this.$Https({
url:'/home/catitems'
});
console.log(res);
this.navList=res.message;
},
//获取楼层数据
async getFloorList(){
const res=await this.$Https({
url:'/home/floordata'
});
console.log(res);
this.floorList=res.message;
},
gotfoor(num){
uni.switchTab({
url:'/pages/category/category'
})
},
}
}
</script>
使用uni-app开发黑马优购项目，需要熟练掌握uni-app框架、MVVM架构和相关工具，同时需要有较好的编程和业务处理能力，才能开发出高质量的应用程序。
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
