1. 安卓端jsBridge上传的图片不能正常显示:base64需解码
部分安卓机选择图片后直接传给后端,后端不能正常解析,返给前端的url不能正常展示图片。原因是返回的base64字符串已被编码,经 decodeURL(base64) 处理后在传个后端,才可正常解析显示图片。
注:iOS和安卓统一这样解码都能正常显示
2. 获取App版本号
iOS的scheme配置【scheme: ‘foodiecn://‘】时,才能在real版App上获取到版本号,同理,beta版需要配置对应的【scheme: ‘foodiecnb://‘】,也就是需要一一对应。
注:Foodie iOS端与咔叽一样。kaji 和 Foodie 安卓端不对应也可以获取到,但严格建议对应好配置。
3. 后台系统输入文案有换行,H5展示没有换行
使用pre标签就可以,最好也加一下encodeURIComponent(),这样是为了避免“+”符号等不能再页面展示问题。
4. 打包后仍有es6语法导致报错
打包后仍有es6语法,比如‘const’,导致 iPhone 6s plus 系统9.3.1 白屏报错。
原因:引用的第三方插件有es6语法,在node_modules中没有被编译。
解决方法1: 在vue.config.js中配置transpileDependencies: [‘vue-textarea-autosize’],数组中填写有es6语法的插件。但不推荐此方法,因为编译很耗费性能。
解决方法2:把这个包移出来放到src下,这样编译的时候就会被编译了。推荐!!!
5. 在url中向后端传日期有“+”报错
例如:let url = “http://foodie-beta.kajicam.com/fs/console/v3/content/list?pageNum=1&pageSize=12&startDate=2020-03-30+00:00:00&endDate=2020-03-31+00:00:00&orderBy=1“
encodeURIComponent(url)
说明:url当作参数传递的时候,如参数出现空格这样的特殊字段,后台只可以读取到空格前的内容,后面内容丢失,造成数据读取失败,但是如果用encodeURIComponent()包裹一下,那会将这些特殊字符进行转义,这样后台就可以成功读取了…
6. rem 产生的小数像素问题
解决方案1. icon背景图四周加一圈透明边距
解决方案2. icon背景图用一个盒子包起来,加一个内边距
参考资料:https://www.cnblogs.com/susanws/p/5647024.html
7. 安卓唤起foodie拍照相机黑屏
src/bag/bridge/param/EventCameraParam.js文件中,
constructor({type = ‘’, cameraPosition = ‘0’,
cameraPosition默认值改成’’
8. 部分苹果手机(iPhone 6s/8s plus)css3流星动画在safari上会卡住
在safari浏览器上初次访问H5首页流星动画有时会正常,刷新页面一定会卡住,审查元素发现先去掉animation属性,在添加上动画就正常了,或者直接访问本地代码,注释掉animation保存,然后在打开注释动画就会正常。在电脑的safari浏览器上模拟手机访问H5也是上述现象。
解决:页面初始化时animation使用默认值,页面mounted后2s加上正常的animation流星动画。页面就正常了。
PS:参考项目崽崽明星打榜活动。
9. @b612-cli模板中配置autoprefixer插件
项目中配置autoprefixer插件,编译和打包时自动添加css3前缀。发现这个模板中不需要安装autoprefixer插件,直接配置就可以,配置文件如下:
PS:参考项目崽崽明星打榜活动
const px2rem = require(‘postcss-px2rem’);
const autoprefixer = require(‘autoprefixer’);
const postcss = px2rem({
remUnit: 75
});
css: {
loaderOptions: {
postcss: {
plugins: [
postcss,
autoprefixer({
browsers: [
‘last 10 Chrome versions’,
‘last 5 Firefox versions’,
‘Safari >= 6’,
‘ie> 8’
]
})
]
}
}
},
9. foodie漫画美食版本号(如3.10.2两位数的)判断不准确修改
原来项目中比较版本号函数,有问题
function compareVersion (a, b) {
for (let i in b) {
let cur = parseInt(b[i], 10) || 0
let limit = parseInt(a[i], 10) || 0
if (cur > limit) {
return true
} else if (cur < limit) {
return false
}
}
return false
}
修改后
/*
版本比较,b>a时才返回true
@param a 基准版本号
@param b 要比较的版本号
@returns {boolean} 反返回b是否大于a
/
function compareVersion (a, b) {
const versionAs = a.split(‘.’)
const versionBs = b.split(‘.’)
const versions = versionAs.length>=versionBs.length?versionAs:versionBs
for (let i = 0; i < versions.length; i++) {
let cur = +versionBs[i] || 0
let limit = +versionAs[i] || 0
if (cur > limit) {
return true
} else if (cur < limit) {
return false
}
}
return false
}