本项目纯开源免费，产品资料来源于网络。如有侵权请联系作者，我会及时删除！前段时间看到一个大佬写叮咚买菜，很不错，于是在家想了想，自己做了一个版本，记录一些uni-app开发的东西。纯属个人总结。如有不妥，请指教！功能不是很全面。以后我会继续更新成一个系列。预览：在线预览地址：http://dingdong.nodebook.top/GitHub：https://github.com/cgq001/din...管理后台：http://dingdong-admin.nodeboo...如果你觉得没关系，给我一个开始怎么样？我会继续努力完善项目，力争做到前后台完整开源1.首页2.分类3.加入购物车4.收货地址5.我的2.项目介绍1.vantUi库在uni-app中使用的是H5版本的Ui库。本站使用vant的H5版本（请使用vant的小程序版本打包小程序和APP）UI库npminit#初始化package.json文件npmivant-S#通过npm安装vant的H5版本vantH5版本使用（全局import)main.jsimportVantfrom'vant';vue.use(Vant);//注册vant，注意这里没有引入vant样式文件，在main.js中导入样式文件会报错，请引入App.vue2.App.vue中的coloruiUI库我个人比较喜欢这个库的炫酷风格效果，欢迎添加官网：https://www.color-ui.com/到下载UI库文件，请将下载的colorui文件夹复制到我们的项目根目录下（注意是当前版本的CSS，犹豫是H5项目，请不要复制wxss版本）然后导入css文件在App.vue的风格。三、uni-app中请求的简单封装1.简单封装importstorefrom'./state/index.js'//vuex//封装请求方法Nonetokenconstrequest=(url,method,data)=>{var承诺=新Promise((resolve,reject)=>{//提示uni.showLoading({title:'Loading...'})//网络请求uni.request({url:store.state.user.http+url,//store.state.user.http为公共接口地址data:data,method:method,header:{},success:function(res){uni.hideLoading()//服务器返回数据if(res.statusCode==200){if(res.data.code===0&&res.data.msg){uni.showToast({title:res.data.msg,icon:'success',duration:2000})}elseif(res.data.code!=0&&res.data.msg){uni.showToast({title:res.data.msg,icon:'none',持续时间：2000});}解决（res）；}else{//返回错误信息reject(res.data);}},fail:function(e){uni.hideLoading()uni.showToast({title:'网络连接错误',icon:'loading',duration:2000});reject('网络错误');}})});returnpromise;}//用token封装请求constrequests=(url,method,data={})=>{varpromise=newPromise((resolve,reject)=>{//提醒加载动画可以启动为需要//uni.showLoading({//title:'Loading...'//})//console.log(store.state.user.token)//这里是从vuex中获取token信息，判断是否登录if(!store.state.user.token||store.state.user.token===null){uni.navigateTo({网址：'/页面/登录/登录'}）；返回假；}//网络请求uni.request({url:store.state.user.http+url,//store.state.user.http为公共接口Addressdata:data,header:{"Authorization":store.state.user.token//'Bearer'+},method:method,success:function(res){uni.hideLoading()//服务器返回数据if(res.statusCode==200){if(res.data.code===400){uni.navigateTo({url:'/pages/login/login'});returnfalse;}//判断和msg提示文字响应提示if(res.data.code===0&&res.data.msg){uni.showToast({title:res.data.msg,icon:'success',duration:2000})}elseif(res.data.code!=0&&res.data.msg){uni.showToast({title:res.data.msg,icon:'none',持续时间：2000});}解决（res）；}else{console.log("requesterror")//返回错误信息reject(res.data);}},fail:function(e){uni.hideLoading()uni.showToast({title:'网络连接错误',icon:'loading',duration:2000});reject('网络错误');}})});返回承诺；}//这里导出两个请求，一个包含Token，一个包含token请选择使用module.exports={request:request,requests:requests}2.MountimportVuefrom'vue'importAppfrom'./App'importstorefrom'./static/state/index.js'Vue.config.productionTip=false//引入封装的请求文件consthttps=require('./static/http.js')//挂载到Vue实例//无token请求Vue.prototype.http=https.request//带有令牌的请求Vue.prototype.https=https.requestsimportVantfrom'vant';Vue.use(Vant);App.mpType='app'constapp=newVue({store,...App})app.$mount()3.使用//this.https表示有Token的请求//this.http表示没有token的请求this.https('index/addOrder','post',src)//(请求地址,请求类型,数据).then(res=>{}).catch(err=>{})
