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个包使用分包预加载解决了这个问题。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容

  • 网络编程 一.楔子 你现在已经学会了写python代码,假如你写了两个python文件a.py和b.py,分别去运...
    go以恒阅读 1,896评论 0 6
  • 上一篇我们讲了uni-app的各种优缺点,接下来我们要讲一下uni-app的开发流程和一些常用组件。此篇文章为un...
    任建堃阅读 19,141评论 0 28
  • 新的一天又开始了,感赏女儿每天都按时起床去学校,感赏女儿和我分享学习上的事,告诉我学习上的一些担忧,也愉快接受妈妈...
    我爱天使2001阅读 164评论 0 4
  • 临近元旦,年味儿渐1浓。12月,14日上午辽宁某中学班主任朱老师死于讲桌旁。 教室是教书育人的地方,是浇灌祖国花朵...
    风吹乱发丝阅读 621评论 1 2
  • 大清早刚在办公室泡上杯热茶,就听办公室门外的吵嚷声徐徐袭来。 门是被两个撕扯着的女人撞开的,看是菜区主管刘艳华和双...
    八手阅读 197评论 1 0