基于vue的uni-app实现微信小程序中的购物车基本功能

1.微信小程序

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验，其中购物车为电商小程序的核心，本文章通过uni-app进行简单购物车的开发。

1.1前期准备

后端接口的编写（使用node进行编写），本处暂时不进行详细说明。封装公共的请求数据的方法，涉及到uni-app中提供的uni.request()

export function request(options){
	const {url,data={},method="GET",header={}}=options
	uni.showLoading({
		title:'Loading~~'
	})
	return new Promise((resolve,reject)=>{
		uni.request({
			url:baseUrl+url,//请求路径
			data,//请求参数
			method,//请求方法
			header,
			timeout:6000,
			success: (res) => {
				resolve(res)
			},
			fail: (err) => {
				reject(err)
			},
			complete: () => {
				uni.hideLoading()
			}
		})
	})
}

1.2登陆获取用户id和token

实现购物车的登陆添加、修改商品数量、删除功能。在使用购物车前，需要获取当前账户的唯一标识–存储在本地的token，以下是登陆成功后后端返回的数据格式：

// 登陆成功
{
code: ‘10008’,
message: ‘登陆成功’,
“data”: {
“userid”: “user_73e91fc0-157b-11ea-9536-db1ce873a934”,
“username”: “wudaxun”,
“token”: “eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0ZWwiOiIxODgxMzAwNzgxNCIsImlhdCI6MTU3NjIyMDM2NiwiZXhwIjoxNTc2ODI1MTY2fQ.AbkxGcEbD4zD_UaP3Y_dty38E8ZK