uni app开发App的第三部分分享了实际项目开发中遇到的陷阱
app开发
APP开发
浏览：1385 次
因为这是第一次使用uni app开发app，所以我们在实际项目中仍然会遇到很多问题。尽管一些问题仍然存在，但通过我们的不懈努力，大多数陷阱已基本解决。今天，我们来谈谈已经解决的一些问题。
（1） 区分开发环境和在线环境
过去，在使用vue-cli时，基本上配置了环境变量。我很懒，对webpack中配置环境变量的机制没有深入了解。可以在开发和构建中配置变量。现在在使用uni app之后，老板突然提出需要区分开发环境和在线环境。毕竟，这是一项基本要求，很难拒绝。我开始仔细查看uni-app文档，最终找到了一种通过流程区分运行环境的方法。env NODE_ env可以判断操作环境。有两种类型（开发环境和生产环境）。运行编译的代码是开发环境，发布编译的代码则是生产环境。然后，您可以单击App。vue中的onLanuch钩子功能确定测试服务器的域名（如果是开发环境）将被替换，如果是生产环境，则在线服务器的域名将被替换。然后通过setStorage在本地保存url，最后通过其他需要调用接口的页面上的getStorage获取。这也是我自己想出的方法。虽然解决需求有点繁琐，但也有点低，但我想留在未来，慢慢改进。如果你们有更好的方法，请过来给我一些建议。非常感谢你！
（2） App自动登录
如今的App基本上都有自动登录功能。老人提出了这样的要求。因为他没有App开发经验，他苦思冥想了一段时间，终于想出了一个解决方案。用户登录成功后，将用户的登录信息保存在app本地，然后在用户首次加载app时前往后台判断用户的登录状态。如果用户未登录，将调用用户的本地登录信息以自动帮助用户登录。
（3） 方法封装
我相信作为前端用户的您应该熟悉封装。他们必须或多或少封装自己的方法组件。接下来我想说的是在uni-app中封装一些基本方法。首先，创建一个js文件来存储封装方法。方法完成后，通过导出默认值导出该方法，并直接从需要调用该方法的其他页面导入，以便可以导入该方法。接下来，代码
const formatResponse=函数（响应）{
常量状态=response.statusCode；
常量数据=响应.data；
常量消息=数据.msg；
如果（状态===200&&msg.code===0）{
返回data.data；
}其他{
如果（状态！==200）{
uni.show吐司({
标题：“网络异常：”+状态
});
}其他{
如果（消息代码===50401）{
var user=uni.getStorageSync（“用户”）；
var phone=用户电话；
var pass=用户密码；
console.log（电话）
console.log（传递）
if（电话和通行证）{
单一请求({
网址：“……”，
方法：“POST”，
数据：{
名称：电话，
密码：pass
},
成功：函数（res）{
console.log（JSON.stringify（res））
格式响应（res）
},
失败：函数（res）{
console.log（JSON.stringify（res））
},
});
}其他{
uni.show模式({
标题：'提示'，
内容：“您尚未登录，请先登录”，
show取消：true，
成功：函数（res）{
如果（res.confirm）{
uni.navigate收件人({
url:“/pages/login/login”
});
}
}
});
}
回来
}
uni.show吐司({
标题：msg.info
});
}
}
}
导出默认值{
格式响应
}
这是我自己封装的处理响应的一般方法。当然，还有许多其他方法可以封装。我不会全部列出。
（4） 打包小程序
uni app支持打包小程序，所以老板让我把我们的app打包成小程序。然而，他们遇到了许多障碍。
（1） 首先，因为我们的小程序使用了一些嵌入web视图的H5页面，所以App中的web视图有什么问题？但是，如果我们需要使用web视图在小程序中嵌入H5，则必须在微信后台的安全域名中配置src的域名。最后，解决方案是通过nginx服务器的代理来解决问题。
（2） 分包预加载，因为以前没有考虑小程序的问题，所以所有资源都放在一个页面文件夹中。然而，结果是小程序打包和上传时出现了问题。上载小程序时，最大要求
