uniapp使用uView2.0框架遇到的问题

1、后端传16位数以上时出现精度缺失的情况

1）、使用 json-bigint，失败

2）、使用 config 里的 getTask，失败

3）、修改 dataType，成功

原因：

• 通过ajax请求回来的数据在response和preview两种状态显示的是不同的。
• response中的看到的数据格式其实是字符串（ajax请求回来的数据本质上是字符串格式），preview其实是用了JSON.Parse(字符串) 给我们做美化（格式化），这个转换过程中，一般不会出问题，但是，如涉及大数(一个很大的整数，超过了javascript最大的处理能力)，就会产生转换精度丢失。
• JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。 

 

解决方法：

由于uView使用的是http请求插件是 luch-request（luch-request），去看了源码，发现：

1、因此需要将 dataType 修改为 string，首先去 uview-ui --> libs --> luch-request --> adapters --> index.js下注释掉下图这行，如果不注释掉，即使在 request.js 中将 dataType 修改为 string，还是会进入这行，还是会进行 parse 转换。

 2、然后在 requent.js下：

 

 3、在响应拦截里对响应回来的数据进行处理

成功转换： 

 

request.js全部代码：

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
	// 初始化请求配置
	uni.$u.http.setConfig((config) => {
		/* config 为默认全局配置*/
		config.baseURL = 'xxxxxx'; /* 根域名 */
		config.dataType = 'string';
		return config
	})
	// 请求拦截
	uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
		// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
		config.data = config.data || {}
		// 根据custom参数中配置的是否需要token，添加对应的请求头
		if(config?.custom?.auth) {
			// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
			const token = uni.getStorageSync('token');
			config.header.Authorization = token
		}
		return config
	}, config => { // 可使用async await 做异步操作
		return Promise.reject(config)
	})
	// 响应拦截
	uni.$u.http.interceptors.response.use((response) => {
		/* 对响应成功做点什么 可使用async await 做异步操作*/
		let data = response.data // 注意这个原来是 const ，因为后面要修改，所以改成 let

		var json = data.replace(/:s*([0-9]{15,})s*(,?)/g, ': "$1" $2')
		// 1.根据后端返回的数据调用一次或者两次replace替换

		var json1 = json.replace(/:s*([0-9]{15,})s*(,?)/g, ': "$1" $2')

		// 2.手动转换回json数据即可
		var trueData = JSON.parse(json1);

		// console.log('有问题的数据',response.data) //有问题的数据，长字段被四舍五入的数据
		console.log('正确的数据',trueData.data) //实际上正确的数据
		data = trueData
		
		// 自定义参数
		const custom = response.config?.custom
		if (data.code !== 200) {
			if (data.code == 401) { // token 失效
				uni.reLaunch({
					url: "/pages/login/login"
				})
			}
			// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
			if (custom.toast !== false) {
				uni.$u.toast(data.msg)
			}

			// 如果需要catch返回，则进行reject
			if (custom?.catch) {
				return Promise.reject(data)
			} else {
				// 否则返回一个pending中的promise，请求不会进入catch中
				return new Promise(() => {})
			}
		}
		return data.data === undefined ? {} : data.data
	}, (response) => {
		// 对响应错误做点什么 （statusCode !== 200）
		return Promise.reject(response)
	})
}

2、tabbar中间项凸出

 

1）在components文件夹下新建tabbar文件，如下图：

2）tabbar.vue代码：

<template>
	<u-tabbar :value="val" @change="name => change(name)" zIndex="999">
		<u-tabbar-item :text="item.text" v-for="(item,index) in tabbarList">
			<image class="slot-icon" slot="active-icon" :class="index == 2 ? 'center-icon' : ''"
				:src="item.selectIcon"></image>
			<image class="slot-icon" slot="inactive-icon" :class="index == 2 ? 'center-icon' : ''"
				:src="item.icon"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				val: this.value,
				tabbarList: [{
						path: '/pages/index/index',
						icon: '/static/tabbar/index.png',
						selectIcon: '/static/tabbar/indexSel.png',
						text: '首页',
					},
					{
						path: '/pages/product/product',
						icon: '/static/tabbar/proxy.png',
						selectIcon: '/static/tabbar/proxySel.png',
						text: '产品',
					},
					{
						path: '/pages/video/video',
						icon: '/static/tabbar/my.png',
						selectIcon: '/static/tabbar/mySel.png',
						text: '视频',
					},
					{
						path: '/pages/news/news',
						icon: '/static/tabbar/my.png',
						selectIcon: '/static/tabbar/mySel.png',
						text: '新闻',
					},
					{
						path: '/pages/about/about',
						icon: '/static/tabbar/my.png',
						selectIcon: '/static/tabbar/mySel.png',
						text: '关于',
					}
				]
			};
		},
		mounted() {
            // 隐藏原生tabbar
			uni.hideTabBar();
		},
		methods: {
			change(e) {
				this.$emit('change', this.val)
                // 跳转页面
				uni.switchTab({
					url: this.tabbarList[e].path
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	.slot-icon {
		width: 40rpx;
		height: 40rpx;
	}
	.center-icon {
		width: 80rpx;
		height: 80rpx;
	}
</style>

 3）在每个tabbar页面上使用，value值：tabbar是第几项就改成几

4）pages.json也要加上tabbar（原来怎么写就怎么写）

"tabBar": {
	"color": "#999999",
	"selectedColor": "#1A1A1A",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/index/index",
		"iconPath": "static/tabbar/index.png",
		"selectedIconPath": "static/tabbar/indexSel.png",
		"text": "首页"
	}, {
		"pagePath": "pages/product/product",
		"iconPath": "static/tabbar/proxy.png",
		"selectedIconPath": "static/tabbar/proxySel.png",
		"text": "产品"
	}, {
		"pagePath": "pages/video/video",
		"iconPath": "static/tabbar/my.png",
		"selectedIconPath": "static/tabbar/mySel.png",
		"text": "视频"
	}, {
		"pagePath": "pages/news/news",
		"iconPath": "static/tabbar/my.png",
		"selectedIconPath": "static/tabbar/mySel.png",
		"text": "新闻"
	}, {
		"pagePath": "pages/about/about",
		"iconPath": "static/tabbar/my.png",
		"selectedIconPath": "static/tabbar/mySel.png",
		"text": "关于"
	}]
},

5）找到uView里的u-tabbar，将居中对齐改成底部对齐

3、 uView折叠面板collapse在支付宝小程序上标题显示不出来

遇到问题：

在使用 uView 的 u-collapse 时，微信小程序可以正常显示，但支付宝小程序不可以

uView文档：Collapse 折叠面板 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

代码：

<u-collapse>
	<u-collapse-item title="标题" name="标题1">
		<text>内容11111111</text>
	</u-collapse-item>
</u-collapse>

微信小程序显示（正常）：

 

支付宝小程序显示（标题没有了）：

 

解决方案：

使用 slot 方式：

<u-collapse>
	<u-collapse-item title="标题" name="标题1">
        <!-- 重点在下面这行！！ -->
        <text slot="title">标题</text>
        <!-- 标题右侧的图标 -->
        <view slot="right-icon">
			<u-icon name="arrow-right"></u-icon>
		</view>
		<text>内容11111111</text>
	</u-collapse-item>
</u-collapse>

原因：源码上有条件编译，用于区分微信小程序和其它平台的写法，微信小程序不支持slot写法

参考：pages/componentsB/collapse/collapse.nvue · umicro/uView2.0 - Gitee.com

注意：因为微信小程序不支持slot写法， 所以微信小程序还是要使用 title="标题" 这种方式

4、输入框u-input中placeholder样式修改

注意点1：要增加:placeholderStyle="{}"，否则样式无效，

注意点2：placeholderClass的默认值是input-placeholder

注意点3：因为必须是.input-placeholder，为防止影响到其他输入框，增加父级class：input_box，或者其他能够不影响另外输入框的方式也可以

<view class="input_box">
    <u-input v-model="phone_num" placeholder="请输入" :placeholderStyle="{}"></u-input>
</view>

::v-deep .input_box .input-placeholder {
	color: red;
}