uniapp开发项目——问题总结

前言

之前使用过uniapp开发微信小程序，但是没有遇到需要兼容H5页面的。因此在使用uniapp开发微信小程序和H5的过程中，遇到了好些问题。

1. button按钮存在黑色边框

使用button标签，在手机上查看存在黑色的边框，设置了border: none;也没有效果。

原因：uniapp的button按钮使用了伪元素实现边框

解决方法： 设置button标签的伪元素为display:none或者boder:none;

button:after{
   boder:none;
}
button:after{
   boder:none;
}
button:after{
   boder:none;
}

2. 配置反向代理，处理跨域

微信小程序没有跨域问题，如果当前小程序还没有配置服务器域名出现无法请求接口，只需要在微信开发工具勾选不校验合法域名，就可以请求到了

在本地开发环境中，H5页面在浏览器中调试，会出现跨域问题。如果后端不处理，前端就需要配置反向代理，处理跨域

a. 在manifest.json的源码视图中，找到h5的配置位置，配置proxy代理

注： “pathRewrite”是必要的，告诉连接要使用代理

b.在请求接口中使用

// '/api'就是manifest.json文件配置的devServer中的proxy
uni.request({
    url: '/api'+ '接口url',
    ...
})
// '/api'就是manifest.json文件配置的devServer中的proxy
uni.request({
    url: '/api'+ '接口url',
    ...
})
// '/api'就是manifest.json文件配置的devServer中的proxy
uni.request({
    url: '/api'+ '接口url',
    ...
})

c. 配置完，需要重启项目

3. 使用uni.uploadFile()API，上传图片文件

在微信小程序使用该API上传图片没问题，但是在H5页面实现图片上传，后台始终不能获取到上传的文件。

一开始使用uni.chooseImage()API实现从本地相册选择图片或使用相机拍照，成功之后可以返回图片的本地文件路径列表（tempFilePaths）和图片的本地文件列表（tempFiles，每一项是一个 File 对象）

tempFilePaths 在微信小程序中得到临时路径图片，而在浏览器中得到 blob 路径图片。微信小程序使用uni.uploadFile()上传该临时路径图片，可以成功上传，但是H5无法成功（浏览器中的传值方式会显示为payload，不是文件流file）

可能原因：

1. 使用 uni.uploadFile() 上传 blob 文件给服务端，后端无法获取到后缀名，进而上传失败。

b. uni.uploadFile()上传的文件格式不正确

解决方法：

在H5中上传tempFiles文件，而不是tempFilePaths，并更改uni.uploadFile()上传的格式

H5

微信小程序

4. 打包H5

问题：打包出来，部署到线上，页面空白，控制台preview中展示please enable javascript tocontinue

原因：uniapp的打包配置存在问题

解决方法：

a. web配置不选择路由模式、运行的基础路径也不填写（一开始都写了）

b. “pathRewrite”设置为空（不知道为啥，可能是不需要配置代理了，网站和接口是同一域名）

"proxy" : {
    "/api" : {
        "target" : "xxx",
        "changeOrigin" : true,
        "secure" : true,
        "pathRewrite" : {}
    }
}
"proxy" : {
    "/api" : {
        "target" : "xxx",
        "changeOrigin" : true,
        "secure" : true,
        "pathRewrite" : {}
    }
}
"proxy" : {
    "/api" : {
        "target" : "xxx",
        "changeOrigin" : true,
        "secure" : true,
        "pathRewrite" : {}
    }
}

注： 之前接口中的’/api’也需要取消