前言：最近公司准备开发一个Androidapp。由于原生开发成本高，又没有懂Android技术的人，所以决定采用混合开发的方式来实现。基于学习成本低，最终选择了可以快速上手的uni-app技术。这期间也是边开发边看文档，痛并快乐着。第一次尝试写博客，试图用最简单的文字记录一个项目的开发过程，希望能坚持下去！其实翻看uni-app的开发文档不难发现，它的很多语法和vue很像，比如数组遍历，条件渲染等，只是vue的[v]变了到[单]。同时指的是微信小程序开发的文档，很多语法和小程序类似，比如小程序的生命周期、路由跳转、传值等。所以本文是基于uni-app的，不过大家可以参考Vue和微信小程序。1.测试环境和正式环境uni-app可以通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境。我们可以根据这个条件动态切换连接到测试服务器还是生产服务器.NODE\_ENV==='production'){console.log('productionenvironment')}二、请求封装1.在项目中新建baseconfig.js文件存放项目的接口地址，添加domain测试接口的名称和官方接口的域名根据不同的环境，然后使用exportdefault命令模块指定变量的输出：varbaseconfig={};//测试地址if(process.env.NODE_ENV==='development'){baseconfig={server:'http://test1/api/',pdcom:"http://test2/api/",}//正式地址}elseif(process.env.NODE_ENV==='production'){/baseconfig={server:'http://formal/api/',pdcom:"http://formal/api/",}}导出默认的基本配置；2.新建index.js，引用公有域名文件importbaseconfigfrom"../baseconfig.js"3.Ajax封装//写在index.js文件中consthttpClient={request:function(method,url,data,contenType){letp={XToken:'',XUser:'',ContentType:'application/json'//默认值};//获取连接token本地存储的token值---该字段视项目情况而定varXToken=uni.getStorageSync('Token');如果（XToken）{p.XToken=XToken;}//通过接口获取本地存储的UserUserValue---这个字段取决于项目varXUser=uni.getStorageSync('User');如果(XUser){p.XUser=XUser;}if(contenType){p.ContentType=contenType;}//Header内部信息封装varherders={'X-Token':p.XToken,'X-User':p.XUser,'Content-Type':p.ContentType};returnnewPromise((resolve,reject)=>{//添加提示框，可以提高交互性，防止用户在数据加载前点击，导致报错uni.showLoading({title:'Loading',mask:true});uni.request({url:url,//接口地址header:herders,data:data,//传入参数method:method,//请求方法success:function(res){//关闭提示框uni.hideLoading();if(res.statusCode!==200){//请求失败显示错误信息uni.showToast({title:res.statusCode.toString(),duration:1000,icon:"none"})返回；}//请求令牌无效或错误，直接返回登录页面，让用户重新登录if(!res.data.meta.success&&res.data.meta.message=="令牌验证失败异常:未登录，或令牌错误！null"||res.data.meta.message=='令牌验证失败异常：令牌'+'['+XToken+']'+''+'无效'){uni.showToast({title:'登录过期请重新登录',duration:1000,icon:"none"})setTimeout(function(){uni.reLaunch({url:"../../../pages/login/login/login"})},1500)}resolve(res.data)//结果返回成功},fail:function(err){uni.hideLoading()reject(err)//失败结果}})});},//普通请求方法封装Get:function(url,data,type){letallurl=this.getUrl(type,url);returnthis.request('GET',allurl,data);},Post:function(url,data,type){让allurl=this.getUrl(type,url);returnthis.request('POST',allurl,data);},Put:function(url,data,type){让allurl=this.getUrl(type,url);returnthis.request('PUT',allurl,data);},Patch:function(url,data,type){让allurl=this.getUrl(type,url);returnthis.request('PATCH',allurl,data);},Delete:function(url,data,type){让allurl=this.getUrl(type,url);returnthis.request('DELETE',allurl,data);},//请求页面时，会传递一个type，根据type值调用不同域名的地址。这是一个示例getUrl：function(type,url){letallurl=""if(type==1){allurl=baseconfig.server}elseif(type==2){allurl=baseconfig.pdcom}returnallurl+网址}};//导出方法模块。出口=httpClent4.新建一个comment.js文件存放对外暴露的文件。这个方法也可以优化，后面处理importhttpClientfrom'./index.js'//comment.js文件exportfunctionget(url,params,type){returnhttpClient.Get(url,params,type);}exportfunctionpost(url,params,type){returnhttpClient.Post(url,params,type);}exportfunctionput(url,params,type){returnhttpClient.Put(url,params,type);}exportfunctionpatch(url,params,type){returnhttpClient.Patch(url,params,type);}exportfunctiondel(url,params,type){returnhttpClient.Delete(url,params,type);}5.将方法挂载到unp-app自带的main.js文件中的global，成为public方法import{get,post,put,patch,del}from'@/api/common.js'Vue.prototype.get=getVue.prototype.post=postVue.prototype.put=putVue.prototype.patch=patchVue.prototype.del=del6,某页调用methods:{//在uni-app的methods中添加请求接口的getData()方法{varthat=this;this.get("search/goods/editList",{//需要请求的接口pageNum:1,//参数pageSize:10,//参数},3).then(res=>{//3表示类型，反馈到请求包中，根据不同的类型调用不同的域名if(res.meta.success){//请求操作成功}else{//请求操作失败}})},},
