在使用uniap开发h5项目(主要是信息的提交)遇到不少问题,进行以下总结:
1.项目尽量简洁,去掉不必要的插件,js等,注意模块的懒加载:
本次是项目是将h5链接放入ios的app中进行调用
跨域问题,后端配置请求头进行处理。
图片跨域,后端配置后,在js图片对象添加 image.crossOrigin = 'anonymous'
2.图片上传遇到多个bug
后端需要使用formdata进行上传处理,uniapp没有formdata的数据类型。额外引入 jquery进行formdata上传文件。
在uniapp中无法使用input的file元素,所以要使用js进行创建元素。
例如创建选择照片元素:
var input_image = document.createElement('input')
// 创建选择照片元素
input_image.type = 'file'
input_image.accept = "image/gif,image/jpeg,image/jpg,image/png,image/svg"
//limit和unlimit是单张和多张选择
if(this.img_modal=='unlimit'){
input_image.multiple = 'multiple'
}
input_image.onchange = (file) => {
this.chooseImage(index,file.target.files)
}
this.$refs.input_image.$el.appendChild(input_image)
3.图片调用
当获取到图片的file对象后,再获取图片的result就是转成base64后的图片地址。这里注意,图片选择时应做大小限制,太大的图片转成base64后二进制文件长达十几兆,会造成内存过大,页面崩溃等问题。
4.弱网环境下会出现跳转速度过慢,图片回显过慢等问题。
5.发版的配置
注意使用树摇进行剪裁调不必要的插件,启用history和https
我们后端使用的是nginx,需注意:
404配置
500配置,我们出现最后一次路由转发时少了/5/,一直刷新报500,要注意
gzip文件压缩传输