【开发问题记录】uni bug、踩坑

1. uni样式穿透后不生效

样式穿透后，有可能 微信小程序 端 不显示效果，但是 h5 可能就会显示

解决方案
在methods同级下设置：

options: { styleIsolation: 'shared' },

2. 动态设置 style 的背景图片 属性

		<!--backgroundImage 不能用 - ，要换成驼峰命名法  -->
		<view class="songPlay-bg" :style="{backgroundImage:'url(' + bgPic + ')'}">

3. 控制台报错 length 未定义

当遇到这个 length 未定义的时候，

• 查找 具体的文件夹下，template 标签里面所有的 用到 length 的地方 看一下在第一次渲染的时候 .length 前面的变量是否有值

<template>
	<view class="">
		<view class="pinglun" v-if="comments.length!== 0">
			<!--省略Xxxxxxxxxxxxxxxxxxxxxxxx -->		
			<uni-popup type='bottom' ref="popup" :mask-click="true" class="uni-popup">
				<!-- 关闭显示层 -->
				<view>
					<view class="uni-popup-top">
						<i class="iconfont icon-cuo" @click="close()"></i>
<!- -->
						<text >回复({{subPl.huifu.length}})</text>
					</view>
					<show-pl :comments="subPl" />
				</view>
			</uni-popup>
		</view>
	</view>
</template>

注意：上面的 subPl.huifu.length，当页面第一次 渲染的时候 subpl 还是空，所以会报错

在 temlate 标签上用 length 属性，一定要先检查前面的变量 是不是数组，是不是有值

4. 使用 uni-forms 标签，自定义校验规则，wx小程序端不生效，h5生效

这是官网的 api 介绍官网api ，，但是 在 onReady生命周期函数里面，调用setRules方法，依旧不生效

解决办法
直接把 return 里面定义的 relus 规则属性和值，一起剪切到 setRules 函数的参数位置，只留下值即可，键删除掉，

		onReady() {
			// 需要在onReady中设置规则

			this.$refs.phoneForm.setRules( {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号'
						}, {
							maxLength: 11,
							minLength: 11,
							errorMessage: '手机号位数错误~'
						}, {
							required: true,
							validateFunction: function(rule, value, data, callback) {
								console.log('value',value);
								if (value.length < 20) {
									callback('请至少勾选两个兴趣爱好')
								}
								return true
							}
						}]
					},
					password: {
						rules: [{
							required: true,
							validateFunction: function(rule, value, data, callback) {
								// console.log(value);
								// if (/^1[3-9]\d{9}$/.test(value)) {
								// 	return true
								// } else {
								// 	callback('请输入正确的手机号')
								// 	// return false
								// }
								callback('请输入正确的密码')
							}
						}]
					}
				})
			console.log(this.$refs.phoneForm);
		},

5. 二维码登录 模块 uni框架 开发网易云(使用网易云api)app

按照网易云接口的官方文档是 先 二维码key生成接口 =》 二维码生成接口 =》 二维码检测扫码状态接口 =》 获取账号信息， 这是一套完整的 网易云音乐api 二维码登录的方式

注意：

• 网易云接口的 获取账号信息（例子是 : /user/account） 这个接口，其实是要跟一个 token为键，值是二维码检测扫码状态接口 返回的数据中，有一个 叫cookie 的 值，里面有 __csrf ，它的等号后面就是 token
• 在 请求实例中 开启 withCredentials:true
• 如果用 uni 开发，需要 给 获取账号信息 接口 单独设置一个 请求头的 cookie ，因为 微信小程序端不会自带 cookie

这个表格是 uni 官方的request 的文档的一部分

参数名	类型	说明	平台差异说明
header	object	设置请求的 header，header 中不能设置 Referer。	App、H5端会自动带上cookie，且H5端不可手动修改

实例代码，代码比较烂。。

1. 先给请求设置 withCredentials:true

					uni.$request('get', '/login/qr/key', {
						timestamp: Date.now()
					}).then((res) => {
						if (res.data.data.unikey) {
							unikey = res.data.data.unikey
							// console.log(unikey);
							uni.$request('get', '/login/qr/create', {
								key: unikey,
								qrimg: 'base64'
							}).then(picurl => {
								qrurl = picurl.data.data.qrimg
								// console.log(qrurl);
								this.erweima = qrurl

								this.time = setInterval(() => {
									uni.$request('get', '/login/qr/check?key=' + unikey).then(
										res => {
											let cookie = ''
											console.log('验证是否扫码成功', res.data.message);
											// if (res.data.code === 803) {
											cookie = res.data.cookie
											let arr = res.data.cookie.split(';')
											let token = ''
											arr.forEach((item) => {
												if (item.indexOf('csrf') !== -1) {
													token = item.substr(7)
													console.log('token', token);
												}
											})
											// console.log('数组', arr);
											// console.log('token', arrToken);
											if (res.data.code === 803) {
											this.time2 =	setInterval(() => {
													 console.log('开始获取信息');
													uni.$request('get',
														'/user/account', {
															token: token
														}, {
															'cookie': cookie
														}).then(info => {
															console.log('信息',info);
															if (info.data.profile.userId) {

																// 存储到本地存储
																uni.setStorageSync('profile', info.data.profile)
																uni.showToast({
																	title: '扫码登录成功~',
																	icon: 'success'
																})
																setTimeout(()=>{
																	uni.switchTab({
																		url: '/pages/index/index'
																	})
																		// 清空定时器
																		clearInterval(this.time)
																		clearInterval(this.time2)
																},2000)

															}
														})
												}, 5000)
											}
											// }
										})
								}, 10000)
							})
						}
					})

6. 移除某个 css 中的样式

如果我们用 别人写好的组件、UI，如果需要修改它的样式，会用到样式穿透，但是如果想要删除某个样式呢

	/deep/ .uni-table-scroll{
		// 移除掉某个属性 ,  属性名：unset ； 就表示移除这个属性
		overflow-x: unset !important;
	}