uniapp遇到的一些问题

以你之姓@ 2022-09-07 12:19 586阅读 0赞

*  进入页面，数据打印出来了，但是页面没有渲染出来

方法一：

页面代码添加v-if='updateNewData'
    <view class="item" v-for="(item1, index1) in rightScroll[index]" :key="index1" v-if='updateNewData'>
    </view>
    
    
    定义updateNewData: true,不然页面进来不会显示
    
    data() {
    			return {
    				updateNewData: true,
    			}
    		},
    
    
    // 在数据变化处添加如下两行代码
    this.updateNewData = false;
    this.updateNewData = true;

方法一：this.$set()

*  给placeholder绑定动态变量

placeholder前加：就可以了，后面是变量

<u-input v-model="form.selectDocumentType" class="choiceInput" :placeholder="selectDocumentTypeLabel"/>

*  form表单中关于一条form-item中多个必填项的prop设置

具体解决方法是在<FormItem>中再包裹一层<FormItem>

<u-form-item label="证件类型" prop="selectDocumentType">
    	<view>
    		 <u-input v-model="form.selectDocumentType" class="choiceInput" :placeholder="selectDocumentTypeLabel"/>
    	</view>
    	<view class="typeContainer">
    		<u-form-item prop="typeNumber">
    			<u-input v-model="form.typeNumber" class="choiceInput" />
    		</u-form-item>
    	</view>
    </u-form-item>

*  uview的select组件，数据是对的却一直报Cannot read property ‘children‘ of undefined

是因为children:\[\]为空，我们可以改成

"children": [
    							{
    
    								"value": null,
    								"label": ""
    							}
    						]

*  uview的学习平台

[uView: uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水][uView_ uView UI_uni-app_UI]

[uView - 多平台快速开发的UI框架 - uni-app UI框架][uView - _UI_ - uni-app UI]

*  自定义导航栏

1、在pages.json文件内，将你想要自定义导航栏的内容修改成如下："navigationStyle":"custom"

{
        "path": "pages/buyProduct/add",
        "style": {
    		"navigationStyle":"custom"
        }
    }

2、在App.vue页面获取高度

onLaunch: function() {
    			console.log('App Launch')
    			uni.getSystemInfo({
    							success: function(e) {
    								// #ifndef MP
    								Vue.prototype.StatusBar = e.statusBarHeight;
    								if (e.platform == 'android') {
    									Vue.prototype.CustomBar = e.statusBarHeight + 50;
    								} else {
    									Vue.prototype.CustomBar = e.statusBarHeight + 45;
    								};
    								// #endif
    					
    								// #ifdef MP-WEIXIN
    								Vue.prototype.StatusBar = e.statusBarHeight;
    								let custom = wx.getMenuButtonBoundingClientRect();
    								console.log(e.statusBarHeight)
    								console.log(custom)
    								Vue.prototype.Custom = custom;
    								Vue.prototype.CustomBar = (custom.top - e.statusBarHeight)*2 + custom.height;
    								// #endif		
    					
    								// #ifdef MP-ALIPAY
    								Vue.prototype.StatusBar = e.statusBarHeight;
    								Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
    								// #endif
    							}
    						})
    
    			initApp();
    		}

3、在调整自定义导航栏的pages页面调整

<template>
    <view style="height: 100%;display: flex;flex-direction: column;">
            <view class="statusBar" :style="{'height': statusBar+'px'}"></view>
            <view class="content">
                <view class="customBar" :style="{'height': customBar+'px'}">
                    <u-icon name="arrow-left" color="#000" size="50" class="customBarIcon"  @click="returnPage"
                        :style="{'margin-top': (customBar-21)/2 +'px'}"></u-icon>
                    <text class="coustomBarText">新增进货</text>
    
                    <view class="page">
    
    此处是你之前的页面内容
    
    </view>
    
    </view>
            </view>
    </template>
    <script>
    	import {
    		validator
    	} from '../../js_sdk/validator/buyProduct.js';
    
    	const db = uniCloud.database();
    	const dbCollectionName = 'buyProduct';
    
    	function getValidator(fields) {
    		let result = {}
    		for (let key in validator) {
    			if (fields.indexOf(key) > -1) {
    				result[key] = validator[key]
    			}
    		}
    		return result
    	}
    
    	export default {
    		data() {
    			return {
    				statusBar: 0,
    				customBar: 0,
    			}
    		},
    		onLoad() {
    			this.statusBar = this.StatusBar;
    			this.customBar = this.CustomBar
    		},
    		methods: {
    			returnPage(){
    				console.log('=======this.currentStep', this.currentStep)
    				if(this.currentStep>0){
    					--this.currentStep;
    				}else{
    					uni.navigateBack()
    				}
    			}
    		}
    	}
    </script>
    
    <style>
    
    	.page {
    		/* margin: 20rpx;
    		padding: 6rpx; */
    		border-top: 1px solid #eee;
    		margin-top: 14px;
    		padding-top: 24px;
    	}
    
    	.statusBar {
    		width: 100%;
    		/* 		background-image:url("https://sxgp-innovate-1259195890.file.myqcloud.com/orderfood/of-wx-manager/index/indexBg_top.png");
    		background-repeat:no-repeat;
    		background-size:100% 100%; */
    	}
    
    	.coustomBarText {
    		position: absolute;
    		left: 50%;
    		top: 50%;
    		margin-left: -28px;
    		margin-top: -8.5px;
    		font-size: 14px;
    	}
    
    	.customBar {
    		position: relative;
    	}
    </style>

*  swiper轮播

推荐使用uniapp自带的swiper:[uni-app官网][uni-app]

一开始本来使用uview的swiper，发现自定义内容不太好展现。

*  引入uview

[uni-app系列（二）：uniapp 项目引入 uView 并简单使用\_Mr\_chen的博客-CSDN博客\_uniapp使用uview][uni-app_uniapp _ uView _Mr_chen_-CSDN_uniapp_uview]

*  在内联样式中使用calc

*  外部scss文件引入问题

uniapp官网示例引入css的方法

/* 绝对路径 */
    @import url('/common/uni.css');
    @import url('@/common/uni.css');
    /* 相对路径 */
    @import url('../../common/uni.css');

问题描述  
刚开始按照示例引入common.scss文件，common.scss文件中的scss语法都不生效，比如变量被解析成字符串、嵌套写法的样式不生效等，实际表现类似css  
正确的引入方法

@import '@/common/common.scss';

*  小程序onLaunch和onload先后顺序
 *  uniapp 滑太快到底部@scrolltolower没触发，再滑动一下触发2次
 *  uni-app 时间格式问题 IOS系统跟Android系统不兼容

//解决
    var newDate = new Date(date.replace(/-/g, '/'));

*  中写position: fixed，在ios下会有兼容性问题
 *  uniapp（Vue）修改对象或数据，页面没有相应更改  
    原因：  
    Vue 不允许在已经创建的实例上动态添加新的根级响应式属性, Vue 无法探测普通的新增属性

一、关于修改对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：

![format_png][]

但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如

Vue.set(vm.someObject, 'b' ,2)
    
    //或者
    his.$set(this.someObject, 'b', 2)

二、关于修改数组

Vue 不能检测以下数组的变动：

![format_png 1][]

可以使用 splice：
    vm.items.splice(newLength)

*  props 传递对象，修改后不能使用问题

同上

*  微信小程序 CSS border-radius元素 overflow:hidden失效问题 （iPhone ios 苹果兼容）

解决方法：  
父元素设置以下两个属性：

backface-visibility: hidden;
    transform: translate3d(0, 0, 0);

*  小程序页面内含scroll-view时，在scroll-view组件外滑一下页面，会出现1-2秒卡死状态

解决：

方法一、页面设置position：fixed，固定
    方法二、设置整体不能上下滚动
    "disableScroll":true,    //微信小程序
    "mp-alipay": {
        "allowsBounceVertical":"NO"    //支付宝小程序
    }

*  引入外部组件

npm install moment
    
    
    安装之后，在页面，然后就和之前咱们在网页中是一样的了
    import moment from "moment"

*  navigateTo:fail can not navigateTo a tabbar page

跳转tabBar请用 switchTab(OBJECT)，跳转到 tabBar 页面

//正常
    uni.switchTab({
    	url:'/pages/home/home'
    })
    
    
    //报错
    // uni.navigateTo({
    	// 	url: '/pages/home/home'
    // })

*  报错：navigate to:fail webview count limit exceed

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_5_color_FFFFFF_t_70_g_se_x_16][]  
redirectTo(Object object)  
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

//一开始是这样写的
    uni.navigateTo({
    url: '/pages'
    })
    //改成这样写就OK
    uni.redirectTo({
    url: '/pages'
    })

redirectTo:fail can not redirectTo a tabbar page

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_6_color_FFFFFF_t_70_g_se_x_16][]

//这一段报错
    //uni.redirectTo({
    			//url: '/pages/home/home'
    		//})
    
    //改成如下
    		uni.switchTab({
    			url: '/pages/home/home'
    		})

*  预览时报错：message：Error: 系统错误，错误码：80051,source size 3432KB exceed max limit 2MB

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_7_color_FFFFFF_t_70_g_se_x_16][]

解决方法：分包加载

[uniapp分包\_前端小白成长记-CSDN博客][uniapp_-CSDN]

[uView_ uView UI_uni-app_UI]: https://gitee.com/xuqu/uView
[uView - _UI_ - uni-app UI]: https://www.uviewui.com/
[uni-app]: https://uniapp.dcloud.io/component/swiper
[uni-app_uniapp _ uView _Mr_chen_-CSDN_uniapp_uview]: https://blog.csdn.net/mrs_chens/article/details/108417919
[format_png]: /images/20220829/4155c8b164864cda907a4fd9e5ac4470.png
[format_png 1]: /images/20220829/ee87661db80a4433984a09c448f6e006.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_5_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/41255e8124d04f32b469c70f22bf01aa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_6_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/10301b2ae5d740a388a3b41816dfdcf5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_7_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d168094bef974bad90f2ca1de336b648.png
[uniapp_-CSDN]: https://zhongmeijun.blog.csdn.net/article/details/120746584