关于使用uni app开发叮咚买菜的一些注意事项

这个项目是纯开源的，并且是免费的。产品信息来自网络。如有侵权，请联系作者，我会及时删除！

前一段，我看到了叮咚这个大块头，买菜很在行。所以我在家里想了想。我制作了一个版本，并记录了一些uniApp开发问题。这只是个人总结。请评论错误！功能不是很全面。我决定以后继续更新它们作为一个系列

1、 预览：

在线预览地址：

github：

如果你觉得没问题，那就开始吧？我将继续努力改进项目，争取完全的开源

1.主页

形象

2.分类

形象

3.添加到购物车

形象

4.交货地址

形象

5.我的

形象

2、 项目简介

1.vant Ui库

在uni app中使用H5版本Ui库

本网站使用H5版本的vant（请使用vant的小程序版本打包小程序和App）UI库

Npm init#初始化包。json文件

Npm i vant-S#通过Npm安装H5版本的vant

使用vant H5版本（全球推出）

主.js

从“Vant”导入Vant；

Vue.use（Vant）；

//登记面包车。请注意，这里没有引入van样式文件。在js中导入样式文件时，将报告错误。请在App.vue中导入

App.vue公司

<样式>

@导入“vant/lib/index.css”；

2.colorui UI库

我喜欢这个图书馆的酷风格效果

请在其官方网站上下载UI库文件

形象

请将下载的colorui文件夹复制到我们的项目根目录（请注意，这是CSS的当前版本，但它是H5项目，请不要复制wxss版本）

形象

然后在App中CSS文件可以导入vue的样式

形象

3、 uni-app中请求的简单封装

1.简单的包装

从“./state/index”导入存储。js’//vuex

//封装不带令牌的请求方法

const请求=（url、方法、数据）=>{

var promise=new promise（（resolve，reject）=>{

//提示

uni.show加载({

标题：“正在加载…”

})

//网络请求

单一请求({

网址：store.state.user。https://store.state.user。Http是公共接口地址

数据：数据，

方法：方法，

标题：{

},

成功：函数（res）{

uni.hideLoading（）

//服务器返回的数据

如果（res.statusCode==200）{

如果（res.data.code===0&&res.data.msg）{

uni.show吐司({

标题：res.data.msg，

icon：“成功”，

持续时间：2000

})

}否则如果（res.data.code！=0&&res.data.msg）{

uni.show吐司({

标题：res.data.msg，

图标：“无”，

持续时间：2000

});

}

解决（res）；

}其他{

//返回错误消息

拒绝（res.data）；

}

},

失败：函数（e）{

uni.hideLoading（）

uni.show吐司({

标题：“网络连接错误”，

icon:'加载'，

持续时间：2000

});

拒绝（'网络错误'）；

}

})

});

回报承诺；

}

//封装的请求包含令牌

const请求=（url，方法，数据=｛｝）=>{

var promise=new promise（（resolve，reject）=>{

//提示可以根据需要启动加载动画

//uni.show加载({

//标题：“正在加载…”

// })

//控制台。log（store.state.user.token）//从Vuex获取令牌信息以确定是否登录

如果（！store.state.user.token | | store.state user.token===空）{

uni.navigate收件人({

url:“/pages/login/login”

});

返回false；

}