uni-app开发app之三分享一下实际项目开发中遇到的坑

因为是第一次使用uni-app来开发app，所以在实际项目中还是碰到了很多问题，虽然现在还有部分问题依然存在，但是大部分的坑，经过自己的不懈努力还是基本解决了的。今天先说说几个已经解决的问题吧。

（一）区分开发环境和线上环境
以前使用vue-cli的时候基本都是已经配置好环境变量的，本人因为有些懒，也没有深入去了解webpack的配置环境变量的机制。只知道在dev和build里面配置好变量就ok了。现在用了uni-app后老大突然提了需求需要区分开发环境和线上环境。毕竟这是一个基本需求，不好拒绝。我便开始仔细开始看uni-app的文档，最后找到了区分运行环境的方法，通过process.env.NODE_ENV可以判断运行环境。其中包括两种（开发环境和生产环境），运行编译出来的代码是开发环境，发行编译出来的代码是生产环境。然后可以在app.vue中的onLanuch钩子函数中进行判断，如果是开发环境就替换成测试服务器的域名如果是生产环境就替换成线上服务器的域名。然后把url通过setStorage存在本地，最后在其他需要调用接口的页面通过getStorage获取。这也算是我自己想出来的一种方法吧，虽然有点繁琐的解决了需求，也确实有点low，不过还是留在以后慢慢完善吧，如果各位大佬有什么更好的办法，欢迎您前来指点一二，在下感激不尽！

（二）app自动登录

现在的app基本都会有自动登录功能，老大爷提了这样的需求，因为本人没有app开发经验，所以还是苦思冥想了一会儿，最后想到一个解决方案，在用户登录成功以后，把用户的登录信息存在app本地，然后在用户首次加载app的时候去后台判断用户的登录状态，如果用户是未登录状态，便调取用户在本地的登录信息，自动去帮助用户登录。

（三）方法封装

我相信做前端的你们，对于封装应该并不陌生。肯定都会或多或少的封装过自己的方法组件，接下来我要说的就是在uni-app中封装一些基本方法。首先建一个js文件，里面用来存放封装的方法。在方法完成后通过export default把方法导出，在其他需要调用方法的页面直接import from，这样引入就行啦，接下来上代码

const formatResponse = function(response) {

        const status = response.statusCode;

        const data = response.data;

        const msg = data.msg;

        if (status === 200 && msg.code === 0) {

          return data.data;

        } else {

          if (status !== 200) {

  uni.showToast({

                title: '网络异常:' + status

            });

          } else {

            if (msg.code === 50401) {

  var user = uni.getStorageSync('user');

  var phone = user.phone;

  var pass = user.password;

  console.log(phone)

  console.log(pass)

  if(phone && pass){

  uni.request({

  url:  '......',

  method: 'POST',

  data: {

name: phone,

password: pass

},

  success: function(res) {

console.log(JSON.stringify(res))

formatResponse(res)

},

  fail: function(res) {

console.log(JSON.stringify(res))

},

  });

  }else {

  uni.showModal({

  title: '提示',

  content: '您还未登录，请先登录',

  showCancel: true,

  success: function(res) {

  if (res.confirm) {

  uni.navigateTo({

  url: '/pages/login/login'

  });

  }

  }

  });

  }

              return;

            }

uni.showToast({

    title: msg.info

});

          }

        }

      }

export default {

  formatResponse

}

这是我自己封装的一个处理response的通用方法，当然还有很多方法可以封装，我就不一一列举了。

（四）打包小程序

uni-app支持打包小程序，所以老大让我再把我们做的app打包成小程序。可是遇到了很多阻碍。

（1）首先因为我们的小程序用到了一些用web-view嵌入的H5页面，在app中web-view是什么问题的，可是在小程序中如果需要使用web-view嵌入H5的话，src的域名必须配置在微信后台的安全域名中，最后解决办法是通过nginx服务器做的代理解决的问题。

（2）分包预加载，因为之前没有考虑到小程序的问题，所以所有的资源都是放在一个pages文件夹里面的，可是这样的后果是在打包成小程序上传的时候发生了问题，小程序上传的时候要求最大不超过2M，可是我们的app打包成小程序以后有大概7M左右。忽然想起来小程序支持分包预加载功能，一个小程序最多可以打包成1个主包3个子包。最后我把整个项目分成4个包使用分包预加载解决了这个问题。

今天先讲到这里吧，可能有一些问题讲的不是太清楚，如果大家有与到类似的问题，可以在下面进行评论，我会第一时间进行回复的。