使用uni-app完成电商类小程序流程

缺乏、安全感 2023-07-07 12:30 4阅读 0赞

推荐使用hbuilderX

## 创建项目和运行项目 ##

![选择uni-app,选择模板,样式用sass或scss自己选择][uni-app_sass_scss]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg2ODQw_size_16_color_FFFFFF_t_70]

## 全局配置 ##

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、
    窗口样式、原生的导航栏、底部的原生tabbar 等。
    它类似微信小程序中app.json的页面管理部分。
    注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>描述</th> 
   <th>平台兼容</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://uniapp.dcloud.io/collocation/pages?id=globalstyle" rel="nofollow">globalStyle</a></td> 
   <td>Object</td> 
   <td>否</td> 
   <td>设置默认页面的窗口表现</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://uniapp.dcloud.io/collocation/pages?id=pages" rel="nofollow">pages</a></td> 
   <td>Object Array</td> 
   <td>是</td> 
   <td>设置页面路径及窗口表现</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://uniapp.dcloud.io/collocation/pages?id=easycom" rel="nofollow">easycom</a></td> 
   <td>Object</td> 
   <td>否</td> 
   <td>组件自动引入规则</td> 
   <td>2.5.0+</td> 
  </tr> 
  <tr> 
   <td><a href="https://uniapp.dcloud.io/collocation/pages?id=tabbar" rel="nofollow">tabBar</a></td> 
   <td>Object</td> 
   <td>否</td> 
   <td>设置底部 tab 的表现</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://uniapp.dcloud.io/collocation/pages?id=condition" rel="nofollow">condition</a></td> 
   <td>Object</td> 
   <td>否</td> 
   <td>启动模式配置</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://uniapp.dcloud.io/collocation/pages?id=subpackages" rel="nofollow">subPackages</a></td> 
   <td>Object Array</td> 
   <td>否</td> 
   <td>分包加载配置</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://uniapp.dcloud.io/collocation/pages?id=preloadrule" rel="nofollow">preloadRule</a></td> 
   <td>Object</td> 
   <td>否</td> 
   <td>分包预下载规则</td> 
   <td>微信小程序</td> 
  </tr> 
  <tr> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html" rel="nofollow">workers</a></td> 
   <td>String</td> 
   <td>否</td> 
   <td><code>Worker</code> 代码放置的目录</td> 
   <td>微信小程序</td> 
  </tr> 
 </tbody> 
</table>

pages.json里面的代码放在下面  
//pages数组中第一项表示应用启动页，  
参考：[pages配置][pages]  
既然pages中有对应的路径,在目录中找到pages在里面新建页面，对应下面的  
tabBar为底部导航,其中有list属性，最少为2个，最多为5个，

其中iconPath和selectedIconPath只支持本地图片

{
       "pages": [
       
           {
               "path" : "pages/home/home",
               "style" : {
       			"navigationBarTitleText":"七毛商城-首页",
       			"enablePullDownRefresh":true
       		}
           }
           ,{
               "path" : "pages/list/list",
               "style" : {
       			"navigationBarTitleText":"分类"
       		}
           }
           ,{
               "path" : "pages/cart/cart",
               "style" : {
       			"navigationBarTitleText":"购物车"
       		}
           }
           ,{
               "path" : "pages/setting/setting",
               "style" : {
       			"navigationBarTitleText":"设置"
       		}
           }
           ,{
               "path" : "components/prolist/prolist",
               "style" : {}
           }
       	
           ,{
               "path" : "pages/detail/detail",
               "style" : {}
           }
           ,{
               "path" : "pages/login/login",
               "style" : {}
           }
           ,{
               "path" : "pages/reg/reg",
               "style" : {}
           }
       ],
       "globalStyle": {
       	"navigationBarTextStyle": "white",
       	"navigationBarTitleText": "uni-app",
       	"navigationBarBackgroundColor": "#ff6666",
       	"backgroundColor": "#F8F8F8"
       },
       "tabBar":{
       	"color":"#000",
       	"selectedColor":"#f66",
       	"backgroundColor":"#fff",
       	"list":[
       		{
       			"pagePath":"pages/home/home",
       			"text":"首页",
       			"iconPath":"static/assets/home.png",
       			"selectedIconPath":"static/assets/home_sel.png"
       		},
       		{
       			"pagePath":"pages/list/list",
       			"text":"列表",
       			"iconPath":"static/assets/type.png",
       			"selectedIconPath":"static/assets/type_sel.png"
       		},
       		{
       			"pagePath":"pages/cart/cart",
       			"text":"购物车",
       			"iconPath":"static/assets/cart.png",
       			"selectedIconPath":"static/assets/cart_sel.png"
       		},
       		{
       			"pagePath":"pages/setting/setting",
       			"text":"设置",
       			"iconPath":"static/assets/setting.png",
       			"selectedIconPath":"static/assets/setting_sel.png"
       		}
       	]
       }
    }

以上为页面基础配置,下面为请求封装,找到utils目录,新建js命名为index.js （随意）  
所谓的封装就是对外暴露请求接口，代码如下

const baseUrl = '自己的接口文档基地址'
    export function request(options){
    // 自己想一下请求需要什么/例如axios
    	const { url,data,method,header } = options
    	//数据没有请求过来之前用加载条
    	uni.showLoading({
    		title:'加载中..'
    	})
    	//返回一个Promise对象，resolve为成功回调，reject为失败回调
    	return new Promise((resolve,reject) => {
    		uni.request({
    			url:baseUrl+url,  //基地址拼上调用接口传递过来的url
    			data:data || {},  //data或者为空，有的时候不需要传递数据
    			method:method || "GET",  // 请求接口默认为GET请求
    			header:header || {}, //请求头   是否需要
    			timeout:6000,  //请求超时时间
    			success(res) {
    				resolve(res)   // 成功回调
    			},
    			fail(err) {
    				reject(err)   //失败回调函数
    			},
    			complete() {
    				uni.hideLoading()  //数据请求完成后关闭加载条
    			}
    		})
    	})
    }
    以上便是一个uni-app的封装，前几期的博客中页讲到过

//不知道你们会不会想到封装的好处，为什么要封装  
最直观的感受

1,提高代码的复用性,减少项目体积,
    在做项目的时候超过两个+的地方就可以考虑一下代码封装
    调用者不需要关注代码是如何封装的,只需要调用暴露的接口即可，即过程是不可见，

以下是一个提示框的封装,过程不多说

export function toast (options) {
    	const { title,icon,duration } = options
    	uni.showToast({
    		title:title,
    		icon:icon || 'none',
    		duration:duration || 5000
    	})
    }

以上为代码封装的问题，那么问题来了，当你展示首页的时候，是在什么地方调用接口，ok，下面是uni-app的生命周期

### 小程序生命周期 ###

**1应用生命周期**

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLaunch</td> 
   <td>当<code>uni-app</code> 初始化完成时触发（全局只触发一次）</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>当 <code>uni-app</code> 启动，或从后台进入前台显示</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>当 <code>uni-app</code> 从前台进入后台</td> 
  </tr> 
  <tr> 
   <td>onError</td> 
   <td>当 <code>uni-app</code> 报错时触发</td> 
  </tr> 
  <tr> 
   <td>onUniNViewMessage</td> 
   <td>对 <code>nvue</code> 页面发送的数据进行监听，可参考 <a rel="nofollow">nvue 向 vue 通讯</a></td> 
  </tr> 
 </tbody> 
</table>

== 注意以上应用生命周期仅可在App.vue中监听，在其它页面监听无效==

**2页面生命周期**

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLoad</td> 
   <td>监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考<a href="https://uniapp.dcloud.io/api/router?id=navigateto" rel="nofollow">示例</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onReady</td> 
   <td>监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>监听页面隐藏</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onUnload</td> 
   <td>监听页面卸载</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onResize</td> 
   <td>监听窗口尺寸变化</td> 
   <td>App、微信小程序</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onPullDownRefresh</td> 
   <td>监听用户下拉动作，一般用于下拉刷新，参考<a href="https://uniapp.dcloud.io/api/ui/pulldown" rel="nofollow">示例</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onReachBottom</td> 
   <td>页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onTabItemTap</td> 
   <td>点击 tab 时触发，参数为Object，具体见下方注意事项</td> 
   <td>微信小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onShareAppMessage</td> 
   <td>用户点击右上角分享</td> 
   <td>微信小程序、百度小程序、头条小程序、支付宝小程序</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onPageScroll</td> 
   <td>监听页面滚动，参数为Object</td> 
   <td>nvue暂不支持</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onNavigationBarButtonTap</td> 
   <td>监听原生标题栏按钮点击事件，参数为Object</td> 
   <td>App、H5</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onBackPress</td> 
   <td>监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：<a href="http://ask.dcloud.net.cn/article/35120" rel="nofollow">onBackPress 详解</a></td> 
   <td>app、H5、支付宝小程序</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onNavigationBarSearchInputChanged</td> 
   <td>监听原生标题栏搜索输入框输入内容变化事件</td> 
   <td>App、H5</td> 
   <td>1.6.0</td> 
  </tr> 
  <tr> 
   <td>onNavigationBarSearchInputConfirmed</td> 
   <td>监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。</td> 
   <td>App、H5</td> 
   <td>1.6.0</td> 
  </tr> 
  <tr> 
   <td>onNavigationBarSearchInputClicked</td> 
   <td>监听原生标题栏搜索输入框点击事件</td> 
   <td>App、H5</td> 
   <td>1.6.0</td> 
  </tr> 
 </tbody> 
</table>

\*\*3组件生命周期\*\*

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>在实例初始化之后被调用。<a href="https://cn.vuejs.org/v2/api/#beforeCreate" rel="nofollow">详见</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>在实例创建完成后被立即调用。<a href="https://cn.vuejs.org/v2/api/#created" rel="nofollow">详见</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>在挂载开始之前被调用。<a href="https://cn.vuejs.org/v2/api/#beforeMount" rel="nofollow">详见</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>挂载到实例上去之后调用。<a href="https://cn.vuejs.org/v2/api/#mounted" rel="nofollow">详见</a> 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用<code>$nextTick</code><a href="https://cn.vuejs.org/v2/api/#Vue-nextTick" rel="nofollow">Vue官方文档</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>数据更新时调用，发生在虚拟 DOM 打补丁之前。<a href="https://cn.vuejs.org/v2/api/#beforeUpdate" rel="nofollow">详见</a></td> 
   <td>仅H5平台支持</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。<a href="https://cn.vuejs.org/v2/api/#updated" rel="nofollow">详见</a></td> 
   <td>仅H5平台支持</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>实例销毁之前调用。在这一步，实例仍然完全可用。<a href="https://cn.vuejs.org/v2/api/#beforeDestroy" rel="nofollow">详见</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。<a href="https://cn.vuejs.org/v2/api/#destroyed" rel="nofollow">详见</a></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

是不是不知道组件生命周期的区别、自己以前总结的，大白话

beforeCreate（创建前）
    在实例初始化之后，数据观测和事件配置之前被调用，此时组建的选项对象还未创建，el和data还没有初始化，因此无法访问methods,data，computed等上的方法和数据
    created（创建后）
    实例已经创建完成之后被调用，在这一步，实例已完成以下配置，数据观测，属性和方法的运算，watch/event事件回调，完成了data数据的初始化，el没有，但是，挂载阶段还没开始，$el属性不可见，在这个阶段你可以调用methods中的方法，改变data中的数据，注意点是这个周期是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合这个方法请求
    beforeMount
    #app还没挂载到el上
    变量还没被解析
    挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM)，实例已完成编译模版，把data里面的数据和模版生成html，完成了el和data初始化，注意此时还没有挂载html到页面上
    mounted
    挂载完成，也就是模板中的html渲染到页面中，此时一般可以做一些ajax操作，mounted只会执行一次
    beforeUpdate（更新前）
    视图dom不同，
    document.getElementById('tit').innerHTML
    在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步的更改状态，不会触发附加的重渲染过程
    updated（更新后）
    在由于数据更改导致地虚拟DOM重新渲染和调用，打补丁只会调用，调用时，组建DOM已经更新，所以可以执行依赖于DOM地操作，然后再大多数情况下，应该避免再此期间更改状态，因为可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用
    beforeDestroy（销毁前）
    在实例销毁之前调用，实例仍然完全可用
    1，这一步还可以用this来获取实例
    2一般在这一步做一些重置地操作，比如清除掉组件中的定时器和监听的dom事件
    destroyed（销毁后）
    在实例销毁之后调用，调用后，所有地事件监听器都会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

以上为小程序(uni-app)生命周期 ,有了生命周期，是不是开始写页面,以首页为例

wxml代码
    <template>
    	<view>
    		<swiper class="swiper" autoplay>
    		<swiper-item v-for="(item,i) in bannerlist" :key="i" class="swiperchild">
    			<image class="img" mode="aspectFill" :src="item.coverImg"></image>
    		</swiper-item>
    	</swiper>
    	<prolist  :prolist="prolist" /> // 为商品列表组件,只需传值把需要的值传过去即可(父传子)
    	<view class="gotop" v-if="flag" @click="backtop">
    		<view class="top">
    			↑
    		</view>
    	</view>	
    	</view>
    </template>

import prolist from '../../components/prolist/prolist'  // 引入组件
    	import { request,toast } from '../../utils/index.js' //引入封装的请求
    	export default {
    		data() {
    			return {
    				prolist:[],  //当前商品的数据
    				bannerlist:[],
    				page:1,
    				flag:false
    			};
    		},
    		components:{
    			prolist
    		},
    		methods:{
    		//返回顶部,点击调用API即可
    			backtop(){
    				uni.pageScrollTo({
    					scrollTop:0,
    					duration:200
    				})
    			}
    		},
    		//异步请求数据
    		async mounted() {
    			const res = await request({
    				url:'/api/v1/products'
    			})
    			console.log(res.data.products)
    			this.prolist = res.data.products
    			this.bannerlist = res.data.products
    		},
    		//返回顶部按钮在滚动条距离顶部200的时候显示，小于200隐藏
    		onPageScroll (options) {
    			const { scrollTop } = options
    			if(scrollTop>=200){
    				this.flag = true
    			}else{
    				this.flag = false
    			}
    		},
    		//触底事件，用于加载更多，页码加1，再次请求数据即可
    		 async onReachBottom () {
    			console.log('触底了')
    			this.page++
    			if(this.page>=19){
    				toast({
    					title:'暂无更多数据',
    					icon:'none'
    				})
    				
    			}else{
    				const res = await request({
    					url:'/api/v1/products',
    					data:{
    						page:this.page
    					}
    				})
    				//扩展运算符的使用，把当前已请求的数据和刚请求的数据放在一个数据里面,赋值即可
    				this.prolist = [...this.prolist,...res.data.products]
    			}
    			
    			
    		}
    	}

以上为轮播图和商品列表的数据，只需要在子组件中调用即可，  
子组件数据 路径 components/prolist/prolist.vue  
父组件传递的数据在子组件中如何拿到

<view class="all">
    		<view class="prolist"  
    		v-for="(item,i) in prolist" 
    		@click="godetail(item._id)"
    		:key="i">
    			<image class="img" :src="item.coverImg"></image>
    			<text class="name">{
       {item.name}}</text>
    			<view class="bottom">
    				<text class="desc">{
       {item.descriptions}}</text>
    				<text class="price">{
       {item.price | glq}}</text>
    			</view>
    		</view>
    	</view>

export default {
    //通过props中prollist直接获取
    		props:{
    			prolist:{
    				type:Array, //生命传值的类型
    				default:function () {
    					return []
    				}
    			}
    		},
    		data() {
    			return {
    				
    			}
    		},
    		mounted() {
    			console.log(props)
    		},
    		methods: {
    		//跳转详情
    			godetail(e){
    				if(e){
    					uni.navigateTo({
    						url:'/pages/detail/detail?id='+e,
    						animationType:"slide-in-top",
    						animationDuration:200,
    					})
    				}
    			}
    		},
    		filters:{
    			glq:function(data){
    				return '￥'+data
    			}
    		}
    	}

在商品详情中同样是调用接口，展示数据，在详情页面中加购等需要判断是否登录，本地是否存在token等字段

详情js
    gocart () {
    				console.log(this.value)
    				let token = uni.getStorageSync('token')
    				if(token){
    					request({
    						url:'/api/v1/shop_carts',
    						method:"POST",
    						header:{
    							"authorization":"Bearer "+ token  //header头部信息传递token
    						},
    						data:{
    							product:this.detail._id,
    							quantity:this.value
    						}
    					}).then(res=>{
    						if(res.data.code == 'success'){
    							toast({
    								title:res.data.message
    							})
    						}else{
    							
    						}
    					})
    				}else{
    					toast({
    						title:'请去登录'
    					})
    					//如果本地不存在token，说明登录过期或者没登陆，直接跳转到login页面
    					uni.navigateTo({
    						url:'/pages/login/login'
    					})
    				}
    			}

以下为login页面

wxml页面
    <view>
    		<input 
    		type="text" 
    		class="ipt"
    		@input="Oninput"
    		placeholder="请输入手机号"
    		v-model="tel"
    		/>
    		<text
    		v-if="isshow"
    		/*
    		动态绑定class名如果长度为11为class为error反之success,css没写，自己写上即可
    		*/
    		:class="tel.length !== 11 ? 'error' : 'success'"
    		>
    			{
       {teltip}}
    		</text>
    		<input
    		type="password" 
    		class="ipt"
    		@input="Oninput1"
    		placeholder="请输入密码"
    		v-model="pwd"
    		/>
    		<text
    		v-if="isshow1"
    		:class="pwd.length < 6 ? 'error' : 'success'"
    		>
    			{
       {pwdtip}}
    		</text>
    		/*
    		disable属性动态的去判断为true还是false，进而去带来更好的用户体验
    		type属性满足条件为warn，不满足为default   
    		*/
    		<button 
    		class="btn"
    		:disabled="tel.length!==11 || pwd.length < 6"
    		:type="tel.length===11&&pwd.length>5?'warn':'default'"
    		@click="login"
    		>点击登录</button>
    	</view>

文中的两个text为提示信息，基本逻辑如下

js
    import { request,toast } from '../../utils/index.js'
    	export default {
    		data() {
    			return {
    				tel:'',
    				pwd:'',
    				isshow:false,
    				isshow1:false
    			};
    		},
    		methods:{
    			Oninput (){
    				if(this.tel.length >=1){
    					this.isshow = true
    				}else{
    					this.isshow = false
    				}
    			},
    			Oninput1 () {
    			/*
    			在tel输入框内容发生改变的时候触发当前事件，
    			、如果长度大于1就说明输入框中已经存在值，让提示框显示去判断验证是否满足
    			这个时候就应该去判断当前输入框的值是否满足手机号码，
    			这个地方手机号码验证就不写了
    			*/
    				if(this.pwd.length >=1){
    					this.isshow1 = true
    				}else{
    					this.isshow1 = false
    				}
    			},
    			//登录操作
    			login () {
    			//再次判断,
    				if(this.tel.length === 11 && this.pwd.length >= 6){
    					request({
    						url:'/api/v1/auth/login',
    						method:"POST",
    						data:{
    							userName:this.tel,
    							password:this.pwd
    						}
    					}).then(res=>{
    						console.log(res)
    						if(res.data.code == 'success'){
    							toast({
    								title:'登陆成功'
    							})
    							/*
    								存储token,返回上一级，
    							*/
    							try{
    								uni.setStorageSync('token',res.data.token)
    								uni.navigateBack()
    							}catch(e){
    								//TODO handle the exception
    							}
    						}else{
    							toast({
    								title:res.data.message
    							})
    						}
    					})
    				}else{
    					toast({
    						title:'格式不正确',
    						icon:'none'
    					})
    				}
    			}
    		},
    		computed:{
    			teltip () {
    				if(this.tel.length !== 11){
    					return '手机号码格式不正确'
    				}else{
    					return '手机号码格式正确'
    				}
    			},
    			pwdtip () {
    				if(this.pwd.length >= 6){
    					return '密码强度为高'
    				}else{
    					return '密码强度为低'
    				}
    			}
    		}
    	}

既然已经加入购物车了，那就展示购物车中的数据呗  
//注意的是跳转下面tabBar任何一个，都需要加上open-type=“switchTab”  
更多请去了解[uni-app路由][uni-app]  
购物车中的问题无非就是全选反选,根据全选反选计算总价删除商品

<view>
    
    		<navigator
    		 open-type="switchTab"  
    		 class="noned" v-if="flag"
    		  url="../home/home">购物车为空去购买</navigator>
    		<view  class="allcartlist">
    			<view class="everypro" v-for="(item,i) in cartlist" :key="i">
    				<checkbox-group name="" @change="Onchange(item)">
    					<checkbox :checked="item.product.onSale" />
    				</checkbox-group>
    				<view class="proimg">
    					<image class="img" :src="item.product.coverImg" mode=""></image>
    				</view>
    				<view class="right">
    					<view class="name">{
       {item.product.name}}</view>
    					<view class="desc">{
       {item.product.descriptions}}</view>
    					<view class="bottomnum">
    						<text class="price">{
       {item.product.price | glq}}</text>
    						<text class="quan">×{
       {item.quantity}}</text>
    					</view>
    				</view>
    			</view>
    		</view>
    		
    		
    		<view class="tipro">
    			<view class="ti">
    				<checkbox-group @change="allSelected">
    					<checkbox :checked="isAllselected" />
    				</checkbox-group>
    				<view class="app">总价:{
       {allprice}}</view>
    				<view class="tibtn">
    					提交订单
    				</view>
    			</view>
    		</view>
    	</view>

//cart/js
    import { request,toast } from '../../utils/index.js'
     	export default {
    		data() {
    			return {
    				flag:false,
    				cartlist:[],
    				isAllselected:false
    			};
    		},
    		//onShow生命周期是当页面从后台切换到前台的时候触发
    		onShow() {
    			let token = uni.getStorageSync('token')
    			if(token){
    				request({
    					url:'/api/v1/shop_carts',
    					header:{
    						"authorization":"Bearer "+ token
    					}
    				}).then(res=>{
    				//再次做个判断如果当前购物车中没有商品的话，展示去加购，跳转首页即可
    					if(res.data == []){
    						this.flag = true
    					}else{
    						this.flag = false
    						console.log(res.data)
    						//赋值,v-for遍历展示数据
    						this.cartlist = res.data
    					}
    				})
    			}else{
    				toast({
    					title:'请登录'
    				})
    				uni.navigateTo({
    					url:'/pages/login/login'
    				})
    			}
    		},
    		methods:{
    		//全选反选操作
    			Onchange (e) {
    				e.product.onSale = !e.product.onSale
    				// 如何有一项商品未被选中 ，则全选框不被选中
    				//如果单独某一项被选中，看看其他商品是否被全部选中
    				console.log(e.product.onSale)
    				// 默认为false,如果当前购物车中的商品有意向没被选中的话，全选不被选中
    				//反之，拿到当前购物车中的每一项数据，修改onSale属性为true
    				if(!e.product.onSale) { 
    					this.isAllselected = false
    				}else{
    				//设置每一项都为true
    					const allChecked = this.cartlist.every(item=>{
    						return item.product.onSale === true
    					})
    					// 下面判断allChecked是否为true即可,
    					//如果为true则全被选中，让全选为true,如果为false，让全选为false
    					if(allChecked){
    						this.isAllselected = true
    					}else{
    						this.isAllselected = false
    					}
    				}
    			},
    			/* 
    			点击全选，如果全选被选中，则遍历当前购物车中每一项，设置onSale为true，就是每一项都被选中
    			*/
    			allSelected () {
    				this.isAllselected = !this.isAllselected
    				// console.log(this.isAllselected)
    				if(this.isAllselected){
    					this.cartlist.map(item=>{
    						item.product.onSale = true
    					})
    				}else{
    					this.cartlist.map(item=>{
    						item.product.onSale = false
    					})
    				}
    			}
    		},
    		filters:{
    			glq:function(data){
    				return '￥'+data
    			}
    		},
    		computed:{
    		//计算总价遍历选中每一项数据依次累加
    		总价 = 当前选中的商品*价格，选中几项，累加几项即可，最后返回总价，展示页面
    			allprice(){
    				let allprice = 0;
    				this.cartlist.map(res=>{
    					// 如果被选中总价为当前购物车中每个商品的数量*每个商品的价格
    					// 否则
    					res.product.onSale
    					?
    					allprice
    					+=
    					res.quantity * res.product.price
    					:
    					allprice+=0
    				})
    				return allprice
    			}
    		}
    	}

//以上为uni-app中轮播图，商品列表，跳详情,加购，购物车中展示数据，全选反选，登录，css均未写。

特殊时期，在家就不要乱走动，逆战中更要不断地磨练自我，争取在自己需要的时候绽放出光芒。下面带着大家写一套电商类小程序的主要流程，个人练习，不喜勿喷

[uni-app_sass_scss]: https://img-blog.csdnimg.cn/20200223123721703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg2ODQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg2ODQw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200223124858175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg2ODQw,size_16,color_FFFFFF,t_70
[pages]: https://uniapp.dcloud.io/collocation/pages
[uni-app]: https://uniapp.dcloud.io/api/router?id=navigateto