uni

2023-06-22 17:28| 来源: 网络整理| 查看: 265

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

在学习uniapp的过程中，我试着以node.js作为后端，开发了一个网上商城app。这个app底部Tabber有着四个功能页面：首页，分类，购物车，我的。

1.首页代码和实现效果 {{item.name}} 暂无数据... {{item.loadText}} import recommendVue from '../../colorui/components/recommend.vue'; import swiperVue from '../../colorui/components/swiper.vue'; import cardVue from '../../colorui/components/Card.vue'; import commodityVue from '../../colorui/components/CommodityList.vue'; import Banner from '../../colorui/components/Banner.vue'; import Icons from '../../colorui/components/Icons.vue'; import Hot from '../../colorui/components/Hot.vue'; import $http from '@/common/api/request.js'; import Tabbar from '@/colorui/components/Tabbar.vue' export default { data() { return { //索引 topBarIndex: 0, //顶栏滑动 scrollIndex: 'top0', //内容块高度 clientHeight: 0, //顶栏数据 topBar: [], //承载数据 newTopBar: [] } }, components: { swiperVue, recommendVue, cardVue, commodityVue, Banner, Icons, Hot, Tabbar }, onLoad() { this.__init(); }, onReady() { uni.getSystemInfo({ success: (res) => { this.clientHeight = res.windowHeight - this.getClientHeight(); } }) }, onNavigationBarButtonTap(e) { if (e.float == 'left') { uni.navigateTo({ url: "../search/search" }) } }, methods: { //请求首页数据10.92.12.23，192.168.2.213，localhost __init() { $http.request({ url: "/index_list/data" }).then((res) => { this.topBar = res.topBar; this.newTopBar = this.initData(res); }).catch(() => { uni.showToast({ title: '请求失败', icon: 'none' }) }) }, //添加数据 initData(res) { let arr = []; for (let i = 0; i < this.topBar.length; i++) { let obj = { data: [], load: "first", loadText: "上拉加载更多..." } //获取首次数据 if (i == 0) { obj.data = res.data; } arr.push(obj) } return arr; }, // goDetailPage(e) { // if (typeof e === 'string') { // uni.navigateTo({ // url: '/pages/tabBar/' + e + '/' + e // }); // } else { // uni.navigateTo({ // url: e.url // }); // } // }, //点击顶栏 changeTab(index) { if (this.topBarIndex === index) { return; } this.topBarIndex = index; this.scrollIndex = 'top' + index; //每一次滑动==》赋值first if (this.newTopBar[this.topBarIndex].load === 'first') { this.addData(); } }, //滑动 onChangeTab(e) { this.changeTab(e.detail.current); }, //获取可视区域高度 getClientHeight() { const res = uni.getSystemInfoSync(); const system = res.platform; if (system === 'ios') { return 44 + res.statusBarHeight; } else if (system === 'android') { return 48 + res.statusBarHeight; } else { return 0; } }, //显示不同数据 addData(callback) { //拿到索引 let index = this.topBarIndex; //拿到id===>不同的板块 let id = this.topBar[index].id; //请求不同的数据 let page = Math.ceil(this.newTopBar[index].data.length / 5) + 1; console.log(page); console.log(id); $http.request({ url: '/index_list/' + id + '/data/' + page + '' }).then((res) => { this.newTopBar[index].data = [...this.newTopBar[index].data, ...res]; }).catch(() => { uni.showToast({ title: '请求失败', icon: 'none' }) }) //当请求结束后，重新赋值 this.newTopBar[index].load = 'last'; if (typeof callback === 'function') { callback(); } }, loadMore(index) { this.newTopBar[index].loadText = '加载中...'; //请求完数据，文字提示信息又换成【上拉加载更多...】 this.addData(() => { this.newTopBar[index].loadText = '上拉加载更多...'; }) } } } .scroll-content { width: 100%; height: 80rpx; white-space: nowrap; } .scroll-item { display: inline-block; padding: 10rpx 30rpx; font-size: 32rpx; } .f-active-color { padding: 10rpx 0; border-bottom: 6rpx solid #49BDfd; } .load-text { border-top: 2rpx solid #636263; line-height: 60rpx; text-align: center; }

效果图

功能

该页面实现了轮播图功能，导航栏的内容选择，导航栏的滑动，商品卡片，触底加载更多等功能。

2.分类代码和实现效果 {{item.name}} {{k.name}} {{j.name}} import $http from '@/common/api/request.js' import Lines from '@/colorui/components/Lines.vue' import Tabbar from '@/colorui/components/Tabbar.vue' export default { data() { return { clentHeight:0, activeIndex:0, //左侧数据 leftData:[], //右侧数据 rightData:[] } }, //获取可视高度 onReady() { uni.getSystemInfo({ success: (res) => { this.clentHeight = res.windowHeight - this.getClientHeight(); } }) }, onLoad(){ this.getData(); }, components:{ Lines, Tabbar }, methods: { //请求数据方法 getData(id){ if( id === (this.activeIndex+1) ){ return; } $http.request({ url:"/goods/list" }).then((res)=>{ let leftData = []; let rightData = [] res.forEach(v=>{ leftData.push({ id:v.id, name:v.name }) //如果点击的id值相同 if( v.id === (this.activeIndex+1) ){ rightData.push(v.data); } }) this.leftData = leftData; this.rightData = rightData; }).catch(()=>{ uni.showToast({ title:'请求失败', icon:'none' }) }) }, //获取可视区域高度【兼容】 getClientHeight(){ const res = uni.getSystemInfoSync(); const system = res.platform; if( system ==='ios' ){ return 44+res.statusBarHeight; }else if( system==='android' ){ return 48+res.statusBarHeight; }else{ return 0; } }, //左侧点击事件 changeLeftTab(index,id){ this.getData(id); this.activeIndex = index; } }, //input输入框点击事件 onNavigationBarSearchInputClicked(){ uni.navigateTo({ url:'../search/search' }) } } .list{ display: flex; } .list-left{ width: 200rpx; } .left-item{ border-bottom:2rpx solid #FFFFFF; font-size:28rpx; font-weight: bold; background-color: #F7F7F7; } .left-name{ padding:30rpx 6rpx; text-align: center; } .left-name-active{ border-left:8rpx solid #49BDFB; background-color: #FFFFFF; } .list-right{ flex:1; padding-left:30rpx; } .list-title{ font-weight: bold; padding:30rpx 0; } .right-content{ display: flex; flex-wrap: wrap; } .right-item{ width: 150rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; padding:10rpx; } .right-name{ padding:16rpx 0; } .right-img{ width: 150rpx; height: 150rpx; }

效果图

该页面目前开发程度不高，使用的数据为本地的数据，可以在后端文件中进行添加。

功能

实现的功能有侧边栏，还有根据侧边栏的标题展示相应的内容。

3.购物车代码和实现效果 {{item.name}} {{item.color}} ¥{{item.pprice}} *{{item.num}} 全选合计：¥{{totalCount.pprice}} 结算({{totalCount.num}}) 移入收藏夹删除囧～购物车还是空的～ import $http from '@/common/api/request.js' import uniNavBar from '@/common/uni/uni-nav-bar/uni-nav-bar.vue' import uniNumberBox from '@/common/uni/uni-number-box/uni-number-box.vue' import {mapState,mapActions,mapGetters,mapMutations} from 'vuex' import Tabbar from '@/colorui/components/Tabbar.vue' export default { data() { return { isNavBar:false } }, computed:{ ...mapState({ list:state=>state.cart.list, selectedList:state=>state.cart.selectedList }), ...mapGetters(['checkedAll','totalCount']) }, components:{ uniNavBar, uniNumberBox, Tabbar }, onShow() { this.getData(); }, methods: { ...mapActions(['checkedAllFn','delGoodsFn']), ...mapMutations(['selectedItem','initGetData','initOrder']), getData(){ $http.request({ url:"/selectCart", method:"POST", header:{ token:true } }).then((res)=>{ this.initGetData(res); }).catch(()=>{ uni.showToast({ title:'请求失败', icon:'none' }) }) }, changeNumber(value,index,item){ if( item.num == value ) return; $http.request({ url:"/updateNumCart", method:"POST", header:{ token:true }, data:{ goodsId:item.goods_id, num:value } }).then((res)=>{ console.log(res); this.list[index].num = value; }).catch(()=>{ uni.showToast({ title:'请求失败', icon:'none' }) }) }, //进入确认订单 goConfirmOrder(){ if( this.selectedList.length === 0 ){ return uni.showToast({ title:"请至少选择一件商品", icon:"none" }) } let newList = []; this.list.forEach(item=>{ this.selectedList.filter(v=>{ if( item.id == v ){ newList.push( item ); } }) }) $http.request({ url:"/addOrder", method:"POST", header:{ token:true }, data:{ arr:newList } }).then((res)=>{ if( res.success ){ //存储订单号 this.initOrder( res.data[0].order_id ); //跳转页面 uni.navigateTo({ url:`../confirm-order/confirm-order?detail=${JSON.stringify(this.selectedList)}` }) } }).catch(()=>{ uni.showToast({ title:'请求失败', icon:'none' }) }) } } } .shop-list{ padding-bottom:100rpx; } .shop-else-list{ position: absolute; left:0; top:0; right:0; bottom:0; background-color: #F7F7F7; display: flex; align-items: center; justify-content: center; } .shop-item{ display: flex; padding:20rpx; align-items: center; background-color: #F7F7F7; margin-bottom:10rpx; } .shop-img{ width:200rpx; height: 200rpx; } .shop-text{ flex:1; padding-left:20rpx; } .shop-color{ font-size:24rpx; } .shop-price{ display: flex; justify-content: space-between; } .shop-foot{ border-top:2rpx solid #F7F7F7; background-color: #FFFFFF; position: fixed; bottom:120rpx; left:0; width:100%; height: 100rpx; display: flex; justify-content: space-between; align-items: center; } .foot-radio{ padding-left:20rpx; } .foot-total{ display: flex; } .foot-count{ line-height: 100rpx; padding:0 20rpx; font-size:32rpx; } .foot-num{ background-color: #49BDFB; color:#FFFFFF; padding:0 60rpx; line-height: 100rpx; }

效果图

功能

该页面已实现通过商品详情页添加商品进入购物车，在头部点击编辑时可以进行删除还有修改商品数量，底部合计商品价格，点击结算生成订单跳转到订单页面等。在购物车内商品为空时，效果图：

4.我的代码和实现效果 {{ loginStatus ? userInfo.nickName : "用户名称" }} 我的订单全部订单 > 待付款待付款待付款待付款待付款我的收藏 > 我的收藏 > 我的收藏 > 我的收藏 > 我的收藏 > 我的收藏 > 我的收藏 > import {mapState} from 'vuex'; import Tabbar from '@/colorui/components/Tabbar.vue' export default { data() { return { } }, components:{ Tabbar }, computed:{ ...mapState({ loginStatus:state=>state.user.loginStatus, userInfo:state=>state.user.userInfo }) }, methods: { goConfig(){ uni.navigateTo({ url:'../my-config/my-config' }) }, goOrder(){ uni.navigateTo({ url:'../my-order/my-order' }) }, goLogin(){ uni.navigateTo({ url:"../login/login" }) } } } .my-header{ background: url(../../static/img/mybg.png) no-repeat; width: 100%; height: 400rpx; } .header-main{ position: relative; top:120rpx; } .header-config{ position: absolute; left:20rpx; } .header-logo{ position: absolute; left:50%; margin-left:-60rpx; width:120rpx; } .config-img{ width: 40rpx; height: 40rpx; } .logo-img{ width: 120rpx; height: 120rpx; border:2rpx solid #CCCCCC; border-radius: 50%; background-color: #FFFFFF; } .logo-name{ font-weight: bold; color:#FFFFFF; text-align: center; } .order-title{ display: flex; justify-content: space-between; align-items: center; padding: 20rpx; } .order-list{ padding: 20rpx; display: flex; } .order-item{ flex:1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .order-img{ width:66rpx; height: 66rpx; } .my-content{ margin:20rpx 0; padding:0 20rpx; } .my-content-item{ display: flex; justify-content: space-between; align-items:center; padding:20rpx 0; border-bottom: 2px solid #CCCCCC; }

效果图

功能

该页面实现了显示用户昵称和头像，退出登录，查看订单等功能。

5.心得体会

制作网上商城App时，UniApp是一个很好的选择，因为它基于Vue.js框架，并且可以方便地实现跨平台开发。通过UniApp，我们可以使用Vue.js编写组件并将其打包到iOS和Android应用程序中，大大简化了开发流程。

另外，在使用UniApp的过程中，我注意到一些要点和几点优势，还有一些缺点：

一.要点

1.组件库

由于UniApp基于Vue.js框架，所以可以使用许多现成的Vue.js组件库来快速构建网上商城APP。比较流行的组件库有Vant、Element和Mint等。这些组件库不仅提供了组件样式和响应事件，也提供了快捷的API调用方法，可以轻松实现各种功能。

2.跨平台性

UniApp的强大之处在于可以同时生成iOS和Android应用程序。我们只需要使用UniApp的一些API，就可以实现对设备、屏幕尺寸和系统版本等进行自适应布局和处理，提供更好的用户体验。

3.接口请求

在开发网上商城App时，通常需要与服务器进行接口交互。UniApp提供了封装uni.request的API，使我们可以轻松地发送HTTP/HTTPS网络请求。还可以使用众多第三方网络请求库，如axios、flyio等，从而实现复杂的请求和响应操作。

二.优势

1.统一开发：UniApp 可以将一个源代码文件同时打包成 iOS、Android 等多个平台相应的应用。这让我们可以在不同平台上编写统一的代码，并免去了复制粘贴问题。

2.易上手：既然 UniApp 使用 Vue.js 框架，那么只要掌握了 Vue.js 相关知识，就能快速上手 UniApp。同时，它还提供了完善的文档和示例，对初学者更加友好。

3.生态丰富：与其他跨平台解决方案相比，在线文档、在线视频、技术社区等都较为完善，获取相关资源更加容易，也适合团队协作。

4.性能高效：如果仅考虑原生应用的生成速度和运行速度，Uniapp 的表现并不差，框架本身做了很多性能优化工作，并且还支持 HBuilderX 工具生成原生应用，同时现在与小程序、快应用联调也越来越良好。

三.缺点

1.性能限制： UniApp使用了WebView来渲染应用程序，这意味着应用的性能受到移动设备内置浏览器的限制。相对于原生应用程序，UniApp应用可能存在一定程度上的性能损失。

2.体验不如原生应用：尽管UniApp提供了一些API来处理不同平台的适配问题，但由于不同平台操作系统和用户界面的差异，UniApp应用在用户体验方面往往无法和原生应用媲美。

3.功能限制： UniApp需要针对不同平台进行兼容处理，因此可能无法完全使用每个平台提供的所有功能和特性。在需要涉及平台特定功能的场景下，可能需要编写平台相关代码或使用插件才能实现所需功能。

4.开发门槛：对于熟悉Vue.js的开发者来说，上手UniApp相对容易。但对于没有前端开发经验的开发者来说，可能需要学习Vue.js和UniApp的知识才能进行开发，这增加了开发的学习曲线。

5.社区生态相对较小：相比于其他跨平台开发框架，UniApp的社区生态相对较小，可用的插件和资源可能相对有限。这意味着在遇到问题时，可能需要更多自己解决或借助有限的社区资源。

综上所述，虽然UniApp具有跨平台开发的便利性，但也存在一些性能、用户体验、功能限制、开发门槛和社区生态等方面的缺点，需要根据具体需求和项目情况进行权衡和选择。

以上就是我的关于使用UniApp开发网上商城APP的心得体会和一些演示代码。总体来说，我觉得UniApp是一个非常棒的跨平台开发框架，可以提高开发效率，简化开发流程，并同时支持多个移动设备平台上部署。

【本文地址】

uni

uni

今日新闻

推荐新闻