uni-app课程心得体会以及编程思路

关注

原创 2023-06-15 23:42:18 481 阅读 AI 写同款· GEO 优化 ›

uniapp学习心得作为uniapp的基础底层框架，Vue.js的掌握程度直接决定了你能够如何使用uniapp，特别是在使用Vue的生命周期函数时，更是需要深入理解Vue的整个生命周期。总结：通过以上学习心得，我认为，掌握vue.js的基础知识和熟练使用uniapp框架、注意跨平台的兼容性问题、合理利用第三方插件、以及重视代码优化和重构，是成为一个优秀的uniapp开发者的基本条件。在开发过程中，你需要时刻关注不同平台的差异，特别是在样式和布局方面，不同平台的兼容性问题尤为突出。2.熟悉uniapp框架的使用方法。阅读详情

一.心得体会

1.uniapp具有跨平台的特性，可以使用同样的代码在多个平台（如H5、小程序、App）上进行开发，极大地提高了开发效率和代码复用率。这也意味着在开发时，可以快速地经过调试和测试，在不同平台上发布应用程序，加快开发和部署的速度。

2.uniapp提供了丰富的组件库和插件，可以轻松地创建各种界面和交互元素，如图标、弹出框、下拉刷新等等，可以满足开发需求，加快开发进度，提高开发效率。而且，uniapp具有灵活的扩展性，可以自定义组件和插件，满足开发中的特殊需求。

3.uniapp提供了完善的文档和社区支持，可以很容易地获取使用说明、示例代码、常见问题解答等帮助信息，并且可以在开发过程中获取社区的支持和帮助。这些文档和社区资源，可以让开发者更好地理解和掌握uniapp的使用方法和技巧。

uniapp的跨平台特性、丰富的组件库和插件、完善的文档和社区支持，都为开发提供了非常良好的开发环境和体验，是一个非常优秀的前端开发框架。

1.Uniapp是基于vue.js的跨平台开发框架，学习 UniApp 需要先掌握 Vue.js 的基础知识。主要包括 Vue.js 的生命周期、数据绑定、组件、指令等概念。通过本学期uniapp的学习巩固了前端Vue.js框架的知识。
2.UniApp 的主要特点之一就是跨平台开发能力，在开发过程中要考虑到不同平台的差异，比如uploadFile方法的多文件上传参数files在app端和H5端能使用而在微信小程序端就不支持多文件上传无法使用files参数。如下代码所示

  uni.uploadFile({
                    files:files,
                    formData:{
                        "content":this.commentContent,
                        "productId":productId
                    },

3.在学习过程中通过查找官方文档解决学习中遇到的一些问题，有效地提高了自学能力。
4.UniApp 推崇的是组件化思想，这种思想可以帮助我们将一个复杂的应用程序分解成多个独立的组件，使得开发、测试和维护更加容易。同时，组件化思想也可以促进代码的复用和协作，提高开发效率。

5.在学习uniapp的重要部分组件时，我们需要考虑到组件的可复用性和扩展性，尽量将组件的样式和行为封装起来，使得组件的使用更加简单和方便。同时，我们需要将组件的可配置项尽量抽象出来，以方便未来的扩展和修改。在设计组件时还要考虑到全局和局部，UniApp 组件的样式可以使用全局样式和局部样式，我们需要根据组件的使用情况和需求来设计样式，尽量使得组件的样式和整个应用的样式保持一致，同时也需要考虑到组件的局部样式和全局样式之间的优先级关系。

6.页面路由跳转

页面路由是指不同页面之间的跳转和切换。在 Uniapp 中，我们可以通过编写代码来实现页面的跳转，比如通过点击按钮或者链接来触发跳转。

在 Uniapp 中，页面路由有两种模式：uni-app 和 vue-router。uni-app 是官方提供的路由模式，其特点是简单易用，适合快速开发。vue-router 则是基于 Vue.js 的路由模式，更加灵活和强大，适合复杂应用程序的开发。在编写页面路由的过程中，需要注意页面的生命周期。在页面跳转时，当前页面的生命周期会被触发，可以在生命周期函数中处理一些逻辑，比如清理数据或者保存状态。在页面路由的实现中，还需要注意一些常见问题，比如页面参数的传递、路由的嵌套和重定向等。这些问题都可以通过学习文档和实践来解决。 7.在实现页面通知的过程中有自定义消息中心和通过getCurrentPages()获取页面对象来实现不同页面之间的通信。自定义消息中心能够在不同页面之间实现消息传递从而实现页面之间的通信。而getCurrentPages()方法是通过获取当前页面栈的所有页面实例，并通过获取的所有栈中获取需要通信的页面。这就受到页面打开顺序的影响，而消息通知中心能够更加随心所欲的进行不同页面之间的消息传递。以下为消息通知中心实现代码

//1.用数组保存所有注册的通知（包含名称、要执行的代码、观察者）

let notices = [];
/**
 * 2.注册通知到通知中心
 * @param {String} name 消息名称
 * @param {Function} selector 对应的通知函数
 * @param {Object} observer 观察者
 */
function add(name,selector,observer){
    notices.push({
        name: name,
        selector: selector,
        observer: observer,
    })
}

/**
 * 3.通知成功移除消息
 * @param {String} name 消息名称
 * @param {Object} observer 观察者
 */
function remove(name,observer){
    for(let i=0;i<notices.length;i++){
        if(notices[i].name==name&&notices[i].observer==observer){
            notifications.splice(i, 1);
            break;
        }
    }
}
/**

 * 4.发送通知
 * @param {String} name 消息名称
 * @param {Object} param 通知参数
 */
 function post(name,param){
     notices.forEach(notice=>{
         if(notice.name==name){
             notice.selector(param)
         }
     })
 }
 
 module.exports = {
     add,
     remove,
     post
 }

8.在 UniApp 中，我们可以使用多种方式来进行数据缓存，包括本地存储、缓存组件和插件等。本地存储可以使用 uni.setStorageSync() 和 uni.getStorageSync() 方法实现，缓存组件可以使用 $refs.cache.set() 和 $refs.cache.get() 方法实现，而插件的使用方法和功能因插件而异。需要注意的是，本地存储的数据大小不能超过 10MB，同时对于需要在不同页面之间共享的数据，建议使用本地存储或其他方式来实现。

       //异步
                uni.setStorageSync()
                uni.getStorageSync()
                //同步
                uni.setStorage({
                    key:""
                    data:""
                })
                uni.getStorage({
                    key:"",
                })

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的封装


<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>

效果图：

完整代码：

<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
				})
			},
			//没有封装请求
			// getSwiperList() {
			// 	uni.request({
			// 		url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
			// 		success: (res) => {
			// 			console.log(res);
			// 			this.swiperList = res.data.message;
			// 		}
			// 	})
			// },
			
			//封装请求
			// getSwiperList(){
			// 	this.$Https({
			// 		url:'/home/swiperdata'
			// 	}).then((res)=>{
			// 		console.log(res);
			// 		this.swiperList=res.message;
			// 	})
			// },
			
			//异步请求
			//async 异步 await 等待
		async getSwiperList(){
			//await 只能在async标识的函数内使用 await 会阻止塞后继续代码运行
				const res=await this.$Https({
					url:'/home/swiperdata'
				});
				console.log(res);
				this.swiperList=res.message;
			},
			
			//没有封装请求
			// getNavList() {
			// 	uni.request({
			// 		url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
			// 		success: (res) => {
			// 			console.log(res);
			// 			this.navList = res.data.message;
			// 		}
			// 	})
			// },
			
			//封装请求
			// getNavList(){
			// 	this.$Https({
			// 		url:'/home/catitems'
			// 	}).then((res)=>{
			// 		console.log(res);
			// 		this.navList=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>

<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>

使用uni-app开发黑马优购项目，需要熟练掌握uni-app框架、MVVM架构和相关工具，同时需要有较好的编程和业务处理能力，才能开发出高质量的应用程序。