工作问题记录

1、用uniapp开发小程序时，遇到一个问题，从其它页面拿到的数据有的是正确的有的是错误的。
每次在onload里其实都是使用getCurrentPages()方法重新获取其它页面的数据的，但由于这个数据是放在一个对象里的，在那个页面有些操作是会改变这个对象里的某些数据的，而我是直接赋值给一个变量的，因此是复制（不是浅拷贝也不是深拷贝），导致它们是会互相影响的，造成有些数据是错误的，因此解决这个问题就是在赋值的时候使用深拷贝。
总结：当其它页面的操作会改变某个对象里的数据时，最好使用深拷贝传值。

2、页面样式错误，表格的数据会挤到一起，无法正常显示，滚动条有时侯出现有时候不出现。
本来这个表格正常状态是会出现滚动条的，但由于给table加了个宽度，width:100%，导致滚动条无法出现，数据也挤到一起了，滚动条有时候会出现可能是渲染顺序的原因，在table上加个行内样式：width:auto;overflow-x:scroll;即可。
总结：排查这种样式问题时，首先要考虑导致这个问题的原因是什么，然后再打开控制台，一个样式一个样式去排查。

3、flex布局中子元素设置了宽度，但宽度自适应（变小）的问题：
有一种情况：在一个大盒子中，给这个大盒子设置了display:flex属性，左边我设置一个子元素固定宽度，右边设置自适应占满剩余空间，但有时候会发现左边固定元素的宽度竟然失效了，被右边的元素挤占空间了，原因是少设置了一些flex属性样式。

父元素设置完 display:flex 属性后；子元素设置固定宽度：这里加上另外一个属性可防止宽度变化，就是flex-grow;此属性为是否自动增长空间，flex-shrink;此属性为是否自动缩小空间，默认值都是1，即自动增长/缩小，设置为0时，不会自动增长/缩小。
注意：是给宽度失效的子元素添加的属性，添加在父元素上是无效的

flex-grow:0;
flex-shrink:0;

4、纯javascript实现获取第二天的时间：

const date = new Date();
const timeStr = date.toTimeString().substring(0, 8); //获取当前时间的时分秒
const secondDay = date.setTime(date.getTime() + 24 * 60 * 60 * 1000);//获取第二天时间戳
const secondDate = new Date(secondDay);//将时间戳转换为Date类型
const sendPlanTime = `${secondDate.getFullYear()}-${secondDate.getMonth() + 1}-${secondDate.getDate()} ${timeStr}`;//第二天的时间，格式为： YYYY-MM-DD hh:mm:ss

5、用uniapp开发时，如果是在app端打开的话，如果在css中使用了opacity属性的话，不可以使用opacity: 50%的写法，使用百分比写法的话会导致标签内的文字等信息不显示，改为opacity: 0.5的写法就可以正常显示。

6、用uniapp开发时，如果要在返回上一个页面成功时，刷新页面数据，可以使用以下写法：

const pages = getCurrentPages();
const beforePage = pages[pages.length - 2];
uni.navigateBack({
	delta: 1,
	success: () => beforePage.getCcpaymentOrderInfoRecordAppBO()
	//getCcpaymentOrderInfoRecordAppBO为请求后台接口方法,重新请求页面数据
});

但以上方法只在h5页面时才有效，如果是在app端打开的话，返回上一页时，beforePage下是获取不到这个getCcpaymentOrderInfoRecordAppBO方法的，因此要采用以下写法：

const pages = getCurrentPages();
const beforePage = pages[pages.length - 2];
uni.navigateBack({
	delta: 1,
	success: () => beforePage.$vm.getCcpaymentOrderInfoRecordAppBO()
	//getCcpaymentOrderInfoRecordAppBO为请求后台接口方法,重新请求页面数据
});

经测试，以上写法在h5和app端均有效。

7、在写css的伪元素时，需要给它添加content: ’ '属性，这个伪元素才会生效。

.order-detail::after {
	        content: '';
			display: block;
			width: 100%;
			padding-bottom: 176rpx;
			background-color: transparent;
		}

8、使用uniapp + uView 的upload组件开发上传文件功能时，在h5端功能正常，但在app端打开时，无法上传文件，不调上传文件的接口也不报错，就是停留在当前页面，什么也不做。后来认真地看了下代码，发现h5和app的区别是h5 有将token放在请求头里而app端没有，加上token后，app端也能正常上传文件了。
uni-app离线打包，在安卓app端 uni.chooseImage无法使用的问题
后来在安卓app端又出现了拍照无法调起摄像头的问题(ios和h5是能正常调起摄像头的)，
首先打开项目的 manifest.json -> 找到APP权限配置：

将以下权限勾选上（必须勾选）：

以下权限是可选的：

我勾选完之后，测试了一下发现安卓app还是无法调起摄像头。

看了一下uView 的upload组件的源码，发现它是使用uni.chooseImage()方法去调摄像头的。在安卓打包时，叫安卓开发者在Manifest.xml文件中，加入以下代码：

<provider
    android:name="io.dcloud.common.util.DCloud_FileProvider"
    android:authorities="${apk.applicationId}.dc.fileprovider"
    android:exported="false"
    android:grantUriPermissions="true">
    <meta-data
        android:name="android.support.FILE_PROVIDER_PATHS"
        android:resource="@xml/dcloud_file_provider" />
</provider>

注意：${apk.applicationId} 必须替换成当前应用的包名
加上后我安卓app端就可以调起摄像头了，功能都能正常使用。

后来，我又遇到了同样的问题，但这次app原生开发不是我们公司的，无法叫他们修改代码了，只能靠我自己改代码，这次可把我难住了，我查资料查了好久都没解决这个问题，没办法只能去求助大佬了，大佬虽然没能直截了当地告诉我答案，但也给了我一个思路，那就是：
uni.chooseImage有个sourceType参数，我原本是写了 [‘album’, ‘camera’]，大佬的意思是一次传一个，不要两个都传进去。不过这样也很麻烦，这代表我得手撸个upload组件。。。。首先我就去试了一下，发现传[‘camera’]的时候是可以成功调起摄像头的（ios和android都正常），而传album的时候，ios又弹出弹窗让我选择拍照还是其它方式，android又直接进去文件系统了。
最后我的解决方式是： 首先手撸个upload组件是跑不掉了（当时没想到可以去uniapp社区找组件，可恶，又浪费了大把时间），细节就是当用户点击上传图片按钮的时候，先判断当前系统是iOS还是Android（uniapp有提供对应的方法），是iOS的话就直接传[‘album’, ‘camera’]就可以，无需做其他处理；是Android的话，得弹出个弹窗让用户选择上传方式，我分为：拍照和其他方式，当用户点击拍照时，传[‘camera’]，当用户点击其他方式时，传[‘album’]。
至于为什么安卓传[‘album’, ‘camera’]的时候没有弹窗让用户选择上传方式，直接进文件系统，我倒没有深究，感觉还是原生的兼容性问题吧，有兴趣的开发者可以去深究一下哈。

再后来，关于拍照的功能我又遇到了问题（这时候就不得不感叹uniapp的坑可真多），每次拍照成功后，页面会被刷新，导致用户已填写的信息丢失了，这是因为uni.chooseImage方法会触发入口文件app.vue中的onLaunch、onShow方法，然后再触发uni.chooseImage所在的页面的onHide、onShow方法，你如果在这四个方法中某一个写了有关跳转页面的逻辑的话，他就会触发刷新跳转。解决方法是在全局变量中定义一个变量如：takePhotoFlag = false，然后在以上四个方法中有跳转页面逻辑的地方加上以下代码

onLaunch: function() {
			if(getApp().globalData.takePhotoFlag) {
				getApp().globalData.takePhotoFlag = false;
				return;
			}
			this.getSsoInfo();//有页面跳转逻辑的代码
		},

最后在你需要调用 chooseImage 之前，将这个全局开关变量设置为 true。如：getApp().globalData.takePhotoFlag = true;uni.chooseImage()

还有一个问题就是拍多张照片，上传成功后，在工单详情页面会出现图片重复问题（只有拍照才会有这个问题，从相册选择图片不会有这个问题）。原本我是等用户点击确定按钮后才去上传照片的，出现这个问题后我就把他改为只要用户选择了图片或者拍照成功确定后就把图片上传，这样修改后就没有图片重复的问题了，我觉得会出现这个图片重复的问题还是因为uni.chooseImage方法底层的缘故，每次拍照成功后它都会返回图片的临时路径，第二次的临时路径会把第一次的临时路径修改掉，导致我存储的路径虽然还是两个路径，但其实他们是一样的（这个临时路径可能是个引用）。

9、用uniapp开发时，如果是在iOS app端打开的话，页面会出现可以上下左右滑动的问题（安卓端没有这种问题），使用以下方法即可解决这一问题：
进入pages.josn文件找到想要禁止回弹（上下滑动）的页面，在对应的style中添加以下代码：

"app-plus": {
	"bounce":"none" // 将回弹属性关掉 
}

例如：

		{
		    "path" : "pages/XXXX/XXXXX",
		    "style": {
				"navigationStyle": "custom",
				"app-plus":{
				    "bounce":"none" // 将回弹属性关掉 
				}
			}
		}

进入对应的页面，在页面的最外层标签上添加以下样式（禁止左右滑动）：

width: 100%;
overflow-x: hidden;

10、用uniapp开发时，如果是需要支持多端使用的项目的话，在获取某一时间的时间戳时，要使用兼容性写法，否则可能会导致错误，比如日期的分隔符使用 “-” 的话在ios端会失效，如下：

// 获取时间戳
		getTimestamp() {
			// yyyy-mm-dd为安卓写法，不支持iOS，需要使用"/"分隔，才能二者兼容
			let time = this.year + '/' + this.month + '/' + this.day + ' ' + this.hour + ':' + this.minute + ':' + this.second;
			return new Date(time).getTime() / 1000;
		}